2 Jan 2015

Multi-colored Labels For Blogger

On In ,

5 Comments

The Blogger Labels Widget can be styled in a variety of ways. Previously we have seen Curled and Animated Labels. Now, how about a colorful Labels Widget? This one supports a maximum of 20 labels. You could get this amazing rainbow widget by adding a few steps of CSS.

Multi-colored Labels For Blogger

Step I: Adding the Labels Widget to Your Blog

From your Blog's Dashboard, navigate to Layout --> Add a Gadget --> and select Labels from the list. Select Sorting by Frequency. Don't forget to select Cloud display. Now Save the Gadget.

Configuring Blogger Labels

Step II: Adding CSS

Now go back to your Blog's Dashboard and navigate to Template --> Customise --> Advanced --> Add CSS. Copy-paste the below code and click Apply to Blog. That's all!


.label-size {display:inline-block; float:left; padding:7px; font:12px verdana; text-transform:uppercase; margin:0 4px 4px 0;}

.label-size a {color:#fff!important; text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}
.label-size a:hover {text-decoration:none;}

.label-size:nth-child(1) {background:#ff0000;}
.label-size:nth-child(2) {background:#cf650d;}
.label-size:nth-child(3) {background:#9e0963;}
.label-size:nth-child(4) {background:#f54e67;}
.label-size:nth-child(5) {background:#42ad9d;}
.label-size:nth-child(6) {background:#b3001b;}
.label-size:nth-child(7) {background:#5c3e31;}
.label-size:nth-child(8) {background:#8e4811;}
.label-size:nth-child(9) {background:#ff9900;}
.label-size:nth-child(10) {background:#097054;}
.label-size:nth-child(11) {background:#6599ff;}
.label-size:nth-child(12) {background:#461d7c;}
.label-size:nth-child(13) {background:#666666;}
.label-size:nth-child(14) {background:#00ff00;}
.label-size:nth-child(15) {background:#7c71ad;}
.label-size:nth-child(16) {background:#1eb6ff;}
.label-size:nth-child(17) {background:#898c17;}
.label-size:nth-child(18) {background:#000078;}
.label-size:nth-child(19) {background:#ffcc00;}
.label-size:nth-child(20) {background:#cc3333;}

.label-size:hover {opacity:0.6; -webkit-transition:0.5s; -moz-transition:0.5s; transition:0.5s;}

5 comments:

Your comments are always appreciated! However advertisements will not be approved. Thanks.