Nov 6, 2016

5 Most Stylish/Beautiful Popular Posts Thumbnails Widget for Blogger

data:blog.title
5 Most Stylish/Beautiful Popular Posts Thumbnails Widget for Blogger - What platform you're using for blogging doesn't matter, but every blogger wants to make their BlogSpot blog more beautiful and stylish by adding cool looking widgets and gadgets. Just like those, Blogger users also want to make their blog more eye-catchy and also want to stand out from many other internet pages. You also want to make your blogger blog more stylish so that you'll grab the attention of your target audience and make them regular reader and follower too. So, today I brought most beautiful and elegant popular posts widget for blogger blog with thumbnails that will not only looking fresh but also help you in increasing page views of your blog as well. 8)

Adding Popular Posts Widget to Blogger with Thumbnails


Stylish Popular Posts Widget, Blogger Popular Posts, Beautiful Blogger Popular Posts Widget

To customize and make popular posts widget stylish, you need to add this widget from the Blogger layout section and then follow next steps which are given below;

  1. Now go to the sidebar section in layout and click on "Add A Gadget" link.
  2. Now, choose "Popular Posts" widget and click on blue "+" button to this gadget in your blogger blog.
  3. Now, Click on Template and then click on Edit HTML button to open template code editor.
  4. Using CTRL+F search for ]]></b:skin> tag and paste your choice of code just above of it. [Select code style from below list.]

5 Most Stylish/Beautiful Popular Posts Widget for Blogger

Select your choice of style from below list and copy & paste that code just above of ]]></b:skin> tag or paste it just below of it by closing that code in <style type='text/css'> Your Code Here </style> tag. :)

#1 Style - Stylish Popular Posts Widget for Blogger


Stylish Popular Posts Widget, Blogger Popular Posts, Beautiful Blogger Popular Posts Widget

This widget is most attractive and eye-catchy since it is using post-title over the featured image. Thumbnail image and post title is under the rectangular box. In this popular posts widget, Designer has used the transparent background for the title links. This popular posts widget can be a great option for increasing clicks. To use this widget use below CSS code.

/***** Popular Post Widget for Blogger *****/
.sidebar .popular-posts ul {counter-reset: popcount;padding: 0;margin: 0;}
.sidebar .popular-posts ul li {float: left;position: relative;overflow: hidden;list-style: none !important;border: 0;height: 130px;width: 100%;font-family: "Oswald",sans-serif;font-weight: bold;margin: 2px;padding: 0px !important;}
.sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;}
.sidebar .PopularPosts ul li img {display: block;float: left;width: 100%;height: 130px;padding: 0;transition:1.0s;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;}
.sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);}
.sidebar .PopularPosts .item-title {position: absolute;padding-bottom: 0;z-index: 999;right: 0;left: 0;bottom:0;}
.sidebar .PopularPosts .item-title a {display: block;background: rgba(32, 32, 32, 0.77);font-family: "Oswald",sans-serif;font-weight: bold;font-size: 16px;line-height: normal;color: #FFFFFF;text-transform: capitalize;padding: 10px 0px 5px 10px;transition: all .4s ease-in-out;}
.sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;}
.sidebar .popular-posts ul li:before {counter-increment: popcount;content: counter(popcount, decimal);position: absolute;list-style-type: none;background: rgba(255, 252, 8, 1);float: left;color: #000;line-height: 20px;font-size: 14px;padding: 0px 8px 1px 1px;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;border: solid #FFF;top: 0;z-index: 4;}

#2 Style - Stylish Popular Posts Widget for Blogger


Stylish Popular Posts Widget, Blogger Popular Posts, Beautiful Blogger Popular Posts Widget


This one is another stylish, popular posts widget for blogger blogs. It has gallery look, showing thumbnail images and post titles. This popular posts widget is designed in a way so that it will not cover extra are on your blogger blog. It also attracts visitors to click and read more content on your blog. To add this popular post style use below CSS code.

/***** Popular Post Widget for Blogger *****/
.sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;}
.sidebar .popular-posts ul li {list-style: none !important;float: left;font-family:'Oswald',Arial,Tahoma,sans-serif;position: relative;width: 48%;height: 130px;overflow: hidden;margin: 2px;padding: 0 !important;border: 0;}
.sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;}
.sidebar .PopularPosts ul li img {float: left;display: block;height: 130px;width: 100%;padding: 0;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;transition:1.0s;}
.sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);}
.sidebar .PopularPosts .item-title {position: absolute;right: 0;left: 0;bottom:0;padding-bottom: 0;z-index: 999;}
.sidebar .PopularPosts .item-title a {display: block;padding: 5px 0px 2px 5px;background: rgba(32, 32, 32, 0.77);text-transform: capitalize;font-size: 12px;color: #fff;line-height: normal;transition: all .4s ease-in-out;}
.sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;}
.sidebar .popular-posts ul li:before {counter-increment: popcount;float: left;position: absolute;content: counter(popcount, decimal);list-style-type: none;background: #e2e2e2;top: 0;font-size: 14px;color: #000;line-height: 20px;padding: 0px 8px 1px 1px;z-index: 4;border: solid #FFF;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;}

Must Read - 11 Best SEO Optimized & AdSense Ready Blogger Templates.

#3 Style - Stylish Popular Posts Widget for Blogger


Stylish Popular Posts Widget, Blogger Popular Posts, Beautiful Blogger Popular Posts Widget

This popular posts widget has interesting and colorful style with rounded featured thumbnails. It has an elegant look and also stands out from all other widgets as well. It will help you in attracting your loyal readers. By using this widget, you can increase Blog's page views instantly and in a huge amount. To use this popular posts widget, use below Blockquote CSS code.

/***** Popular Post Widget for Blogger *****/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}

