default Blogger labels are not attractive. You can use CSS style sheet design and make more attractive custom cloud label that attract your visitors attention. It will engage them to visit more categories and more pages of your Blog. In this tutorial we provide the trick that how to style Blogger Cloud Label on Blogger Blog.
After customize the cloud label, it will look like below-
How to add stylist Cloud Labels in Blogger
1. Go to Blogger Dashboard > Setting > Layout.
2. Click on add a Gadget and chose Labels Gadget from list of gadgets. .
3. Now change the setting as shown in below and click on save option -
4. Now , you go to Blogger > Template > Edit HTML option.
5. Press Ctrl + F keys and search the code ]]</b:skin>.
6. Just above ]]</b:skin> copy and paste the following CSS 3 code -.
7. Save the template.
After customize the cloud label, it will look like below-
How to add stylist Cloud Labels in Blogger
1. Go to Blogger Dashboard > Setting > Layout.
2. Click on add a Gadget and chose Labels Gadget from list of gadgets. .
3. Now change the setting as shown in below and click on save option -
4. Now , you go to Blogger > Template > Edit HTML option.
5. Press Ctrl + F keys and search the code ]]</b:skin>.
6. Just above ]]</b:skin> copy and paste the following CSS 3 code -.
.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; }
7. Save the template.