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 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.
