--> 5 Steps to Add Signature to Blogger Posts (with Demo) | Experience Lab - Online business creation and development guide for bloggers and startups

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, a...

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

    COMMENTS

    Name

    Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
    ltr
    item
    Experience Lab - Online business creation and development guide for bloggers and startups: 5 Steps to Add Signature to Blogger Posts (with Demo)
    5 Steps to Add Signature to Blogger Posts (with Demo)
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6qhYMl502IkWMaFBsM3ryHMjofIm_gRqys8no7xGiv4KMfeHalMhnzaTCpgI1ZuEOdFMzMRnpkJhTbATDMjPw5l2i6sFsy_Sw5Zu2wT5kV-AI0qdVgKRfO9jpuwo6wbrtNmAne8TxVBt/s1600/How-to-add-signature-to-blogger-posts.png
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6qhYMl502IkWMaFBsM3ryHMjofIm_gRqys8no7xGiv4KMfeHalMhnzaTCpgI1ZuEOdFMzMRnpkJhTbATDMjPw5l2i6sFsy_Sw5Zu2wT5kV-AI0qdVgKRfO9jpuwo6wbrtNmAne8TxVBt/s72-c/How-to-add-signature-to-blogger-posts.png
    Experience Lab - Online business creation and development guide for bloggers and startups
    https://www.experiencelab.info/2016/05/5-steps-to-add-signature-to-blogger.html
    https://www.experiencelab.info/
    https://www.experiencelab.info/
    https://www.experiencelab.info/2016/05/5-steps-to-add-signature-to-blogger.html
    true
    2959477579779989044
    UTF-8
    Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy