search here and find more articles

5 Steps to Add Signature to Blogger Posts

5 Steps to Add Signature to Blogger Posts
2/11/2019
Do you want to add a signature text or image to your Blogger posts? Post signature is usually a text or an image at the end of each post, adding custom signature to your blogger posts not only give it certain flair but also gives a visible stamp of your authority over your blog content. You can manually insert signature to new blog posts but what about old post, its not easy to add signature manually in already published posts specially if they are in hundreds.

Don't worry you are in Gistfans Help zone, nothing is impossible here. I have created a set of CSS and HTML code to automatically add signature in old and upcoming new posts. The best part about this method is that you can edit your signature at any time and the changes will reflect on every post.

There are two types of signature you can add either text or image and both have different way of installing therefore i have added instruction for both types with images and created a demo to make you have a look.


Added signature to blogger posts


How to Add Signature to Blogger Posts



Step 1. Login to your blogger account > Dashboard > Template > Edit HTML


how to edit blog template for adding signature in posts


Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :

<div class='post-footer'>

Note : There are two occurrence of the above code. 1st occurrence for mobile view and second for desktop.


Step 3. Just above <div class='post-footer'> Place the following code:

     <style type="text/css">
.hbz-signature {
     font-size: 22px;
     font-family: Papyrus,fantasy;
     text-shadow: 5px 2px 2px #dddddd;
     margin-top : 30px;
     text-color: #222222;
}

.hbz-signature span {
     font-size: 14px;
     vertical-align: top;
}
    </style>
    <div class="hbz-signature"><span>By</span> You Name</div>



 
    <style type="text/css">
.hbz-signature {
     margin-top: 30px;
}

.hbz-signature img {
     background: transparent none repeat scroll 0% 0%;
     border: medium none;
     box-shadow: none;
}
    </style>
    <div class="hbz-signature"><img src="Your Signature Image URL"  alt="Your Image Name"/></div>

 Step 4. Configuration of Code:


For Text Signature:

  • Adjust the value 22 to change font size of text.
  • Replace the value Papyrus,fantasy to change the font family of the text (List of Font Family).
  • Replace the value #dddddd to change text shadow color (Color Codes).
  • Replace the value #222222 to change text color.
  • Replace You Name with your name or with any other text.

For Image Signature:

Note: To create your Signature image you can use photo editing software on your mobile or machine, or the online Pixlr editor.

If you don't know much about editing, you can use tool Mylivesignatue (Recommended).

  • Replace Your Signature Image URL with the URL of the image.
  • Replace Your Image Name with name of the image.
Step 4. Click Save template.

That's all!


Now go through your blog and see you signature text or image on each blogger post. Coding usually depends on the template you are using, therefore if you have and issue related to above tutorial comment below
Post Summary

post-summary-thumb

Article Name

5 Steps to Add Signature to Blogger Posts

Description



Author Name



Published On

 

Post Category

How To




After dropping your comment, keep calm, it may take minutes before it appears after moderation.
Your comment(s) are appreciated.

You want to get notified when i reply your comment? Kindly tick the Notify Me box.

 

GISTFANS NEWSLETTER SIGNUP

Start typing and press Enter to search

'>