
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)}
.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]
<div class='post-header-line-1'/>
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>
<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>
2 comments
i like it. but how can i avoid category link from this widget
@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