Friday, August 23, 2013

How To Add Customized Signature To Blog

Hello beauties,

I was fascinating how amazing it was to be able to design your own blog layout. I totally have no clue how to design my own blog. Lucky that blogspot is kind enough to have templates for the blog and opportunity to add-on colour. That's about it for me even though I have tried to learn how to design my own blog but I haven't been able to figure it out. My eyes almost popped out last time when I was staring at the code for so long LoL.

Anyway, I was so happy to be able to add a custom designed signature by me to my blog hihi ^.^ Yay!!! I have to thank you the search engine for that. It's amazing how you can always search & get the answer through Google from different blogs <3. So I would like to share my happy signature custom design to everyone of you who has not yet figured out how to add the signature to your blog!


The Simple way to add signature to your blog is:

Go to your Blog  --> Blog & Comment section
Then in the "Post Template" box click "Add" then you can write your Signature there.

However, I find that it's not really  satisfying at all. It's like a template for your post before your starting to write something new. It's not really fun at all unless you want to use same line every time you start your new post :/

The harder way is more rewarding. So I am going to lead you through the steps that I have been searching and learning how to do it. I also will give you the link to the blog that I have learned to do the signature.

So first of all: you can pre-create your signature and upload it to photobucket or whatever image hosting website that you're using.

To create the signature, you can go to this website: http://www.onlinesignature.in/

It is very simple and you can customize the font you want. After you create the signature, they let you download it to your computer. From your computer, you can upload the signature to whatever website you use and get the direct URL of the image.

Here is mine:

To save you time and headache. I will just post the code and show you where to put it.

So first, go to your Blog Template ---> Edit HTML

This is the code for you to put into the HTML, but first you have to copy the direct url image of your signature then paste it into the bracket that I provide below.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.entry-content:after {
content: url(YOUR IMAGE URL);
margin-left: 140px;}
</style>
</b:if>



After you finish putting the signature direct url image, you can copy the whole code and:

Then you can scroll down to the end of the box you will see this:   ..... <b:section-contents id='footer-2-2'/></html>

It's very easy to use since it's right at the end of box. The </html> is a closing tag. So paste this code right in between the closing tag: Like this:  ..... <b:section-contents id='footer-2-2'/>THE CODE</html>
It will be looking like this: 

..... <b:section-contents id='footer-2-2'/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.entry-content:after {
content: url(YOUR IMAGE URL);
margin-left: 140px;}
</style>
</b:if>

</html>

If you want to learn to put the code by yourself, you can go to this blog where I have learned from to check it out step by step:

This one is for when you want to use CSS: CSS Signature Edit

This one is for when you want to get into HTML HTML Signature Edit

Trust me, you want to for the html signature edit ;)

They are both from the same blog.

I hope you find it's helpful. I am so exciting hihi! Until my next post, have a wonderful Friday everyone. Weekend is coming!!!

*HuG*