search here and find more articles

5 Steps to Add Signature to Blogger Posts

5 Steps to Add Signature to Blogger Posts
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;
    <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;
    <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


Gistfans do not claim ownership of any of the Songs and Videos that we upload and any copyright infringement complaints will be executed immediately! It is our policy to honor all take-down requests! Email Us via


If you believe that this page has violated your copyrighted/protected material(s), please kindly Contact Us for immediate removal, or mail us at stating the content name/URL of the page. Thanks.

To upload your music on Gistfans and get massive download, contact us now:
Whatsapp: 08095459350

Post Summary


Article Name

5 Steps to Add Signature to Blogger Posts


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.



Start typing and press Enter to search