Add Custom Post Footer In Blogger

Google Blogger is the world’s second largest blogging platform. It has many outstanding features including a free super fast hosting which indeed makes it more superior than other platforms, but still Blogger has many limitations and flaws which can be ignored by doing some customizations in the ordinary template.

Today we will talk about a weak point of Blogger and that is the post footer area. Blogger already has a post footer area, but it really looks ugly. The design doesn’t look professional and those social buttons are really poor to be very honest.

So today we will learn a trick from which we can completely change the post footer of our blogger template. To install a custom post footer in your template, follow the tips given below:

First go to Blogger Dashboard>>Template>>Edit HTML and search for ]]></b:skin> tag. Once you have found it, paste the below given code just above the skin tag.

.post-footer {

display: none !important;

}

We just disabled the normal post footer which comes with a normal blogger template. Now we need to install our custom footer, for this search for <div class=’post-footer’> tag. You may find two matches, make sure that you proceed to the second one.

Just paste the below given code before the second <div class=’post-footer’>:

<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;'/>

You will perhaps not want this custom footer to appear on post and static pages. For this find ]]></b:skin> tag again and paste this code just 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>

Final Words

After installing all the codes correctly in your template, everything should work fine. However, If you have any further queries then please let me know in comments. Stay tuned for more, till then Good Bye.