Add Stylish Labels Widget To Blogger With Hover Effect

Today i will teach you how to add a stylish label widget with hover effect in Blogger. This label widget is made using CSS and has a superb hover effect. When you click on the label it will show it’s shadow and makes your label attractive and different. So without wasting time lets learn how to add this in your blog.

How To Add Stylish Labels Widget To Blogger With Hover Effect

1. Login to Blogger.

2. Go to Blogger Dashboard > Template > Edit HTML.

3. Tick  the given expand widget check box.

4. Now find the below code in your Template

]]></b:skin>

5. Now Paste the below code above the given code.

.list-label-widget-content ul

{

    list-style-type:none;

    padding-left:0px !important;

    display:inline-block !important;

}

.list-label-widget-content li {

    display:inline-block;

 }

/*Code by infozguide.com*/

.list-label-widget-content li a  {

color: #777;

font: 9px verdana;

text-transform: uppercase;

transition: border-color .218s;

background:

#f4f4f4;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(

#F5F5F5), to(

#F1F1F1));

display: inline-block;

text-shadow: 0 1px 0

#fff;

-webkit-transition: border-color .218s;

-moz-transition: border .218s;

-o-transition: border-color .218s;

transition: border-color .218s;

background:

#f3f3f3;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(

#F5F5F5), to(

#F1F1F1));

background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(

#F5F5F5), to(

#F1F1F1));

border: solid 1px

#ccc;

border-radius: 2px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

margin: 0 4px 4px 0;

padding: 3px 5px;

text-decoration: none;

}/*Code by infozguide.com*/

.list-label-widget-content li a:hover {

color: #333;

border-color: #999;

-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);

box-shadow: 0 1px 2px

rgba(0,0,0,0.15);

}

6. Now save your template. You are done!!

NOTE: After doing all that you should add labels widget to your blogger and untick show number of posts. If you don’t know how to add label widget to your blog then go to this link “Blogger Label” and read 1st and 2nd point over there.