8 Feb 2015

Double-colored Labels For Blogger

On In , 3 Comments
We have already seen various types of Label Widgets for Blogger: Animated Labels, Multi-colored Labels and Curled Labels. Here is an attempt to create two-colored Labels; with even and odd CSS commands. It is very easy to add this widget to your blog; just add simple CSS.

Double-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. Configure the widget according to the below screenshot. 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. Done!

Style 1 (Without Background):

✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

.label-size {display:inline-block; float:left; padding:5px; font:13px verdana; margin:0 3px 3px 0; border:1px solid transparent;}

.label-size a:hover {text-decoration:none;}

.label-size:nth-child(even):hover {border:1px solid #ff0000;}

.label-size:nth-child(odd):hover {border:1px solid #ff9900;}

.label-size:nth-child(even) a {color:#ff0000!important;}

.label-size:nth-child(odd) a {color:#ff9900!important;}

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

✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

Style 1 (With Background):

✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

.label-size {display:inline-block; float:left; padding:5px; font:13px verdana; margin:0 3px 3px 0;}

.label-size a:hover {text-decoration:none;}

.label-size:nth-child(even) {background-color: #ff431a; 
background-image: -moz-linear-gradient(top, #ff6138, #e12500); 
background-image: -ms-linear-gradient(top, #ff6138, #e12500); 
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff6138), to(#e12500)); 
background-image: -webkit-linear-gradient(top, #ff6138, #e12500); 
background-image: -o-linear-gradient(top, #ff6138, #e12500); 
background-image: linear-gradient(top, #ff6138, #e12500);}

.label-size:nth-child(odd) {background-color: #769946; 
background-image: -moz-linear-gradient(top, #94b764, #587b28); 
background-image: -ms-linear-gradient(top, #94b764, #587b28); 
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#94b764), to(#587b28)); 
background-image: -webkit-linear-gradient(top, #94b764, #587b28); 
background-image: -o-linear-gradient(top, #94b764, #587b28); 
background-image: linear-gradient(top, #94b764, #587b28);}

.label-size:nth-child(even) a {color:#fff!important; text-shadow: 0px -1px 0px #3a5d0a;}

.label-size:nth-child(odd) a {color:#fff!important; text-shadow: 0px -1px 0px #3a5d0a;}

.label-size:nth-child(even):hover {background-color: #e12500; background-image:none;}

.label-size:nth-child(odd):hover {background-color: #587b28; background-image:none;}

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

✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

3 comments: