Home » » Popular Posts Widget With Circle Image Style

Popular Posts Widget With Circle Image Style

Posted by Ran Dreamer on 22 Apr 2015

previously had no popular posts widget with different effects like Popular Posts Widget With Multi Colored Style, this time a modification is in style, and also the incorporation of effects. As this tutorial, we will create a widget popular posts with image circle style and adding hover effects and spinning on the thumbnails border and background hover effects on links. As an example of a screen shoot beside. Read : Modifications Display Statistics Blogger Widget Version 2
Popular Posts Widget

Popular posts widget is the default widget blogger, modifications that we make only add CSS3 thus guaranteed fixed fast loading.

Well if you are interested in adding a widget popular posts with circle style image on your blog, please follow the steps to produce the following:

1. After logging into your account on the "Layout" >> "add gadget" >> add popular posts of bloggers and configure the widget with thumbnail check the little box and leave blank the small box snippet. Save.
2. Then enter in the Template >> Edit HTML >> Search code ]]> </ b: skin>
3. Copy and paste the following CSS code above code ]]> </ b: skin>
.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
4. Save the template and see the results of your blog!
Thus tutorial add popular posts widget with image circle style. Hope it is useful.

Share This Post :
 
Copyright © 2015 LABSTON | Adsense, Blogger, Android, Backlink, SEO, Template. All Rights Reserved
Template Johny Wuss Responsive by Creating Website and CB Design