Add Signature to Blogger Blog


You might want to add a custom automatic signature below each of your blog posts. This would be more useful if you are running a Team Blog with multiple authors. You can use unique signatures for each author.The same can be done on a single author blog also :)

Adding Signature to Single Author / Multi Author Blogger Blogs

1. Create a Signature using Photoshop or some online Generators like My Live Signature

2. Upload this signature image to blogger.Once its uploaded hit preview and copy the image location(Note down the URL of the image).

3.Now Go to Layout > Edit HTML and Expand your Widget Templates

4.Now Find

<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>

or this one

<data:post.body/>

a) If you are using a Single author blog, paste the following code below the code you found

<img src='url_of_your_signature_image' style='border:0px;'/>

Code should be edited with your signature image URL

b) If you are on a Team Blog, paste the following code just below the code you found

<b:if cond='data:post.author == &quot;Author1Name&quot;'>
<img src='url_of_author1_signature_image' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;Author2Name&quot;'>
<img src='url_of_author2_signature_image' style='border:0px;'/>
</b:if>

If you have more number of authors, you can repeat the blocks accordingly(here i have mentioned 2 blocks[blue and brown] one for each of the two authors).Codes should be edited with the author names and the signature image  urls.

5.Save your template and you should see the signature in action :)

signature

104 comments: Add Comment
rental mobil said...

nice posting frend

cahPamulang said...

Thanks Aneesh.

cahPamulang said...

Aneesh, I use Linkwithin and get a problem because my signature are stay below this tools.
How to solve the problem my friend ?

cahPamulang said...

Here is my blog where I put this lovely code
http://cahpamulang.blogspot.com

Blogger Plugins said...

try placing it after<data:post.bpdy/>
probably you will have 2 of them as you are using the old Automatic Post summary thing. So figure out where to place it.. Somewhere below the conditional tags would do..

cahPamulang said...

Thanks Aneesh :)
The problem have been solved

Regards

الـطـالـب said...

Thnx Aneesh .
useful & easy !
keep it up!

blogger Indonesia said...

wow .. I finally found a way to create a signature, warm greetings from my blogger Indonesia.

my blog http://kutak-ketik.blogspot.com

I respect
siapih

phycrewz said...

yeah..nice post.
i'll try to do it here..

http://phycrewz.blogspot.com

prem said...

hi nice blogger over here

Blogging Tips said...

Thanks Aneesh.I will surely try and implement it on my blogger blog

Hacker said...

Thank is great..

mohammed ali jinna said...

its beutiful

Anup @ Hack Tutors said...

Hi Aneesh,

In my blog Older post, Newer post, Home links are not visible...It just visible in opera and ID browser and not visible in Fire Fox browser. Please observe my blog and see it works or not in your browser...Hope you can help me! I can send you the template code...

Anup said...

Please reply me Aneesh. I need your help!

Blogger Plugins said...

@Anup - you can test your blog across multiple browsers and resolutions using browsershots.org

Anup@ Hack Tutors said...

It just not visible on my blog, in others blog I can see it...Don't know what's the reason.

Laurel said...

Thanks, easy enough for even a complete HTML doofus like me to follow=)

adib_asraf said...

why I cant find all of:

--------------------------------------------------

If you cant find it then try finding this one

---------------------------------------------------

or this one

------------------------------------------------------

adib_asraf said...

im sorry,i didn't click at Expand Widgets Templates . , im sorry! thaqnks anesh!!

e-alkes blog said...

Nice info, bro...thank you

sop said...

thanks

Abhishek said...

Very very nice

http://allfornokia5800.blogspot.com/ said...

TNX!!!

http://moneyshare.tk said...

thanks alot....

Ally said...

It's not working, every way I try. Please help!

I'm using the multiple author code, but it is not working.

Blogger Plugins said...

@Ally - whats your blog url?

nowGoogle.com adalah Multiple Search Engine Popular said...

Great tips

Sofie said...

This is really great but it isn't working for me as I'm using a 3rd party template & I cant get it to work. Maybe you can take a look form me cause Im stuck.

rafah0lics.blogspot.com

Blogger Plugins said...

@Sofie - If you are using an XML template, it should have
<data:post.body/>
and you can place the signature code below it.

steve said...

Great idea. Easy enough to do to. Thank you

Sofie said...

Aneesh just wanted to say Thank You I got it to work!!!

pakboz said...

wow...thank for nice info

Suraj.S.R said...

Thanx Buddy.

Ankur said...

What if I wish to add a Facebook count widget at the footer? Just like http://www.bloggerplugins.org/2009/10/facebook-share-count-button-blogger.html is in header section; I want it in footer. I tried it by pasting below: "p class='post-footer-line post-footer-line-1'" but id didn't work. Any solution?

c4d4e4f4 said...

