Add Spinning Hover Effect For Popular Post Widget in Blogger

Click Below Ad for Leaning Blogging Tricks.

Next Blogger Tricks

Prajjwal Rajput

This is best blogger trick for adding effect in your popular post widget for blogger this script work on CSS and JavaScript.and today i am add this script in my blog check the left hand side in my blog popular post you can hover the mouse in my popular post widget the popular post widget's thumbnails or images are roll and spinning this trick best for blogger. This Plugin  created by Prajjwal Rajput So, All credits goes to them.
Also Read:-How to Disabled Right Click & Text Selection in Blogger
Once you seen this script demo then you are add this spinning effect in your popular post widget it very easy to install you will add one CSS code then save that's all See the live demo below:-

Live Demo:-

How To add Spinning Hover Effect For Popular Post Widget in Blogger:-

• Go To Blogger Dashboard>>Template >>Edith HTML
• make Backup your Template
• After the Make Backup Now find this Code ]]></b:skin> using (Ctrl+F)
• Paste the below given code above/before ]]></b:skin>

#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 Template
• Finish Enjoy!

Final Words

I hope your popular post widget are successfully spinned hover effect from this tutorials if not?

Write your problem for your solution and share this post with your friends in social networking sites. Don't forget like our Facebook Page thanks.