Add Customized Post Footer On Blogger Blogs

Blogger is the best platform for blogging. It has many feature and the best part its user friendly interface. And now in this article, I’m with another tweak for blogger which is need to all blog. It is nothing but Post Footer. Post Footer are the required tool for all blogs and websites. But the default Blogger post footer was not liked by all though it don’t have good look. So in exchange of it you can add this new Customized Post Footer for your blog. This article will guide you about adding this Stylish Post Footer for Blogger Blogs.

Add Stylish Post Footer On Blogger Blogs

Okay, Whats new in this Stylish Post Footer for Blogger Blogs? It has catchy design and with Author name, Published Date/Time and with numbers of Comments. So these things can make your blog so attractive. The best part here is, the customized post footer has superb icons for each notification like author,time and comments. Are you interested in adding this footer to your blog? Then follow my simple tutorial added below,

How to Add Stylish Post Footer in Blogger

Step 1: Go to Blogger >> Template >> Edit HTML.

Step 2: Then search for ]]></b:skin> tag in your template and paste the following code above/before ]]></b:skin> tag,

.post-footer {
display: none !important;

Step 3: Again search for <div class=’post-footer’>, there may be more than 1 tag. Go for the second one and paste the following code above/before  <div class=’post-footer’> tag,

@import url(//;
@import url(;
.postmeta-primary {float: left;text-transform: capitalize;font-family: &#39;Lato&#39;, Arial, sans-serif;margin-top: 20px;width: 100%;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;padding-top: 10px;padding-bottom: 10px;}
.postmeta-primary .fa {margin-right: 10px;}
.postmeta-primary a{text-decoration: none;}
.author2, .meta_date, .meta_comments {margin-right: 10px;padding-right: 10px;border-right: 1px solid #ddd;}
.author {text-transform: uppercase;}
.icon-user:before {content: &quot;f007&quot;;}
.icon-calendar:before {content: &quot;f073&quot;;}
.icon-comments:before {content: &quot;f086&quot;;}
[class^=&quot;icon-&quot;], [class*=&quot; icon-&quot;] {font-family: FontAwesome;font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased;position: relative;}
<div class=’postmeta-primary’>
<span class=’author’><i class=’fa icon-user’/><a expr:href=’data:post.authorUrl’ rel=’author’ target=’_blank’>
<span class=’meta_date’><i class=’fa icon-calendar’/><a><data:post.timestamp/></a></span>
<span class=’meta_comments’><i class=’fa icon-comments’/>
<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 0′>No Comments<b:else/> <b:if cond=’data:post.numComments == 1′><data:post.numComments/> Comments<b:else/><data:post.numComments/> Comments</b:if> </b:if></a>
<div style=’clear: both;’/> 

Step 4: That’s it! Just save your template and check your blog for effect!

How to Hide the Stylish Post Footer

Step 1:  Go to Blogger >> >> Template >> Edit HTML.

Step 2: Then search for ]]></b:skin> tag in your template and paste the following code after/below ]]></b:skin> tag,

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
display:none !important;
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
display:none !important;

Step 3: Now Save your template and enjoy!

Have you added this Stylish Footer to your blog? How do you feel,exciting? Share your thoughts in comments below! If you’re facing any issues then drop them in comments below! Peace Blogging:) [via]

Facebook Comments

Speak Your Mind


CommentLuv badge