Label Cloud which is basically known as Tag Cloud is one of the very popular Google Blogger widget or gadget. It has the best powerful feature to organize your entire blog site content in a systematic way. Similarly it also gives dynamic look to your entire blog site and also definitely make grouping posts easier. Additionally, you and all novice to the blogger platform knows that Google Blogger doesn't provide any kind of designing control over this default blogger Label gadget although it definitely has the right customization. Thus, today I am posting this article especially to implement CSS3 powered design for this gadget to stylify and give it a pretty dynamic look. Well let's stop our conversation here and point towards customizing this gadget or widget by following the below listed amazing and powerful steps.
Follow below Steps to Customize the Label Cloud in Blogger:
- Go to Blogger > Setting > Click layouts
- Choose "Add a gadget" option and select "Label"
- Inside the Label gadget setting choose "Cloud" as the display option and hit Save button
- Now Go to Template > Design and backup your full template to prevent from template malfunction.
- Now Click Edit HTML > Proceed
- Search for ]]></b:skin> and just above it paste the following CSS3 Powered Label Cloud customization code.
/*-----Custom Labels Cloud widget by www.seomez.com----*/
.label-size a{text-transform:uppercase;float:left;text-decoration:none}
.label-size a:hover{text-decoration:none}
.label-size{float:left;font-size:10px;color:#666;text-transform:uppercase;text-decoration:none;border:solid 1px #C6C6C6;border-radius:3px;margin:0 2px 6px 0;padding:3px}
.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;
}
- That's it! Now save your template and view your blogger site.
My Conclusion:
Dear Pals, I am sure that you will gone a love this customization when you look over your label widget. Well installation of this won't create any troubles but if you face any sorts of problems and if you need helps regarding font color on active, hover and visited links then let me know through the great help of below comment wizard.
