Trying to add various widget on your sidebar is a useful way to attract your visitor.This widgets must be eye-catching so that visitor would love to see what they are actually and what are in those widgets.Using those widget mainly aimed to increase your amout of traffic as well as their spending time on your blog.So blogger itself introduced popular post widget for their user to help themHope you all saw a popular post widget on sidebar of many blog and may you like it also.But that popular post looks so old and dumb.It doesn't make your blog looks cool as well attract your visitors eye to land on it go for reading those post.If you're little passionate about blogging or web design then you must realize it's time to give it little customization,some fresh and awesome look so that it'll catch your visitors eye.so. today we're going to share this widget with a little more attractive version.Keen to know that?here we go.
Add and Customize Blogger Popular Post Widget
- Log onto blogger dashboard > layout > add widget> scroll down and add popular post widget
- Save it as per the above screenshot and then goto template tab>edit 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.
That's it.You just created a widget for your blog.Now move onto your blog and see how it's looking.Happy Blogging!!!!
|
|
Articles You May Like |
About The Author
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. :)
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ı
ReplyDeleteWell thankyou for providing this widget, well here is some new popular post widget for blogger check them out thanks,
ReplyDelete