If you have a blog, you may be wondering how to add your signature after every post on your Blogger or Blogspot blog. This simple tutorial will show you how to do it in just a few easy steps! :) This method of adding a signature will add your signature after *every* post- even posts you’ve already written! This is not like the “template method” of adding a signature, which will only add your signature on the new posts that you make- and not the old ones. Oh and stay tuned ’til the end of the post- there’s also a tutorial on how to add a post divider after your blog posts! :)
So, to add a signature, first, you’ll need to create a signature image like the one above (click here for a tutorial on how to do that) and upload it somewhere like Photobucket, TinyPic, Flickr, etc. Then…
1. Go to your Blogger Dashboard and click on Layout then Edit HTML.
2. Check the Expand Widget Templates box.
3. Click CTRL-F and copy and paste the line below in the search box to search for it in your code.
post-footer-line post-footer-line-1
It may say :
<p class='post-footer-line post-footer-line-1>
OR
<div class='post-footer-line post-footer-line-1'>
Or something similar- either is fine. Just look for that line.
4. Under that line, paste this code and change IMAGE URL to the url address of your signature image (it’s the Direct Link on Photobucket).
<img src='IMAGE URL' style='border: none; background: transparent;' /><br/>
5. Preview it and Save it! You’re done!
If your blog background isn’t white…
This tutorial doesn’t cover the making of the actual signature, but I will give this tip for blogs that don’t have white backgrounds- here’s how to make a signature so it doesn’t have a white background around it and it will blend in with any background! :)
If you use Photoshop, when you create a new image, make sure the “Background Contents” says Transparent. Then create your signature, and when saving, go to File > Save for Web and Devices.
Make sure you save the file as a PNG-24 and that Transparency is checked. The white and grey checkerboard must be around your signature for it to work! :) If you save it like this, then no matter what background you put your signature on, it will blend in (and not have a white background around it).
Want to know how to add a post divider after your blog posts?
Follow this super-easy, thorough, and beginner-friendly tutorial from Megan at Shabby Blogs!
While you’re there, take a look around! :) Don’t forget to check out her *awesome* shabby blog backgrounds and shabby blog extras!! :)
Here’s one of the new backgrounds she just added. Wouldn’t this make the *cutest* recipe blog background *ever*??? :)
If you’ve been thinking about starting a recipe blog, now is the time to do it!! And gosh darn it, send me the link to it ASAP!!! ;)
Thanks for looking!! :)
More from Amanda:
Share:
Filed Under: Blog Design • Tutorials
Follow Amanda on 
201 Comments
Thanks so much for doing this tutorial! I have been trying to figure out how to do this and your tutorial was so detailed and easy to follow!
thank you for posting this. I try to add my name to my blog but i’m having a hard time, blogger is not letting me add my name. I have tried doing what you posted at least five times now and it’s that same thing over and over..its just not letting me. anyways thank you for posting about this I find it helpful even if blogger wont let me put my name on my post.
AHH! You rock!!!
I didn’t think this was going to work because flickr did not like my .png image, but I just uploaded it from photobucket instead and it worked!!!
THANK YOU THANK YOU!!!
I did it! woohoo! thanks so much for these super EASY to follow instructions! I love it! ;)
amy in peru
Thanks for the info! I’ve wondered for a long time how to do the signature. I’m thrilled to finally know.
Thanks, too, for all the fonts – I LOVE ‘em!
Thanks for the super-easy tutorial!!
Amanda,
Is there a way to center the signature under the post? I normally center my post and would it right under verses to the left.
You’re amazing! Thanks!
Thank you for this! I’ve used this tutorial and the one for custom fonts for the blogger titles. You are amazing!
Hi Kevin & Amanda,
Thank you very much and I found your site which offers me some tips to my blog. Your site is really great!!!
by:
Jay
I followed your instructions but keep getting this error message:
Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor
The code on my template looks like this:
.post-footer {
margin: 10px 0 0;
padding: 10px 0 0;
color: $(post.footer.text.color);
border-top: dashed 1px $(widget.alternate.text.color);
}
I’m using a template from the new template generator on blogger. It looks like it is written using CSS.
Not quite sure how to apply your tute to get this to work.
Any help would be much appreciated!
Ok, I figured it out!
I am using the “Watermark” template in blogger. When you are in the “edit html” page, scroll down until you find the following code:
.post-footer {
margin: 10px 0 0;
padding: 10px 0 0;
Directly underneath the last line of code you see above, add the following code:
background: url(http://yourimage.jpg) repeat-x 0 0;
My divider is the needle sewing thread if you visit the site so you can see that it actually works!
Found this tutorial here:
http://www.google.sk/support/forum/p/blogger/thread?tid=1a02888f64bb92a9&hl=en
Thankyou thankyou thankyou!! a tutorial that makes sense! you are wonderful x
Great tutorial Amanda…it worked for me…Thanks a bunch !!!!!!!!!
Love your site(s) and generosity. Without you, I wouldn’t have been able to create my own blog banners, so thanks so much! Since you asked, I maintain not one, but two recipe sites: the first one is my own, the second one is The Best of Inn Cuisine. I hope you’ll enjoy them both as much as I enjoy maintaining them!
http://abloggablelife.typepad.com/recipes/
http://abloggablelife.typepad.com/inn_cuisine/
Thanks again! Sandie
I love how you did the screen shots and everything! Most tutorials don’t do that!
I love this too! I have linked within at the bottom of my posts and for some reason my signature will only appear after the linked within. Is there anyway to change the HMTL so I can sign my posts write after the content and then have linked within appear?
Thanks!
Thank you! Took me a while to find the right spot in my template but I did it. Can you message me though and tell me how i can hyperlink that signature so when you click on it it send you back to my homepage? That way when people copy/paste my page onto theirs their readers can click on my signature and automatically be taken to my page? Please! :) Thanks!
survivingateacherssalary@gmail.com
hi there…
just stumble upon your site and it’s really helpful… i’m in my work to deco my blog so eventhough the background might look almost the same but yet it’s still look different and a hint of personal..
thank you again!
Amanda… Thanks so much for the instructions… for some reason my signature is not working.. I tried saving it as a jpeg and as a png but none of them work… you can only see a little square in the bottom but no signature :(
my blog is http://daniellasewcrafty.blogspot.com/ and as you will see I am only starting :)
thanks for your help!
omg! what a tutorial! Even me did this :) Thank you for sharing :)
Hi Amanda, HELP!
I’ve been trying this out several times, but all I end up is a tiny thumbnail on top of the “posted by” line
here’s the link to the screenshot of my preview:
http://picasaweb.google.com/104367427027306798304/PublicFolder#5537880472663624034
Can you please figure out what I’m doing wrong?
I can’t figure this out? My image won’t show up? Am I doing something wrong?
Hi Amanda!I am absolutely in love with your website! I am so thrilled I happened upon it! Thank you so much for taking the time to upload all the fonts and all the tutorials! They helped me out tremendously and give my blog such a personal flare! I had no idea how to work in HTML (much less what it was!), but you made it do-able. Thank you again!
Please check out my blog. I’ve added your button and referenced you in one of the entries. Oh, and maybe you could help me out with the whole outer-wrapper thing-y…to match my inner-wrapper (does that make sense?) I can’t seem to figure it out. I would appreciate any help you throw my way. :) Thank you, thank you, thank you!
Oh you are life saver! I have been trying to fix my signature that a friend did for me for over a year and this did it!
I am having some trouble finding a good (and free) photo editing program so I can do a lot of the fun stuff! Any suggestions?
Hi Amanda! Thanks so much for ALL of your amazing tips and tricks! I wanted to say that your step by step instructions are so great! I do not have Photoshop editor or anything of that nature. I downloaded the Paint.net, and sadly wasn’t too impressed. I was able to create a signature, but couldn’t get the transparency to work. I did a little more digging and found a great site that took less than 2 minutes total, that I thought you might like to know about. The website is http://www.mylivesignature.com and in just a few clicks and easy steps I was able to create a stylish transparent signature and directly link it into the HTML code based on your directions. :) Thanks so much for all you do! Felicia
Thanks for great instructions!
All of your blog tips have helped SO much! As well as your links! You are a LIFE SAVER!!!
Awesome…simple…did it…CHECK….THANK YOU!!!
Hi! I tried to use the directions above for my blogger blog but it didn’t work. HELP!!!
PS I have a recipe blog http://www.cookingwithcourt.blogspot.com
THANKS!
Courtney
Thank you so much, this is an awesome tutorial! Is there anyway to get the signature right justified instead of left, however?
Never mind, through the power of Google I got it :) For anyone that’s interested, I just put in front of Amanda’s code & at the end of her code (see this website if that’s not clear enough: http://www.anshuldudeja.com/2009/06/how-align-widget-to-centre-left-or.html.
Thanks again for the tut Amanda!
this a great post and web site. the signature fonts look fantastic.
Thanks Amanda, your tuts help me every time. I really appreciate your hard work. Love it. Hugs, Andi
thanks for sharing this tutorial!
Thank you so much for the tutorial on blog sigs!!! Soooo easy to follow! You guys rock!
Thank you for this! You’re turning the look of my blog into an awesome one.
Amanda~ your tutorials are so helpful. I just love them. I was wondering if you could steer me in the right direction. I have way too much space between my “labels” and my post divider. Not sure how to fix that. http://www.southernutahautism.blogspot.com
thanks
Allyson
I was trying to add the signature line to my blog, but for some reason it didn’t work. And where the signature image should be its been replaced with this…
Read More http://www.kevinandamanda.com/whatsnew/tutorials/add-a-signature-to-every-blog-post-on-your-bloggerblogspot-blog.html#ixzz1Lc8UPyYB
Could you please tell me why this is happened and how I can get rid of it :)
Thankyou for your time and you have some reallllllly helpful tips!
Flora x
Hi Amanda! I Can’t Find the Tags, Please Help Me! I Use Your Theme “Spring Colors 2 Collumn” Hope You can Help Me. Thanks :)
Amanda-Just wanted to say thank you for this super easy-to-follow tutorial! I was able to add a signature to my blog easily with your help. Thanks for saving me time and frustration trying to figure it out myself!!
Hey Amanda,
This really helped me! Thanks so much. I do have one question. Is there any way i could get the direct url from picnik? All of the other websites i have tried aren’t working correctly.
Thanks!
Mary
Hi Mary!
I just wanted to answer your question because it not likely that Amanda will answer your question because she is so busy getting so many comments! ^.^
Anyway, I used picnik, too, to make my signature. Just be sure to make the picture really small when you save it, I’d say about… 100-200 on the top box, I forget which one it is.. Haha I think it’s height but I could be wrong. Anyway, save the picture and then go to photobucket.com. Make an account, it only takes a few seconds, and click on the big green upload button. Upload the signature, go to your albums, and click on the direct link for that picutre. Hope I helped! :)
-Hallie
Dear Amamanda,
Thank-you for this post and it DOES work, but I am very disappointed because the text that you put in under the signature that has the link to your website gets in the way of MY text of the next post’s title. So I had to make the signature smaller, which was a lot of work, and now you can’t read it and your text STILL gets in the way of mine. I tried to delete your text in the “Edit HTML” page but it said that it could not be saved because the HTML wasn’t right. So I just tried to delete the signature and your text all together but I still got the same message. How do you delete the signature? I would’ve kept it but your text…..
Please help me!
-Hallie
so i’ve tried this 3 times now and can’t get my signature to show. any new tips?
also, have you considered doing a tutorial on how to have the reply option on the comments? maybe that’s way hard but if not i’d love to know how! :) thx!
got it!! just needed my image in a different format. and it worked. at least i think that was it.
thanks brittany #134 on the tip of how to center it!
thanks for this tutorial… it works 4 me.. :)
So helpful …
Thanks!
I finally got my own sig!
XOXO from:
Niña
THANK YOU! Your directions are VERY easy to follow and it worked perfectly! I am so proud of myself for being able to do it myself! Thank you for sharing these easy to follow instructions!!
Sarah
Thank you so very much! I’ve been fooling around with the signature for HOURS…couldn’t get the border to go away no matter how much I messed with the code.
It would have driven me nuts for sure.
Thank you so much! I had been suing the Post Template way before and it is SUCH a pain to change the signature down the road. I changed mine on one of my blogs last month and had to go back through 1300 posts and delete the old ones manually. It is SO much better to do it this way! *hugs*
Amanda, I know I’m behind the bandwagon but I finally jumped on and I LOVE the way it turned out. I’ve been a faithful reader of your blog for a while now and I’m never disappointed. Thank you for your help!
Hi! I’m Rachel and I’m Not the Modeling Type.
I tried out the signature and changing of the titles. The titles of the blogs changed but not the side ones but oh well :) Love this. Thank you so much.
Thank you SO MUCH for the signature tutorial!!!! I LOVE mine ~ all thanks to YOU!!!!!!!!!!!
Seriously Primary
Thank you! Very helpful!
Just used your tutorial to load a signature onto my blog! Thanks for helping this blogging newbie!
Kelly
Great tutorial – thanks. Another FREE prgramme to use is: INKSCAPE, which is really good.
This is the 2nd time I’ve come to your site for help. Success each time. Thanks so much!
Somebody had asked how to remove the custom signature from static pages. Was this ever answered? My blog/site isn’t live yet as I want to get everything ironed out first before I go live.
I solved the problem on my own.
Thanks for the code to add the signature.
I’m stumped by this too — would you mind to share how you hid the signature from the static pages?
THANK YOU!
hey was just wondering, my signature thing looks like a page footer that is the size of my blog posts, so i decided to use as my signiture, thing is, the picture url does not allow me to state what alignment i want, i want it centre or right… it automatically places it left…
I tried this but I never end up getting the signature to show. I’ve been fighting with this for over an hour . It shows the URL to the image, but not the actual image. How is this fixed? What am I not doing right?
You guys are so awesome thank you so so much! :)
I have been looking on Google about how to include a signature on my post and I came across your website and now I am hooked browsing around it. I have used your signature tutorial to add my signature at my blog @ http://www.threesixfivehisptamatic.blogspot.com
Thanks For This Lovely Tip,
Many Bloggers would Love to have signatures on file with Their Blogger Posts.
Help! I can’t find a <p or <div class= 'p anywhere! I tried it in my finder and it doesn't show up :(
Any help?
Excelente, excelente mesmo!!
me ajudou demais… Obrigado Amanda
thank you so much! that was super easy!!
Ohmygoodness! I’ve been wondering how everyone has these cute little signature buttons, and now I’ve been able to create my own!!!! You are the absolute best and I so love everything about your blog, even your posts from 2 years ago!!! :o)
Thanks for this tutorial! I think I’d like to add something like this to my blog…only thing I’m wondering is if it will work if I have a guest blogger? I’ll have to experiment to find out.
Feel free to stop by my cooking blog anytime! :)
Consumed: My Culinary Adventure
Votre site est très intéressant merci beaucoup.
Thank you thank you thank you. That was just what I was looking for. You rock!
I found you as a recipe blog, and am so excited to see you do tutorials also. How awesome are you!! I have a recipe blog also. Calicookingcouple.blogspot.com.
But I’m also looking to see how to make an ad to place on someone’s blog. Do you have a tutorial for that.
Thanks
Thank you so much… I was searching through Google to see how to add sigs to posts and came across your post it was real easy to do tyvm!! I had a friend who did it for me in my blog and I asked her to help I wanted to change my sig. But getting through to her is a pain … now I don’t need help thanks to you… Awesome :-)
Thank you for helping with adding a signature for dummies …lol
Thank you sooooo much. I tried this last week and didn’t work. Today it worked!! Thanks a lot. You made it simple – I just forgot to find the code by using control F, so I tried to find it by eyeballing it. Tough.
I love your blog!!! Thank you for all the great tips! I have created a signature for our blog but it leaves a huge space under the post and below the signature. Any suggestions?
I just redid mine and had to use your blog again to figure it out. But my signature is SUPER BIG!!!! How do I downsize? I’ve tried decreasing the image size and the resolution, I’m out of ideas!! You can see its enormous size: http://greatexpectationsjune82008.blogspot.com/ Thank you for any suggestions!
LOVVVVVVE Your Blog & its been very helpful. Keep up the Great work!
wow! i did it! i now have my very own siognature for my posts in my blog. thanks so much!! :)
:( I can’t get this to work. I know it is totally something I did. But, when I saved it when your directions it just will not show up in my blog. Now, when I go back into edit the HTML for the post footer I can not even find it. What in the world have I done? “/ *tear*
Thanks for posting this! It was very helpful and easy to do!
Thanks so much for the tutorial. I’ve been trying to get rid of the drop shadow/white box around all my pics, signature, etc. But, I can’t get it out. Could it be something in blogger like a code that puts that border around the pics? I’ve tried everything.
i used this a while back and it worked like a charm!
http://helplogger.blogspot.com/2012/04/how-to-remove-blogger-pictureimage.html
hope that helps :)
i guess i’m doing something wrong because i can’t get my blog to actually upload the changes :( it keeps going to an error screen. any ideas why?
Hi Amanda, the tips sounds interesting. I tried to do it in my blog but i could not find the html code you have given to place the signature link underneath it. I using blogger.
I too couldn’t find the html place as well, I think the layout section now looks different in blogger. Please post an update to this, thanks!
Thank you so much for this tutorial! I just added my signature and blogged about your site! :) http://edukateandinspire.blogspot.com/2012/06/blogging-101.html
I really enjoy your blog. I just started a blog myself, and this is a real help! You are very inspiring. I am also a teacher, and I love your fonts! Thank you!
Thank you!!!
I just did this and it worked :) thanks for sharing.
Hi Amanda! First of all, I LOVE your blog and all of your tutorials!! I was wondering what font you used in your picture with you signature example of how to work it if your background isn’t white. I LOVE that font. I have looked through all of your fonts, I think and still didn’t see it. Am I overlooking it? Thanks so much! :)
Thank you so much, you are Awesome!
Thank you for the tutorial. Is the process the same for wordpress?
Thanks for the easy to understand tutorials. I created my own blog bkgd and today added my signature! Love your site and all the helpful info. @http://atime4allseasons.blogspot.com
Hey, I just tried to do this and it looks like the lines of footer code you’re asking us to find aren’t in the current version of blogger. I tried searching and looking manually through the code and there was nothing like this as far as I could tell. Just to experiment I tried pasting the code other places that seemed related and it would show up in the footer of the whole page, not in the footer of the post. Update please? Thanks!
this tutorial is so idiot proof, but for some reason the signature just will not show up. any thoughts?