How To Customize Labels With Stylish Effects in Blogger

Sharing this latest widgets for blogger. How to customize your blog's labels with stylish cool  effects. This is most popular and usefull widget for blogger. After adding it widget your blog will show in cool and stylish. The blog vistiotrs will be see stylish blog and he again  visit your blog. when you will add this widget in blogger after some time your traffic will be increase. You need to make your blog more stylish and cool. This is one and most colorfull stylish widget for blogger.You can easily add it to your blog. Carefully see some steps after then you will be add it to your blog. it has animated hovering effect and it will not get more space from your sidebar. As we  know and have seen labels in our blogger blog sidebar labels which are not fully customized looks is not good and unprofessional, This Widget is the Most Stylish and Part of blog. You can easily see it. Click below Live Demo Button.

Live Demo

Add it To Your Blog

1. Go to blogger dashboard.

2. Go to to Layout.

3. Add gadget and click labels.

Set All Option as Shown in The Upper Image.

Step By Step :

1. Go to Template Editor >> Navigate Template & Edit HTML 

2. Now, Find the following code in your HTML >>  

3.Search : ]]></b:skin>

4. Just Past The Below Following Code Before: ]]></b:skin>

.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:28px; 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;}

Now Click on Save Template Button. and Preview your blog.

Finally Word BBR !

We Hope You Enjoyed this tutorial and would have helped for you, For any problem Kindly leave your comment below and we recommend to share the post with others to save their blog from unwanted or harmful updates from google panda updates.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →