Customize Popular Posts Widget For Blogger With Thumbnails

Learn how to Customize Popular Posts Widget For Blogger With Thumbnails to make your blog popular post attractive or stylish popular post widget for blogger or blogger popular posts html code or beautiful popular post widget for blogger or horizontal popular posts widget for blogger or featured post slider widget for blogger or blog archive widget for blogger or featured posts widget blogger or how to show popular posts in blogger or blogger popular posts html code or beautiful popular post widget for blogger or horizontal popular posts widget for blogger or how to show popular posts in blogger or featured post slider widget for blogger or css widget blogger or sidebar widget for blogger or blogger popular posts widget thumbnails

There are lots of things you should do to engage your visitors so that bounce rate would reduce and page views increases to your blogger blog.

Blogger provides us to add a Gadget to display a list of the most Popular Posts from your Blogger blog.

However, this default widget does not look professional and eye-catching to attract your blog readers. With the help of CSS codes, we can change the default style of popular posts widget.

I will provide you step by step procedure and method for how to add a popular post widget in blogger templates and how to customize default popular post widget in blogger blog.

How To Add Popular Post Widget In Blogger Blog

Step 1: Login to Blogger Dashboard.

Step 2: Go To Layout

Step 3: Click on Add a Gadget.

Step 4: Choose Popular Post gadget from the list and Click on Save button.

Step 5: Save Layout arrangement.

Now you are done.

How to Customize Default Popular Post Widget with CSS 

Step 1: Go to Theme → Edit HTML

Step 2: Click anywhere inside code area

Step 3: Press CTRL+F, A search box will be appear

Step 4: Search </b:skin>

Step 5: Copy below CSS code and Paste just above </b:skin>

Popular Posts CSS Style 1: 

.PopularPosts h2{background:#2a3542 !important}
.PopularPosts h2:before{content:" \f087" ; font-family:FontAwesome; font-size:22px; background:rgba(0,0,0,0.2); padding:10px 12px; margin:0 10px 0 0; border-radius:4px 0 0}
.PopularPosts ul{list-style-type:none; padding:5px}
.PopularPosts{color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0;}
.PopularPosts{line-height:1.6; font-size:100%; border-radius:0; color:#fff}
.PopularPosts a{color:#fff}
.PopularPosts a:hover{color:#fff} .PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount} .PopularPosts ul li:before{list-style-type:none; margin-right:15px; margin-left:5px; padding:0.3em 0.6em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff; border-radius:100%}
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%; border-bottom:none}
.PopularPosts li:hover{background:#0FB9BB}
.PopularPosts li a{text-decoration:none}
.PopularPosts ul li{padding:3px 20px; border:none}
.PopularPosts ul li:nth-child(1){background-color:#F48067; margin-right:0}
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1; margin-right:0}
.PopularPosts ul li:nth-child(3){background-color:#718397; margin-right:0}
.PopularPosts ul li:nth-child(4){background-color:#11b7b5; margin-right:0}
.PopularPosts ul li:nth-child(5){background-color:#d9ba71; margin-right:0}
.PopularPosts ul li:nth-child(6){background-color:#F48067; margin-right:0}
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1; margin-right:0}
.PopularPosts ul li:nth-child(8){background-color:#718397; margin-right:0}
.PopularPosts ul li:nth-child(9){background-color:#11b7b5; margin-right:0}
.PopularPosts ul li:nth-child(10){background-color:#d9ba71; margin-right:0}

Popular Posts CSS Style 2:

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi25Yr327aL6Ld7YTB3nRlJt_5vSurjM6qc-DAqKonEiGx_8thTrwe93mWBP2rT0pqgxVPoiblbxohdvMuYQnvf0mjgopPCvThlpyCygpU3rEimaB9IdD1WMiSzvVni0MA5ahjkuls6V-8/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
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 {
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);
}

Step 6: Save your Template.

Now you are done everything,.

I hope you find this post is useful to you so don't forget to share this post with your social network.

Ghanendra Yadav

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me

Share this post