Having a popular post widget on your blog helps readers view the most interesting and most read articles on your blog.




There are many widgets online that can be used to show popular post on a blog, but in this, I will be sharing with you a popular post widget with a rotating effect. This widget helps in decreasing bounce rate of your
blog.


This widget is kind of different from other popular widget, because it doesn’t only shows the popular post, but as well rotate when hovered on any of the thumbnails.




Follow the few steps below to add add a square popular post widget with rotating effect in Blogger.


How to Get Started
=> Firstly, log in to your blogger dashboard

=> Go to layout and click on Add a Gadget

=> A pop up menu comes up, select Popular Post and don't forget to check Show thumbnail option
Save

=> Go to your blog template and click on Edit HTML

=> Press Ctrl + F and search for ]]>in search box

=> Immediately below it, copy and paste the code below
.PopularPosts .item-title { display:none; } .PopularPosts .widget-content ul li { background: none repeat scroll 0 0 transparent; float: right; list-style: none outside none; margin: 10px 0 0 !important; padding: 0 !important; } .PopularPosts .item-thumbnail { margin: 0 8px !important; } #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 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);} .item-thumbnail img { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; border: 3px solid #ccc; height: 60px; padding: 3px; width: 60px; }


=> Save the Template

That’s all.