#4 Style - Stylish Popular Posts Widget for Blogger


Stylish Popular Posts Widget, Blogger Popular Posts, Beautiful Blogger Popular Posts Widget

This popular posts widget is liitle bit different from all other widgets because it has rotating numbers beside the featured thumbnails. This widget is simple, neat and clean and also very easy to install. To show the magic, open template code editor and paste it just above of ]]></b:skin> tag.

/***** Popular Post Widget for Blogger *****/
#PopularPosts1 ul{width:300px;counter-reset:li;left:-7px;padding:8px 0px 1px;list-style:none;}
#PopularPosts1 li .item-title{float:right!important;}
#PopularPosts1 li{left:5px;width:95%;position:relative;margin:0 0 10px 0;padding: 3px 2px 0 17px;}
#PopularPosts1 ul li{position:relative;display:block;margin: .5em 0;*padding: .2em;background:#ddd;padding: .4em .2em .4em 1em;transition: all .3s ease-out;border-radius: .3em;text-decoration: none;}
#PopularPosts1 ul li:before{position:absolute;background:#000;color:#fff;content: counter(li);counter-increment: li;margin: -1.3em;left: 0;top: 50%;width: 2em;border: .2em solid #fff;height: 2em;border-radius: 2em;font-weight: bold;font-size: 15px;text-align: center;line-height: 2em;box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;-webkit-box-shadow: 0 8px 5px -7px #888;transition: all .3s ease-out;}
#PopularPosts1 ul li:hover:before{transform: rotate(360deg);}
#PopularPosts1 ul li:hover{background: #eee;}
#PopularPosts1 ul li a img{width:25%; float:left; }
#PopularPosts1 ul li .item-title  {width:68%; float:right; margin-top:-15px; margin-right:15px;}
#PopularPosts1 ul li a{min-height:25px;color:#444;display:block;font: 14px Georgia, serif;text-decoration:none;text-transform:uppercase;text-shadow: 0 -1px 2px #fff;}
#PopularPosts1 ul li a:hover{color: #444;}

Must to follow Guides -
- Best Custom Robots Header Tags Setting for Blogger.
- Add Best Custom Robots.txt for Blogger | Advanced SEO Setting.

