Add Custom Post Footer

Yesterday, I share many post about "How to Remove ....?".
Today, I share "How to Add ...? . :)
For customize the Blog, there are many way To Change, To Remove, To Add, To Edit and To Hide. Many Bloggers are share in there blog about that. I also sharing the Testing Code for Customizing the blog by test my Blog "www.mmblogchitthu.blogspot.com" .

Now, I'm going to share 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.

Start my sharing with step by step;

Steps

1. Log in to your blogger account
2. Go to Template >> Click Edit HTML
3. Using Ctrl+F  search for this tag:(Click anywhere inside the editor and press CTRL + F.)

]]></b:skin>

4. Just paste the following code above ]]></b:skin>.

.post-footer {
display: none !important;
}

Note : This code is to Hide/Disable your default Post footer. I share about "Post Footer Section Fully Remove from Blog" . If your do it and your blog have no post footer, you do not create this step(4).
5. Again make by pressing CTRL + F and search this code in your template;

<div class='post-footer'>

Note : Upon your Template style, you can see two or three time this code. Any, move towards the second one.
6. 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>
<div style='clear: both;'/>

7. Now , Save your Template and View your change.