Portal of all Blogger widget, Airtel USSD Codes, Facebook Hack, Free Internet Tips, PC and Blogger Tricks

Breaking

Sunday 7 July 2013

Awesome Cloud style label Menu

Hello Friends. Recent we have posted how to add drop down menu label and this time again we are with Awesome and customize widget for labels Menu.
The code below can be customized in several ways to create exciting label designs. You can also add background images to them.
READ Also:Labels menu to drop down menu
Follow these easy steps:
1. Go to Blogger > Settings> Layouts
2. Click add a gadget and choose
Labels
3. Inside the settings make sure to choose the cloud display. You may set other options as per your requirement.
Please choose to display at most 25 labels.
Too much labels on homepage look awkward.
Showcase your best categories only.

4. Now save the widget and go to
settings > Template
5. Backup your template
6. Click Edit html > Proceed and
search for this ]]></b:skin>
7. Just above it paste the following CSS code:
CODE:
/*-----Custom Labels Cloud widget by www.allin1-web.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;
}

8. Save your template
9. All done!

Visit your blogs and see the labels completely transformed to small neatly crafted rectangular boxes. If in case you want the label boxes to be of random sizes depending on the post-count then simply delete font-size:10px; from the above code.

No comments:

Post a Comment

Notice: Don't add "backlink". Text with Link will automatically Removed.