In this post im gonna explain how to add nice label /category widget for blogger few weeks ago i was posted about Attractive Css3 Labels / Category Widget For Blogger. So, this is also same trick. However this is also same trick with different style. Im using CSS for this trick check blow image for example.Earlier i posted about same trick Change Blogger Label Links As Brick / Box Style. Follow below steps to add it to your blog.Its easy.
1. Log in to blogger account & Go to Design >> Edit HTML
2. Find this code by using Ctrl+F ]]></b:skin>
3.Paste below code Before ]]></b:skin> code
4. Now Click Save Template.
You are done...
2. Find this code by using Ctrl+F ]]></b:skin>
3.Paste below code Before ]]></b:skin> code
/*-----Custom Labels Cloud widget by www.bloggertrix.com----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none;font-size:10px;color:#666;} .label-size:hover { border:1px solid #6BB5FF; text-decoration: none;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; }.label-size a:hover { text-decoration: none; }
4. Now Click Save Template.
You are done...
Looks Good :)
ReplyDeleteThanks For Sharing :)
@Osho Garg
ReplyDeleteYou are welcome bro.
thanks for posting its help me a lot
ReplyDeletei'm looking for the code which aligns the bricks, left, right, center, justify, any ideas?
ReplyDelete@hemanth kumar
ReplyDeleteYou are welcome...
thank you
ReplyDeletehttp://ebooks4fee.blogspot.in/