5 Steps to Add Signature to Blogger Posts (with Demo)

1 comment
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 your are howbloggerz user, 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.
How to add signature to blogger posts

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.
Read : How to Get the URL of an 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. Stay Updated, Browse Howbloggerz ! :)

1 comment:

Every comment is appreciated but keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted, including mentioning your blog unless necessary. Thanks for understanding!

Request Post