Add Customized Spinning Hover Effect Lable Widget

Labels helps bloggers to categorize their blog posts. So label is a popular and useful widget to bloggers. Ordinary label widget has two styles. They are List and Cloud. Today we are going to customize our ordinary label widget.

DEMO

Steps:

•  Go to Blogger Dashboard >> Layout.
• Click 'Add a Gadget'
• Select Labels.
• Do changes as bellow.

• Click Save.
• Now Go to 'Template'.
• Backup Your Template.
• Click 'Edit HTML'
• Press Ctrl + F and search the code shown below.

 

]]></b:skin> 

• Past the bellow code just above ]]></b:skin>

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; }
.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;}
.list-label-widget-content li a:hover {color: #333;border-color: #999;border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform:rotate(-350deg); 
-o-transform: rotate(-350deg); 
-webkit-transform: rotate(-350deg); 
-ms-transform: rotate(-350deg); 
transform: rotate(-350deg);}

• Click Save Template.

That's it. See the effects. Hope you enjoy this post. If any questions, feel free to ask.