How to add Spinning Hover Effect to Blogger Popular Posts Widget

How to add Spinning Hover Effect to Blogger Popular Posts Widget

How you can easily do this on your Blogger blog.

Adding this Effect will enhance your blog beauty.

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.

Note: Before editing your template, backup your files first.