Adding a Spinning Hover Effect to Blogger Popular Posts Widget

Add a spinning hover effect to your Blogger Popular Posts widget. Talat Rizwan shows you how you can easily do this on your Blogger blog.
Follow these steps:

• Go to Blogger Dashboard > Template.

• Hit Expand Widget Templates check box.

• Search for ]]></b:skin> and paste the following code  just above it:

#PopularPosts1 {    max-width: 300px}

#PopularPosts1 dd {    float: left;    border-bottom: none;    margin: 8px 8px 0 8px;    

background: none;    display: block;    padding: 0}

#PopularPosts1 img {    -webkit-transition: all 0.5s ease;    -moz-transition: all 0.5s 

ease;    transition: all 0.5s ease;    padding: 4px;    background: #eee;    background: -

webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-

stop(0.5, #c0c0c0), to(#aaa));    background: -moz-linear-gradient(top, #eee, #ddd 50%, 

#c0c0c0 50%, #aaa);    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-

radius: 4px;    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);    -moz-box-shadow: 0 0 3px 

rgba(0,0,0,.7);    box-shadow: 0 0 3px rgba(0,0,0,.7);}

#PopularPosts1 img:hover {    -moz-transform: scale(1.2) rotate(-350deg);    -webkit-

transform: scale(1.2) rotate(-350deg);    -o-transform: scale(1.2) rotate(-350deg);    -ms-

transform: scale(1.2) rotate(-350deg);    transform: scale(1.2) rotate(-350deg);    -webkit

-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    -moz-box-

shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    box-shadow: 0 0 

20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

• Save.

That’s it. Hope Rizwan’s tutorial helps you.
Note: Before editing your template, backup your files first.