6 Make Blogger Labels Look Like Tags as Woork

Hi friends you would have seen these tags option in many blog nowadays as presently you would be able to see it in my this blog also.These tags are nothing but just the labels of blogger which use to come at the begginig of the blogger posts or at the end of the post in blogger,just depends upon the blogger template you are using and where it is defined.Using these labels look like tags make blog look beautiful.

As when i started using this trick many readers of mine started mailing me to blog about this trick,so today i am just going to let you know how to make your labels look like tags.

First of all i would like to tell you that,this trick was first used by woork in his blog template design.You can check his blog also for this demo of tags.So i have taken this trick from his blog template.If you liked woork template design you can use the similar design like him from here.The other widget you must get on is image slider and Popular Post Widget.

Now lets continue on how to implement this hack.

Advice To Backup Blogger Template.

Just Log in To Blogger > Got to Layout > Edit/Html > Expand Widgets > Ctrl+F and search for
]]></b:skin> and add the below codes before it.

div.tag{font-size:11px; padding-top:5px; color:#999999; margin-bottom:10px;}
.profileImage{float:left; margin:3px 6px 2px 0px; background:#FFF; padding:4px;}
.post-tag{font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-size:12px; margin-bottom:10px;}
.post-tag a:link, .post-tag a:visited{color:#666; text-decoration:none; font-style:italic;}

You can change css properies like color and font yourself in above codes to adjust your blog.

Now search for below codes and add the red codes after it like i have shown below.

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<!-- TAG -->
<div class='post-tag'> <b style='border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;'>Tag</b>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ &quot;?max-results=10&quot;' rel='tag' style='border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
</div>

Now Preview your design if its ok then save your template.
There's little css defined in above codes so you can change them also to your wants.
I hope you will install it successfully because it doesn't seem as difficult you might have thought looking at it.Enjoy these tags.

If you liked This Just Subscribe With US to Get Recent Widgets, Hacks And Templates To your Inbox.