Hi Aneesh.I wonder why I can't have the live signature up on my blog?
Take a look at my blog
http://templateslayoutstest.blogspot.com/2010/03/testing-mylivesignature.html

Blogger Plugins said...

@c4d4e4f4 - add the code mentioned in 4.a) to your blog.

c4d4e4f4 said...

Hello again Aneesh..
I'm sorry again, I have inserted the code but still the signature just can't appear.help me pls.

c4d4e4f4 said...

ok Aneesh, thx..i've managed to do that..but using the original image URL when generating the image from MyLiveSignature site.What's wrong with the URL derived from signature image uploaded to blogger? I had previewed it,copy the link image location;inserted in the code but the signature failed to load.Can you help me? Thanks in advance.

Glitzerpony said...

I don't know why, but blogger doesn't show anything. Please help me : /

http://glitzerponysranch.blogspot.com/

gleenn said...

hi, this is a really great post. I followed your instrustions; however, I found that it is easier and less complicated if I use the html of my signature provided by "mylivesignature" to insert in the html of each post :)

Ann Krebber said...

It's a great stuff for me who intend to start with blogger.com for alternatives besides wp.
Thanks and regards,

john.b said...

Hi Aneesh,
I just implemented another one of your work. Thanks, again :) http://www.adouseofinspiration.com/

Mary said...

Aneesh, I have read and pasted and I can not get this to work. My friend and I share a blog and would love to add our signatures automatically. Right now, we just copy/paste the HTML code that was generated by MyLiveSignature as we add a post. Could you please explain this a bit more to someone who knows absolutely nothing about html code.

Our blog is http://milesandus.blogspot.com/

Thanks in advance!

Blogger Plugins said...

@Mary - leave me your email via the Contact Form on this blog and i will send you the codes.. :).. if i post codes here in the comment form, it will automatically change the html posted in the comment and so the code wount work.

CJ said...

Thanks for this, I actually did it a little different. At first I did it your way, but then I went and did it so that it was in the post each time I went to post something in my blog. I have a saying at the end of each of my blogs, which says "Until next time...", and I thought it would be cool to spice it up with that. :)

Thanks!

esoftload said...

thanks for the post look me blog........
http://www.esoftload.info

Ramya Manja said...

Hey Aneesh,

The tips which u have given seems very easy and app-liable,but problem with me is I am not able to find the code which u have mentioned....

Here is my blog URL:http://mysignaturedishes.blogspot.com/

I would be glad if u could help me getting my signature in any way..

Thanks

yavşak said...

thanks ;)

Anonymous said...

@Aneesh

ReentryCapsule said...

Yes its work.Thanks Anesh.See my blog.
http://reentry7.blogspot.com/

gina said...

I also can't find any of these 3 codes. And I have expanded the widgets. Can yu help? www.fabricsilove.blogspot?

Thanks,
Gina

Mod Killswichengage said...

Thank you good information.

For Lush said...

This is legit awesome.

Red White Flag said...

nice...good information

LiLy said...

thanks for this good info!
btw,i wish to put my signature at the center of my post.how to do that?please help me..

http://syarliey.blogspot.com/

Blogger Plugins said...

@LiLy
change <img src='http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs081.ash2/37381_397408435059_688550059_4285461_1305249_n.jpg' style='border:0px;'/>
to
<center><img src='http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs081.ash2/37381_397408435059_688550059_4285461_1305249_n.jpg' style='border:0px;'/></center>

When creating Signatures at MyLiveSignature, opt for the Transparent background in the Wizard or else your signature will look bad with white on pink.

Manjul said...

thanx

Anonymous said...

thanx a lot

eyefox said...

Very userful with me, thanks !

♥~mafe~♥ said...

hi, this is very useful! thanks so much!

i'd like to put the signature on the right, though, instead of it appearing on the left. How do I do that?

Thank you again for your great tips!

♥~mafe~♥ said...

oh aneesh, sorry, i just found out how to do it. :))
i added margin-left:200px beside the border=0px. sorry for your time and thanks agaiN!

Heather Baxter said...

thanks you are awesome!!!

Sri Kolla said...

Thank you..awesome one.... ☺

EdU said...

Thanks so much... really useful!!!

Ancients said...

I love you Aneesh. I've been looking for all these types of improvements and finally stumbled here to find you have everything that I need!

Elizabeth said...

This was a big help! Thanks for posting this!

Marilyn@Inspired Moments said...

Thank you so, so, much. I am such a novice (like 2 weeks novice).

Neopets said...

Hai..many tahnks to you..

i have looking this way a month ago, now i get this tutorial..

thanks

Danz said...

how can i put it on the right side of the post aneesh?

sewa komputer said...

Amazing ! I wil do it
Thanks

lara_nur said...

hi,

how about to put an image above the profile name in profile widget?
if there are more than one author,blogger wont display the profile pics.please help

