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

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.

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.

DEMO

How to Add Signature to Blogger Posts

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

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:

• To Add Text Signature

• To Add Image Signature

     <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 ! :)