Monday, 29 April 2013

How to Add - Cool Signature to Blogger?

Posted by Arun Kumar Choppara On 12:22 | 3 comments
Blogger posts looks much beautiful if we have a cool signature at the end of the post content. We have a process to add such cool signature to the blog such that it gets appended to all the blogger posts.

The process of adding the signature involves the below steps.
1. Create signature using any photo editing software.
2. Then load the image on to the web and get the URL path/address.
3. Create a HTML code that can be added to the blog template which makes the signature added to all the blog posts.

Lets us see the process of adding signature to blogger in details

1. Create the embed HTML code using the below mentioned code.

<img src="SIGNATURE IMAGE URL HERE" style="border: 0 !important; background: transparent;"/>

Replace the code highlighted in red with your actual signature image URL.

2. Now add the signature embed HTML code to blogger as below.

Go to: Dashboard -> Template -> Edit HTML

Find the code <data:post.body/> and paste the signature embed HTML code just after <data:post.body/>

NOTE: If you find the code <data:post.body/> at multiple areas of the template HTML code, then paste the code at each instance and try if that displays signature on all the posts. If not then choose the next instance of the code <data:post.body/>.

3. Save the Template and view blog to see the changes.

The signature should have been added to blogger and should get displayed on all the blog posts.


We have some websites using which we can create some awesome signatures

1. Go to

2. No registration required and click on Proceed.

3. Click on "Using the signature creation wizard"

4.  Enter your name and click "Next Step"

5. Select the font in Step2 and click "Next step"

6. Select the font size in Step3 and click "Next step"

7. Select the font background image and colour in step4. Click "Next step"

NOTE: To make the signature background blend with the blog, check the box against Transparent.

8. Select the slope and click "Next step"

9. Now the signature is ready to use.

10. On the same page, select "Want to use this signature?" from the three available options as seen below.


Click on "Generate HTML code". Then select the signature area.

The code generated looks like the one below.

<a href="" target="_blank"><img src="" style="border: 0 !important; background: transparent;"/></a>

Before using the code, we should delete the start and end of the html tag <a>.
If we do not delete this tag, the user will be taken to the website provided in href section of the tag <a> when the visitor clicks the image (this we do not want to happen).

After removing the start and end of html tag <a>, the code looks as below.

<img src="" style="border: 0 !important; background: transparent;"/> 

Now we can use this code to add to blogger template HTML code as mentioned above.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.


  1. This is the best tutorial I have seen so far that teaches how to add signature to a blog in detailed manned. You do have mentioned all the steps in such a clear way that its easy for a new comer to do this task.
    electronic signatures

  2. Thanks Jimmy....for taking time to give such a beautiful feedback.
    Keep visiting this blog for more blogger tricks.

  3. This is really fantastic work friend..The Way in which You represent this blog is awesome.I really appreciate your work. Keep it up in future.
    website design



Founder & Author: Hi Friends, my name is Arun Kumar Choppara. I am a Software Engineer by profession and a passionate blogger. I have started blogging as a hobby and now addicted to it.
...Read More