WidgetMeFor. - On this occasion, I would
still explores the different modifications of popular posts widget blogger, had
previously been there at least 4 widget popular posts with different effects,
this time a modification is in style, and also the incorporation of effects.
Such 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. Like the example screen shoot besides
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 of manufacture as follows:
1. Once logged into your account on the layout >> Add >> Add gadgets popular blogger posts innate and configure the widget with thumbnail mencenteng small boxes and leave it empty on the small box snippet. Save. If you do not already know how to add widgets congenital popular blogger posts, please see the tutorial here
2. Then go to the section
edit HTML templates >> Find the
code ]]>
</ b: skin>
3. Copy and paste the
following CSS code above the code ]]> </ b: skin>
CSS - WidgetMeFor
.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 on your blog!
Credits: Pointing upStyle
widget popular posts and the effect that there is a modified me, if you are
interested in this widget and want to publish it again, it is wise if you
provide a link back or keblog kepostingan this. Thank ats your cooperation! Thumbs
up
Please be creative, and good
luck!
If you liked the article on
this blog, please click here to subscribe for free via email, so you will get
an article submission every article published in WidgetMeFor. And please click
share to your friends, so you will help me to stay motivated ....
Thank you..
Merkur 510C - MicroTouch Hair Trimmer (Wicked
ReplyDeleteThe Merkur 510C is a stylish and stylish design titanium white dominus that was titanium trimmer designed to make a compact, lightweight and easy-to-use shaving machine suitable for both Rating: 5 · 2 reviews titanium stud earrings · titanium earrings hoops $45.00 · In stock titanium dab nail