Unordered List

Thursday, February 21, 2013

CSS Brick Style Label Cloud Widget For Blogger

Friends, This is a widget to modify your label to a brick style with CSS effects. It is very effective widget to attract people when they are entering your blog.  Now i share, How to install this widget into your blogger?. If you want to install please follow this post and enjoy……



How To Add stylish css Bricks Style Labels To Blogger from (techtoones.blogspot.com)


Log in to Blogger account
  • Select Templates


  • Click on Edit HTML 

  • Tick On  Expand Widget Templates.

  • Find (Ctrl + F)   ]]></b:skin>


  • Copy  the code shown below and paste Before/Above it.


/*-----Custom Labels Cloud widget by www.techtoones.blogspot.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;
}

  • Save Templates.

  • Then go to Layout



  • Now Click On Add Gadget Button.

  • Add Labels Gadget  from given list

  • Unchecked Show Number Of Post Per Label.

How To Add css Bricks Style Labels To Blogger from (techtoones.blogspot.com)

  • Save it.



Are you happy?….. Do you like this blog ….. comment below………………..

0 comments:

Post a Comment