Dazzling Label Clouds for Blogger Blog

Redesigned dazzling label clouds for Blogger blog. Thoroughly explained two new and unique label clouds for your blog. Being an user of blogger we all are probably want a unique design for our blog, and it is highly demanded with the rise of number of blogs, millions of blogs across the globe and its high time to redesign your Blog or webpages with the most influential styles. Keeping this mind I have coded the following two label cloud styles.

Two Styles of Blogger Label Clouds

1) Dazzling Black Label Clouds

Search for ]]></b:skin> in your template editor and just after it paste the below code

2) Dazzling Grey Label Clouds

Just add the below codes above ]]></b:skin>

.label-size{
-moz-box-shadow:inset 0px 1px 2px 0px #585858;
-webkit-box-shadow:inset 0px 1px 2px 0px #585858;
box-shadow:inset 0px 1px 2px 0px #585858;
font-family: Segoe UI;
float:left;
height:20px;
line-height:20px;
position:relative;
font-size:12px;
margin-left:5px;
margin-bottom: 5px;
padding:5px 18px 5px 18px;
background: #2E2E2E;
color:#000;
text-decoration:none;
border: 1px solid #2E2E2E;
border-radius: 3px;
transition: background-color 0.3s ease-in-out;
 }

.label-size:hover {
background-color: #151515;
}
 
.label-size a {
color:#FFF;
text-transform: none;
float:left;
}

2) Dazzling grey label clouds
Just add the following codes above  ]]></b:skin>
.label-size{
font-family: Segoe UI;
float:left;
height:20px;
line-height:20px;
position:relative;
font-size:12px;
margin-left:5px;
margin-bottom: 5px;
padding:2px 18px 2px 18px;
background: #F2F2F2;
color:#000;
text-decoration:none;
border: 1px solid #D8D8D8;
border-radius: 1px;
 }

.label-size:hover {
border: 1px solid #A4A4A4;
-moz-box-shadow: 0 0 1px #888;
-webkit-box-shadow: 0 0 1px #888;
box-shadow: 0 0 1px #888;
text-decoration: none;
}
.label-size a {
color:#000;
float:left;
text-decoration: none;
}

Also Check - Our Vimeo Videos (only 18+)

Final words

If it is possible try to change the code a little bit in your own way, it will help you learn something. However you can also directly copy the code and use it wherever you want. Take an overall idea from it and use the idea to design other widgets of Blogger, like Popular Post widget, link lists etc.

MaxxTricky

Search This Blog