Add Custom Post Footer in Blogger

The post footer that is set by default in Blogger looks very ugly! Even if the whole blog is beautifully designed but the post footer isn't good then it would make a very bad impression. Today I'm going to teach you how to add a custom post footer in your blog. It looks beautiful, attractive and very cool. I'm sure you guys will like it!


This new footer has a really beautiful design. It specifies Post Author name, Publication date or time and number of comments. And here lies the good thing. It also has beautiful icons.


Add Custom Post Footer in Blogger

First of all we have to disable the blog post footer that has been already placed there. Goto your Blogger Account >>  Select your blog >> Template >> Edit HTML. Click inside the editor press CTRL + F. Now search for ]]></b:skin>. Once you get to it just paste the following code above ]]></b:skin>.
.post-footer {
display: none !important;
}
Now we will add our very own custom post footer, Again make a search by pressing CTRL + F.

Find <div class='post-footer'>, you will see 2 matches. Move towards the second one. Paste the following code above that match (the second <div class='post-footer'> match in the search).
<style>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Lato);
.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;}
</style>
<div class='postmeta-primary'>
<span class='author'><i class='fa icon-user'/><a expr:href='data:post.authorUrl' rel='author' target='_blank'>
<data:post.author/></a>
</span>
<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>
</b:if></span>
</div>
<div style='clear: both;'/> 
Note: If you want to hide the custom footer from post and static pages then search for ]]></b:skin> then paste the following code below it.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.postmeta-primary{
display:none !important;
}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.postmeta-primary{
display:none !important;
}
</style>
</b:if>
That's all! You're done! :)

I hope that you guys will like this custom post footer. If you have any confusions just feel free to ask me in comments. I'm there for you guys! :)