Nerd DIY // How to automatically add your signature to every blog post

add signature to every blog post blogger

Adding a signature to every Blogger post is a great way to personalize your posts and add a little bit of your personality to your words.

I’m just going to go over the coding aspect of this project, I’m assuming you already have your signature image, either in .PNG, .JPG or .GIF format and have uploaded it to a site that’ll give you an image URL – Flickr and Photobucket are free and easy to use.

After you have your image URL, go to your Blogger blog, select Template, click Edit HTML, and check the box for Expand Widget Templates, and search for this code: div class=’post-footer’. There will be 2 instances of this code, you want the 1st one. Immediately ABOVE this insert your image code  (see example).

add signature to every blog post blogger 1

Important TIPS: Use signal quotes around your image URL. You must have the backslash / at the end before closing the bracket for your image code. Use paragraph tags around your image code to separate your signature from your post’s text.

add signature to every blog post blogger 2

Click Preview before you Save, if your signature is where you want it Save & your finished.

LinkWithin – If you’re using the snazzy LinkWithin widget on your blog you’re going to want to put your signature in a different place – because if you use the instructions above your signature will show up below the LinkWithhin widget.

add signature to every blog post blogger 3

Again, go to the same spot – select Template, click Edit HTML, and check the box for Expand Widget Templates, but this time search for the code:  data:post.body/. There are 2 instances of this code, too, and again it’s the first one you want. Immediately AFTER this insert your image code.

add signature to every blog post blogger 4

Click Preview before you Save, if your signature is where you want it Save & your finished.

add signature to every blog post blogger 5

Same Important TIPS apply here, too: Use signal quotes around your image URL. You must have the backslash / at the end before closing the bracket for your image code. Use paragraph tags around your image code to separate your signature from your post’s text.

Share your successes… I’d love to take a peek at your new signatures!

Comments

  1. Hi Carrie,

    Thanks for the latest update.

    Most of the solutions I found on this problems are out of date.

    Cheers
    Francis Q recently posted..Siem Reap Day 2 – Angkor Wat & Angkor ThomMy Profile

  2. Just came across your blog- LOVE it! Realized that I hadn’t moved my post signature up after I added LinkWithin the other day. So I followed your directions and while it’s in the right place now for some reason my sig has a little drop shadow around it- which it didn’t previously. Did I miss something?

  3. Hello, I’ve done what you said to do for the LinkWithin problem to move the signature back at the end of the post. But my signature isn’t showing up, the link to the image is still working so I don’t know what the problem is :(

    xx

  4. Thank you so much for this post. I put up a simple sig, but will definitely keep playing around with it! Do you have other DIY stuff for bloggers on the blogspot?
    Jules recently posted..I Missed My CallingMy Profile