Add Date, Author and Labels Icons Below Post Titles in blogger

This tutorial will show you How To Add Date, Author and Labels Icons Below Post Titles in blogger. You might have seen these icons on some blogs where these are placed below post title. This is a nice widget that will make your blog look beautiful and professional.I have kept the installation extremely easy.You just have to copy and paste the code.

Demo

LIVE DEMO

How To Put Date, Author and Labels Icons Below Post Titles to blogger

Go to Blogger Dashboard
Click on DropDown Menu and select Template
Backup your Template before making any changes to your blog
Now Click on Edit HTML --> Proceed --> Expand Widget Templates
Press Ctrl + F and search the code shown below

]]></b:skin>

Now Paste the Code shown below just before/above it

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0CHMVD-QQapF59Y4jDCTjx69L5yC3KBFksD1ilbhQM0bH-KWBiEfkwbxvhBRV0Mwm3R-sbMg5bziTr2A9p4rkGraw_HGVwcFnqFLogbcCKeHscyTrzv3tmaaXL3doAdB0ESrrsnkjiVI/s1600/time.png)}
.meta_author{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGymin6Om053Le9TBuWqJin_wUPA6Tpn96GXZynYabZnTdaf4a-w3unn_hhD5gREAj9KTqq-w7018Te6qEpCqJ4myVZwDlgbqFRVWAxFbAPNJU-IoZSsyymS-7Cu28r8nNraSvGRMqMdA/s320/author.png)}
.meta_categories{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4jRjVeMLv1ZtYbeMnOdOBGMeFJpFFbW-oraF35OcK0aUlhowl8Ho1FU0zPJPgOqKElN6JTQxfqrIy56ErpIwbiOq-61IStTTDZoftk52cpwgXFxCAQiZbvcj9fvB5NavkurLQ28dx08/s1600/folder.png)}

Now Find the code shown below using [ctrl+F]

Replace the above code with the code shown below

<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>
&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 != "true"'>,</b:if></b:loop></b:if></span>
</div>

Like it? Share it.

2 comments

Anonymous

19 April 2012 at 05:34

i like it. but how can i avoid category link from this widget

Unknown

19 April 2012 at 06:54 Author

@AnonymousRemove these line from the widget
<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 != "true"'>,</b:if></b:loop></b:if></span>

and

.meta_categories{background-image:url(http://1.bp.blogspot.com/-1XdW9ZYyRJ0/T2B4uED2HgI/AAAAAAAAAsM/Iw05UQVam4s/s1600/folder.png)}

Click to Add a New Comment

If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
Do NOT add links to the body of your comment as they will not be published.
Only the comments posted in ENGLISH will be approved.
If you have a problem check first the comments , maybe you will find the solution there.