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

6 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

© 2014-2017 A Relaxed Gal. All Rights Reserved. All posts are written by Leah unless stated otherwise. All of the content on this site is for informational purposes only. I am not a hair care, blogging, beauty or financial advisor or life professional. All opinions are from my own personal experience and are not to be viewed as professional or legal advice. None of this content is meant to be used or taken a substitute for any professional advice. Information provided is accurate and true to the best of Leah's knowledge. There may be human error, omissions, and mistakes in the information provided.

See Disclosure and Privacy Policy.





Instagram: @arelaxedgal