Splendid Popular Post Widget with Hover effect

Splendid Popular Post Widget with Hover effect
popular widget

Popular post widget is very important to get more page view from visitors. You would find Popular post widget in almost all blog. So webmaster should give some extra emphasize on it. Though I have shared many popular post before but now I have brought to you a different style popular post with is elegant looks super color combination and really awesome. I have also added hover effect on popular post images. This is a rotator effect. When you mouse over on a popular posts image then the image will rotate in 560 degree. In addition I have added transparent post number at the right side of the popular post widget.  I think this is unique widget will attract your blog visitors.

Readmore: Simple Animated Popular Posts with Changeable Color Effects

  • The only limitation of this widget that you have to display 9 post only. Because number 10 post won't affect by the coding. So let's proceed to the tutorial.

featured posts

Popular Post Widget Without Thumbnail

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "Popular Posts" Widget.

most viewed


Note: Check image Thumbnail and snippet. and Select maximum 9 posts.

Step 4 Now Save the  "Popular Posts" Gadget.

Step 5 Now click on Edit HTML-> Unfold code  

Step 6 Now Find this code ]]></b:skin> by pressing Ctrl+F  

Step 7 Paste the below code  Before/above ]]></b:skin>  

/*Splendid Popular Posts by http://www.bloggerspice.com*/ #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#04BDFA;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#05EEFB;width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#04BDFA;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#05EEFB;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#04BDFA;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#05EEFB;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#04BDFA;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#05EEFB;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#04BDFA;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:0px;right:-15px;border-radius:5%;background:#353535;width:20px;height:100%;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border-radius:15%;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}


You have done. To see your new colored popular post widget go to your blog home page.  If you have any difficulty to install then feel free to contact with me. There is another thing I must say that I have tested this widget also in circle thumbnail base blog. There Image thumbnail will be different, If you are using rounded image thumbnail in your blog then this popular post widget's thumbnail will display like rounded corner. If you face any other issue then kindly inform me. 
Go Up