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 Photobucket
  • 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

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 Photobucket
    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
Share:

2 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

© 2014-2017 A Relaxed Gal. All Rights Reserved. All of the content on this site is for informational purposes only. I am not a professional in hair care, blogging, beauty, personal finance or life. All opinions are from my own personal experience.

See Disclaimer and Privacy Policy.