How To Add Date, Author And Labels Icons Below Post Titles



You have seen many blogs display date, author name, and label name links with icons to easily understand the time and author of the published post and the category. This is very useful to your visitors to easily navigate to the label category within the post.


How To Add Date, Author and Labels Icons To Blog

1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.


2. Now click on Expand Template Widgets check box.

3. Search for below code in your Template.
]]></b:skin>

4. Just before "]]></b:skin>" add below CSS code.
/* Start Postmeta Icons CSS Code by http://www.all-blogger-tools.blogspot.com */
.postmeta-primary{font-family: Arial,Helvetica,sans-serif;text-shadow: 1px 1px 3px #f7f7f7;color:#222;font-size:11px;text-transform: capitalize;padding: 5px 0;border-bottom:1px dashed #ccc;margin-bottom:10px}
.postmeta-secondary {background: none repeat scroll 0 0 #DBDBDB;border: 1px solid #CCCCCC;color: #DC0771;font-size: 12px;font-weight: bold;margin-top: 10px;   padding: 5px;}
.meta_date,.meta_author,.meta_categories{padding:3px 0 3px 20px;background-position:left center;background-repeat:no-repeat}
.meta_date{background-image:url(http://3.bp.blogspot.com/-HtLpT8FHgVI/Td-m0u_f4WI/AAAAAAAAHDs/u68p5bwgE8c/s1600/time.png)}
.meta_author{background-image:url(http://4.bp.blogspot.com/-VRKtPlowsDI/Td-mUaAlF2I/AAAAAAAAHBU/Hc_M-KSNWT8/s1600/author.png)}
.meta_categories{background-image:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Ss44Xlzeq1I/AAAAAAAAB7I/EdpligkErdk/s400/folder.gif)}
/* End Postmeta Icons CSS Code by http://www.all-blogger-tools.blogspot.com */ 

5. Now search for below code.
<div class='post-header-line-1'/>
 6. Then Replace above code with below code.

<div class='post-header-line-1'/><div class='postmeta-primary'><span class='meta_date'>Posted On : <b style='color: green; font-weight:normal;'><data:post.timestamp/></b></span> &amp;nbsp;<span class='meta_author'>Post Author : <b style='color: green; font-weight:normal;'><data:post.author/></b></span><span class='meta_categories'>Categories:  <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag' style='color: green;'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></span></div>

7. Save your template and view your blog.

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes