Wonderful and Gorgeous CSS Cloud Label Style For Bloggers Homies

0 43



In this post im gonna explain how to add nice label
/category widget  for blogger  few Minutes ago I
posted   about  Wonderful and Gorgeous Css3 Labels / Category Widget For Blogger Users . 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. Learn how to 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 Template >> Edit HTML

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…

Enjoy… 



Related Articles: More from author

Leave a Reply

%d bloggers like this: