Assamtechtricks

Spice up label clouds in Blogger blog

You might have seen that most of the bloggers design their label clouds in different ways. Some keep it colored and some interested in brick style. Blogging is not limited to writing articles, designs are always got importance among bloggers. This is because sometimes blog designs mean a lot in blog progress. In this tutorial I am going to show you how to make the brick style label clouds and how we can give some hover effect on it. Hope you like it.

 Follow the following steps carefully
1) Go to Template
2) Go to Edit HTML-------Expand Widget Templates
3) Search for the code ]]></b:skin>
4) Then paste the following codes just above ]]></b:skin>


 .label-size{
    margin:0 2px 6px 0;
    padding: 3px;
    text-transform: uppercase;
    border: solid 1px #0489B1;
background-color:#BDBDBD;
    border-radius: 3px;
    float:left;
    text-decoration:none;font-size:10px;text-color:#000000;}
    .label-size:hover {
    border:1px solid #BDBDBD;
background-color:#0489B1;
    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;
    }
5) Go to Layout
6) On sidebar click on Add a Gadget
7) Select the label widget from the list of widgets
8) Check the Cloud option and Unchecked Show number of posts per label



9) Click on Save
10) Now click on Preview
That is all about styling and giving a brick style to the label clouds.