Sports Directory said...

Thanks for sharing this nice tips. It looks attractive and impressive when a signature is in post. I will try this on my blog.

Regards,

Sophie

Sue said...

Thankyou - your instructions are great!

Jaleesa said...

I have an issue, when I first used this code with my 3rd party template it worked just fine. But now that I have switched over to one of Blogger's template the format is all messed up

Example:

'My Signature' Posted by my name at 2:50pm

I want my name to be replaced with my signature not have them both.I have removed the code because I didn't want my blog post to be messed up.Can you help me?

Chatterbox Chuck said...

This is excellent Aneesh, my only issue is how do I get the signature to only show on the post and not on the main page. When I do the jump break the signature still shows on the main page and the "read more" link shows up below the signature on the main page. I would rather not have the signature show on the main page. Any advise would be greatly appreciated.

Corinna McGregor said...

Thanks friend! Worked like a charm!!

Djraj10 said...

I can't find the 3 codes!

Dandylicious Creates said...

I am using the simple template and when I expand Widgets I don't have any of those codes... I have this, where would I put my image link and what would the code be...Thanks!

/* Widgets
----------------------------------------------- */
.widget .zippy {
color: $(widget.alternate.text.color);
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

.widget .popular-posts ul {
list-style: none;
}

Jegadeesan said...

superb it is working,,,,,,,,,,,
Other languages are also supported

Kelly Maatman said...

In step "2." you put "upload this signature image to blogger", how do I do that?

Blogger Plugins said...

@Kelly Maatman
1.Save the signature image to your PC
2.Create a draft post in blogger.
3.Add the image(that you saved to your PC)
4. Once it is uploaded, you will get the url(link) of the image(You can get this from the Edit HTML tab of the post Editor.Copy that url.

Hope this explains :)

Renson Kimori said...

Mine worked but their is blue border around the signature.. how can i change the blue border in any color i want?

Renson Kimori said...

Hi. Plz.. How can i remove blue border around my signature?

Blogger Plugins said...

@Renson Kimori - you already figured that out right?

Local Search News Blog said...

Hi,
when you say upload an image to Blogger do you mean add it to a server like Picasa and copy the URL? I know how to add an image to a Blogger post, but I can't see any way to upload an image by itself to the same location as my blog...

Blogger Plugins said...

@Local Search News Blog - all images uploaded via blogger go into your picasa account. you can upload the image anywhere and get the direct link to the image.

Shasty said...

Aneesh...I'm just not getting it. I;ve posted the following after data:post.body

center > < img src='https://picasaweb.google.com/lh/photo/pLj2wKrEuXWxsL7nNHRJZuUzlZMzH6l3H_9Vtr-1ibg?feat=directlink' style='border:0px;'/> </center

with and with out the center. Still not signature. Can you help?

http://hastywife.blogspot.com

Blogger Plugins said...

@Shasty - the direct link to the image is https://lh5.googleusercontent.com/_CUXSgIyK1ho/TWfybkbbZXI/AAAAAAAACYY/zRj-d5bo9wo/s1440/A855448F88856E66D29782867A678063.png.jpg

Shasty said...

Wow thanks. How did you find this? I thought I had done this in transparent but now it is still black. Do you know what I've done wrong?

Shasty said...

How do you find the direct link?

Huddy said...

Hi Aneesh, can you help me out a bit?

1. I tried following your advise on how to place the signature in the center, and it turns out ok. But when I changed center to right, the signature won't go to to the right. Is it possible to make it on the right-hand side?

2. The other one is, do you know how to make the signature visible on previous posts as well?

Appreciate your help, thanks!

Huddy said...

Aneesh, don't mind problem number 1, i solved it just now :) But still hoping you'd know how to put the signature in previous posts ;p

Pirate said...

nice one. thx

Tienda de Sueños said...

Thank you for this! I had been searching for some advanced way to do ths and this post was really helpful!

Blogger Plugins said...

@Huddy - it will appear on all posts irrespective of whether its older or newer.
@Shasty - click on the "Edit HTML" tab in your Blogger post editor, and you will be able to see the link to the image

Minnie said...

Thank you so much, I must have tried about 100 different websites over a month and yours was the only one that worked! x

Sarah said...

Thanks for your clear, concise directions!!

Бито said...

thanks

Lele2030 said...

Can I know how to move my signature to right side?

crumpylicious blog said...

It's not working on my blog http://crumpyliciousblog.blogspot.com

I posted it below the data:post.body or class='post-footer-line post-footer-line-1

Lisbet / *LLL og Co.* said...

Thanx a lot for sharing this post. Now I finally know how to add an auto. signature! :-)

Erryc Ryc said...

dude. . thankss. .^__^

Barbara said...

This is a great article, and a great topic to explore. Thanks for sharing.

Post a Comment