#5 Style - Stylish Popular Posts Widget for Blogger


Stylish Popular Posts Widget, Blogger Popular Posts, Beautiful Blogger Popular Posts Widget

This stylish, popular posts widget is another simple, neat and clean widget. This widget has rounded featured thumbnail beside the post titles. Adding this widget inside blogger sidebar is a game of few steps. This popular posts widget is attractive, so it will also increase page views as well. To add this popular posts widget, use below CSS code.

/***** Popular Post Widget for Blogger *****/
.popular-posts ul{padding-left:0px;}
.popular-posts ul li a{color:#000; text-decoration:none; font-size:14px;}
.popular-posts ul li .item-title{float:right; width:70%;}
.popular-posts ul li {list-style-type: none;background: #FFF url(https://3.bp.blogspot.com/-Q-VefH-Eqzk/WBnscTcBXfI/AAAAAAAAD8s/vYPfjhijx5gv4ccT2BXkkmkP6pL8A1D3wCLcB/s1600/bo-pp-arrow.gif)  no-repeat scroll 5px 10px;border: 1px solid #ddd;padding:5px 5px 5px 20px !important;margin:0 0 5px 0px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
.popular-posts ul li:hover {border:1px solid #6BB5FF;}
.popular-posts ul li a:hover {text-decoration:none;}
.popular-posts .item-thumbnail img {float:left; width:80px; border-radius: 100px;-moz-border-radius: 100px;webkit-border-radius: 100px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}

#6 Style - Popular Posts Widget for Blogger [Bonus]


Stylish Popular Posts Widget, Blogger Popular Posts, Beautiful Blogger Popular Posts Widget

This popular posts widget is simple and without featured thumbnails. This widget is for those who don't want to show featured images so that, they can improve blogger blog loading speed. If you're interested in adding this widget, then use below blockquote code.

/***** Popular Post Widget for Blogger *****/
.popular-posts{background:#f6f6f6; margin:5px; margin-top:-5px;}
.popular-posts ul{border-radius:3px; box-shadow:0 3px 4px 3px #999; font-size:10pt;margin:0 auto;padding:0}
.popular-posts ul li{border:1px solid #3b95bf; background:#f6f6f6;background:linear-gradient(135deg,#3b95bf 0,#f4f8ff 20%,#d1edff 85%,#3b95bf 100%); line-height:2em;list-style-type:none;margin:0;overflow:hidden;padding:10px 20px!important; margin-bottom:1.5px;}
.popular-posts ul li:hover{background:#c9d5ea;background:linear-gradient(135deg,#f4f8ff 0,#3b95bf 50%,#3b95bf 50%,#f4f8ff 100%);}
.popular-posts ul li a{padding:10px 20px;margin:-10px -20px;display:block}
.popular-posts a{font-weight:bold; font-style:italic; color:#111; text-decoration:none; font-size:16px;}
.popular-posts a:hover{color:#555;}
#PopularPosts1 h2{display:none;}

Do you know you can make these widgets sticky when someone scrolls down your page? Yes, You can make it easily, and it will also help you in generating more page views. So if you want to make the popular posts widget sticky in the sidebar, then read this guide - How to Make Blogger Sidebar Widget Sticky on Scroll?

You Might Also Like - Stylish Blogger Contact form for Static Page.

Conclusion:

So above I've shared 5 Most Stylish/Beautiful Popular Posts Widget for Blogger with Thumbnails, and I hope you will like these all gadgets. If you face any problem in customizing popular posts, then you can ask me via using below comment box. I'll be happy to help you.

Did you like these Popular Posts Widgets? Do share with your other blogger friends. Don't forget to Subscribe us to get latest updates direct into your mailbox for free.

Thank You!
Stay Blessed & Stay Happy!
Search Tags: popular post widget for blogger, popular post widget blogger thumbnails, stylish popular post widget for blogger, blogger popular posts HTML code, most popular posts widget for blogger.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.