How To Add A Custom Signature To Blog Posts In Blogger

I've started to get more serious about blogging and to start 2016 off right I decided to get serious about my brand and brand look.

One aspect of that brand look is a blog post signature. I've seen several bloggers that have a pretty signature sign-off for their blog posts and I've wondered how they do that and how I could do it. I'm not well versed in HTML coding, so after some online searches, I found a few articles with tips and HTML code for Blogger that would help me create the post signature I longed for.

Here are two ways I found for adding a signature to your blog posts from I Can Build A Blog and Code it Pretty. I've opted to use the second option because of my blog design.

Adding custom signature to Blogger blog posts | A Relaxed Gal
(This post includes some affiliate links. Should you click an affiliate link and make a purchase I may receive a small commission at no extra cost to you.)


1. Signature that's automatically applied to all posts

  • STEP 1: Create your signature image using a design resource such as Photoshop or My Live Signature
  • STEP 2: Upload your image to a web album like Picasa Web Album or Google Photos
  • STEP 3: After uploading the image capture the URL
  • STEP 4: Go to Template > Customize
  • STEP 5: Copy and paste this code into the CSS box

  • STEP 6: Replace IMAGE URL with the URL for your signature image

Easily add custom signature to blog posts | A Relaxed Gal

2. Signature only applied to new posts

  • STEP 1: Create your signature image using a design resource such as Photoshop or My Live Signature
    STEP 2: Upload your image to a web album like Picasa Web Album or Google Photos
    STEP 3: After uploading the image capture the URL
    STEP 4: Go to Settings > Posts and Comments
    STEP 5: Copy and paste this code into the Post Template
  • STEP 6: Replace IMAGE URL with the URL for your signature image




visit the blog from leah's view for more content creation tips

11 comments

  1. Thank you for this wonderful tutorial. I used option 2 and I am very pleased with the result! :)
    Have a great day. Regards from India.

    ReplyDelete
  2. Hi,

    is there a way to add text or links just below?

    ReplyDelete
    Replies
    1. You can add code to it so that text and/or links are part of the signature.

      Delete
  3. Dear Leah, thank you very much! This has been very helpful.

    ReplyDelete
  4. Thanks a lot, after all, lots of try i have found your useful post. I have applied my signature to new post and its working ok. In CSS code application signature is added to all of my pages sitemap, about us, contact us and desclaimer, which is not required. I have try your post and comment/post templete code. Finally its working ok. Thanks again.

    ReplyDelete
    Replies
    1. I'm glad this worked for you. Enjoy your blog post signature!

      Delete
  5. Thank you very much for sharing this. I tried several sources and yours is the easiest. I uploaded the signature image on one of my blog post and used this URL for the CSS code. Very simple.

    ReplyDelete
    Replies
    1. I'm glad you found the signature tutorial helpful. I also had to go through several resources before I found a solution that was easy enough for me to implement.

      Delete
  6. OMG! Thanks so much! Both options worked but I preferred to use the second one. I just changed my blog's template because I can't get rid of my old siggie which I uploaded through Photobucket. Your post/tutorial is a life-saver!!!

    ReplyDelete