My Instagram

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.

Add another element of personalization and branding to your blog by adding a custom signature to your blog posts. See how at arelaxedgal.com

1. Signature that's automatically applied to all posts

  • STEP 1: Create your signature image using a design resource such as Photoshop, Canva 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 in the CSS box

.entry-content:after {content: url(IMAGE URL);margin-left: 200px;}

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

Tutorial for adding a custom signature ot your blog posts |  A Relaxed Gal: Hair + Beauty + Blogging + Finance

2. Signature only applied to new posts

  • STEP 1: Create your signature image using a design resource such as Photoshop, Canva 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 in the Post Template

<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="IMAGE URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="IMAGE URL" /></a></div> 

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



P.S. You can now follow me on Facebook at facebook.com/arelaxedgal

7 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
    Replies
    1. I'm glad this was helpful! Thanks for reading.

      Delete
  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