Learn how to add spinning hover effect on recent posts photo

oday I am here to share you something new, funny and beautiful widget for your blog. A beautiful blog is a dream of a blogger. Every owner wants to make something different from another. And that things help him or her become successful in blogging. In this post we will learn to make a perfect blog using a widget. Today we will learn to add spinning effect to recent post’s photo.

Today I am here to share you something new, funny and beautiful widget for your blog. A beautiful blog is a dream of a blogger. Every owner wants to make something different from another. And that things help him or her become successful in blogging. In this post we will learn to make a perfect blog using a widget. Today we will learn to add spinning effect to recent post’s photo.


At first login your blogger account with correct email id and password. Go to temple tab and make a backup for using temple and design before editing html. After creating backup click on the Edit Html button and use the check box Expand Widget Temples. Now find this code : ]]></b:skin>


If you get this code “ ]]></b:skin> ” then 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);}


Now click on save temple. And enjoy this beautiful widget on your blog.