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 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!! :)
You are AWESOME. I’ve been wanting to figure this out but haven’t gotten around to Googling it to figure it out for myself. You have just saved me a lot of time. Thanks so much! And p.s. I’m new to your blog. Loving it!
Those are great tips! Thanks Amanda :)
I thought it will be difficult but with your amazing tips everything is simple:)Thanks a lot.
Love it! Thanks so much for posting this handy info :)
Oh, and that background from Shabby Blogs is just GORGEOUS! Wish I blogged about food, haha! :)
Thank you, thank you, thank you! I have been trying to find a way to add a cute little signature like yours for a while.
I am adding this on my to-do list today.
Your the best!
My sister just started a blog for different recipe’s she’s trying out and it could use some love.
http://thechefwannabe.blogspot.com/
This is very helpful. I was wondering why I was getting a nasty strobing outline around my signature when I used the red on a dark background, although it doesn’t happen when I use the light grey (sort of like chicken tracks). Even though I saved as a png. Of course, I didn’t know about saving as png-24 (I think mine was set at 16) so will go back in and deal with this.
A very clear and easy to understand tutorial – thanks so much! I will also be adding your sig method to my other blogs, then I can have a nice heavy border round my pix, but not my signature as well, which has happened with the “template” version.
Thanks for the tutorial on the signature.
My friend started this recipe blog up and she invites whoever wants to contribute to it when they come up with something tasty! Check it out!
http://taylorfamrecipes.blogspot.com/
I need to get your pulled pork recipe put on there.. I still have yet to try it out, but have wanted to ever since I saw the photo!
I totally LOVE this website! I’m on here often checking out any new things to learn and everything you post is insightful. Today I made my attempt with adding a signature on my blog and it took me some time trying to figure it out. When using Safari browser, the search function (ctrl+f) doesn’t work effectively so I recommend using IE or FireFox. On another note, when imputting the code for your image that you’ve uploaded in photobucket, flickr or tinypic, be sure to select the DIRECT LINK option. =) Anyway, I’m loving my stylish blog with the new signature.
Ah, I love it! I’ve got the signature down, but the dividers always threw me for a loop! Thanks for all the lovely tutorials. My blog would be the most visually boring site on Earth if were not for you and Megan, Amanda!!!!
THANKS AGAIN!
Yea! I did it!
Thanks for the amazing tips!
I’ve just recently come across your website and I am loving it! I followed your instructions and added a signature! Thank you for sharing how to do it! I’ll be checking back regularly for other neat tips!
The tutorial is so great! And the blog background is SO CUTE!!!
THANK YOU THANK YOU THANK YOU!!! I just started my blog and wondered how people made theirs so cool!!! Now I can make mine prettier.
i have been devouring your tutorials today, along with shabby blog, and i just wanted to thank you! your information is awesome and so helpful. i’ve done a complete blog makeover today and have made sure to direct my friends to your website for help! thanks again :)
thanks for another great tutorial! I did it but couldn’t make the option for a colored blog backround work; when I save my sig as a transparent PNG-24, I can’t upload it to photobucket (it will only upload .jpgs). I must be overlooking some basic option…any thoughts/tips? I think my sig would look so much better if it were on a transparent layer…
thanks again for all the great blog info… you are the Queen of Tutorials; Queen Tut!! ( :
Thanks Amanda! The signature tip was great and I have now figured out how to make it work. :) I really enjoy your blog and all your great tips! Thanks again!
I followed your directions and my signature worked perfectly! I even used one of your fun fonts to do it. :) I also used your tutorial for changing the style/color/font of all of my post titles and dates, and it worked so well on the first try! You have a way with giving instructions that are easy for people to follow.. I can’t thank you enough. :) (I’ll be putting a link on my blog to head people your way.)
Yaaay! I’m so excited to add these to my blog. Thank you!
I started a recipe blog a few weeks ago. I tried to use that background when I first started, I loved it too! But it’s for a computer with a wide screen. It doesn’t scale down and didn’t work on my blog. :(
After all that talk about how I used one of your fonts and your directions to change my font color/style/size on all my posts, I forgot to post a link in case anyone wants to see how it worked out! (I know if you click on the name it will take you there, but that’s easy to overlook! :) )
http://www.bethandraja.blogspot.com
ok, am I just an idiot??? Why can’t I seem to get the signature? I made it on photobucket but can’t seem to find a url to post. I have tried a million times and it keeps denying it…. anyone else use photobucket???
Thank you so much for the wonderful tutorials. I have had so much fun today dolling-up my blog. Love it! You are awesome to share your talents with the rest of us!!
I am so happy to have found you!!
Thank you for the Tutorials! They are great and so easy to follow! I had fun making my blog look much better with your help. :)
We love that you share this neat-o make your blog your own secret!
We linked you on our new crafty blog (www.threesimplegirls.blogspot.com) because we love your style and creativity and all your cute fonts!
-Sarai (of 3SG)
I don’t have a recipe blog but I have a link for it on my site. Someday I hope to be as skilled in the kitchen as you are! :D
http://justhavingaball.blogspot.com/search/label/Recipes
Just found your site! I am amazed by how easy your tutorials were!
Thank you, I now have a new signature and your cute fonts as Post Titles! I will share your site by putting a button in a post on my blog!! ;)
This is all adorable. I love this site!
Can someone please tell me the name of the font that the Shabby blog uses as their main font? I have seen others use it and I can’t find out its name anywhere! Thanks :)
Thanks again Amanda for all you do! Can’t wait to add my signature :)
Your site rocks!!!!!!!!! Thanks for the FREE info & fonts!
I love to cook and find recipes – http://www.tummyummys.blogspot.com!! Hope you find something you like!:) LOVE YOUR BLOG!!
That background is AWESOME lol
HELP…I try to search for it to add my signature but mine has a “p” instead of the “div” so I try to change it and it tells me it’s incomplete can you help me? Thanks
@Shannon
It shouldn’t make a difference whether it’s a p or a div… If you copy the code exactly like it is, and paste it right after or directly underneath the line, it shouldn’t have an incomplete error.
BTW, I shouldn’t have pulled up your blog in front of Kevin… Now he wants me to make everything on it! :D
Thank you so much. I am always having problems adding or changing things on my blog and this will help.
Hi. This was amazing. very helpful. Quick question… I’m getting the signature but also another line on top of it. Anyway of getting rid of that?? Please let me know imizznana@aol.com
Hi Amanda! I just wanted to say thank you for your Fonts for Peas section, they are such awesome fonts! I used a few of them on a new header for my blog (http://culinarycollegestudent.blogspot.com/ if you want to check it out). I’m also going to try your recipe for the best chocolate cake today! :)
Thanks again,
mikaela
Thanks so much for you help! I really needed it!
PS I do have a recipe blog and here it is
http://bewitchinkitchen.blogspot.com
Loved this tutorial, it worked in my one blog that has 3 columns but in my family blgo it can’t find the coding in the template and it’s the same template :o( so I can’t add a signature to our posts in our family website. Please email me with any help thanks!
OK I figured it out and had to finde something else! SO those of you who can’t find it you need to search for this code:
OK my post didn’t got hrough, but I figured it out. I had to look for this instead, so for those of you who can’t find that code in your HTML coding look for this instead!(No spaces after the
Ok, this is probably totally a silly question – but how do you create the custom signature that you will upload to photobucket or flickr? What program do you use?
How do you do this on a wordpress blog? Does it work the same way?
Hi Amanda;
thanks for the tut – it worked out perfect for me, but of course with your easy to follow steps it was super easy!
thanks again for all your help to make our blogs look so pretty!
I totally took the shabby blogs template – it’s so cute!!! – and put it on my recipe blog.
http://www.makeamealforme.blogspot.com
Hello Amanda! I love your blog! Many thanks for all the awesome tips! I have a question, which one is the red letter that you used for the comments in the script?? I loved it!
I meant font! Sorry!
@Alexa
That is Pea Sarah Lynne. She has several cute fonts from her handwriting! :) Check them all out here! :)
thank you so much for the help on a signature. your blog is the only one that really breaks it down for “blog retards” like myself…
thanks again