Apr 25, 2015

Awesome Design to Customize Label Widgets For Blogger

Labels is one the important widgets for any blogs that is used to show categories of your blog. In this tutorial we have come with stylish label widgets for blogger customized with css gradient colors. As you know that Labels plays an important role in internal linking of your blog contents. Now a days bloggers want to make their blogs attractive to visitors by adding stylist gadgets on their blogs. So we decided to make your blog attractive by using this beautiful label widgets. Here we have mention three attractive styles for your blog.


How to add Label Widgets in Blogger Blog?

There are two methods by which you can add your favorite style inside your template.

Method 1.
Goto Blogger Dashboard Template >>Customize >> Advance >> Add CSS and put your stylish label widgets inside css box.

Method 2.
Goto Blogger Dashboard >> Template >> Edit HTML and search for ]]><[/b:skin] using ctrl -f and paste your stylish css effect code above this.


 STYLE 1




 <style type="text/css">
/*<![CDATA[*/
.Label li {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
color: #666666;
margin: 0 1px 1px 0;
padding: 0;
text-decoration: none;
}
.label-size a {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 0 none;
border-image: none;
border-left: 0 none;
border-top: 0 none;
color: #666666;
float: left;
font-size: 12px;
margin: 0 5px 5px 0;
padding: 10px;
text-decoration: none;
}
.label-size a:hover {
background-color: #fd4326;
color: #fff;
text-decoration: none;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border-right: 6px solid #333333;
}
/*]]>*/
</style>
<a href="http://mybloggerstuff.com/" target="_blank" title="Blogger Tips and Tricks" rel="dofollow">Blogger | SEO </a>


STYLE 2





 
 
 
 
 
.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:14px;
 margin-bottom: 10px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:&quot;&quot;;
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0; 
 }
.label-size a:after{
 content:&quot;&quot;;
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 } 

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
</style>
<a href="http://mybloggerstuff.com/"  target="_blank" title="Blogger Tips and  Tricks" rel="dofollow">Blogger | SEO  </a>


STYLE 3





 
 
 
<style type="text/css">
/*<![CDATA[*/
   .Label a{  background: rgb(0,100,180);      
background: -moz-linear-gradient(top,  rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);       
background:
 -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));  
     
background: -webkit-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);       
background: -o-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);       
background: -ms-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);       
background: linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);       
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );       
display:inline-block;border:
 1px solid #005ca6;padding:0 8px; color:#fff!important; height:26px; 
line-height:28px; text-transform:capitalize; 
text-decoration:none;float:left;margin-top:5px; 
font-size:14px;-webkit-transition:all .4s 
ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s 
ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s 
ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);       
}
.Label a:hover{color:#000 !important; background:#123d60;}
/*]]>*/
</style>
<a href="http://mybloggerstuff.com/"  target="_blank" title="Blogger Tips and Tricks" rel="dofollow">Blogger | SEO  </a>

No comments:

Post a Comment