Hope you all saw a popular post widget on sidebar of many blog and may you like it also.But today we're going to share this widget with a little more attractive version.Keen to know that?here we go.
How to Make It Happen?
- Log onto blogger.com > dashboard > layout > add widget scrool down and add popular post widget
- Then goto html> proceed &
- Find ( ctrl + f ) ]]></b:skin> and paste below css code just above ]]></b:skin>
.sidebar .PopularPosts .widget-content ul li{height: 100%;line-height: 22px;float: left;clear: left;list-style-type: none;overflow: hidden;color: gray;}.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;}.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}.sidebar .PopularPosts .widget-content ul li:first-child:after,.sidebar .PopularPosts .widget-content ul li:first-child + li:after,.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;}.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}
- Now save template and you're done.
Hope you like it,thanks for visiting
:)
:(
;)
:D
;;-)
:-/
:x
:P
:-*
=((
:-O
X(
:7
B-)
:-S
#:-S
7:)
:((
:))
:|
/:)
=))
O:-)
:-B
=;
:-c
:)]
~X(
:-h
:-t
8-7
I-)
8-|
:-a
:-$
[-(
:O)
8-
2:-P
(:|
=P~
#-o
=D7
:-SS
@-)
:^o
:-w
7:P
2):)
X_X
:!!
\m/
:-q
:-bd
^#(^
:ar!
.jpg)
I'm using a similar widget in wordpress.
ReplyDeleteI saw that and that's also very nice one :)
DeleteGreat tips but not yet ready to take the plunge:)
ReplyDeleteI also have a top post and pages widget on my Wordpress blog but it's nowhere as pretty as the one above! Hope you can give some wordpress - related tips as well :3
ReplyDeleteI use the default from Blogger. :)
ReplyDeletethank you very useful information.araba oyunları
ReplyDelete
ReplyDeleteawesome popular post widget leaves an impressive impression on the readers describing what are the most visited pages and posts on your website so it must be designed charismatic and your widget has that potential.popular post widget for blogger
Thank you for sharing this article with us
ReplyDeletefell free to visit www,nafisflahi.blogspot.com
popular post widget is the best way to gain some traffic for some late and popular posts of the blogs.such widget also helps to reduce the bounce rate of the blog because user stays on the blog for long time and hence it helps to increase traffic and visibility of the blog.thanks for sharing with us.ringtones
ReplyDeletethank you so much.araba oyunları
ReplyDelete