Skip to main content

Custom Blogger Popular Widget

If you want to stylize/customize the popular posts widget, and you want to make it more attractive for your visitors. In this article, I'll show you how to customize the Popular Posts Widget in Blogger and place it anywhere on your template. Remember, we'll be using a different code for this widget.

If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out from the many other pages on the internet. You'll also grab the attention of your target market, encourage them to browse through your blog and become your loyal readers and followers.

Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog is easy.

Custom Blogger Popular Widget
Photo credit:

The default Popular Posts is a widget provided by blogger, which allows you to display Popular Posts on your sidebar or footer. This widget shows the most visited posts of a blog, you have four different combinations for displaying this widget i.e.

  • Post title with image, date and thumbnail.
  • Post list with different background colors.
  • Optionally, you can display post summary and comment numbers.

Add The Popular Post Widget For Blogger

Copypaste the code given below inside your template where you want the "Popular Widget" to appear. Go to our Blogger DASHBOARD>THEME>CUSTOMIZE>EDIT HTML.


You can customize almost everthing in this widget.

Custom Thumbnail: You can resize your thumbnail.

Custom snippet: You can change the character limit of snippet post.

<b:widget id='PopularPosts1' locked='false' title='Popular posts' type='PopularPosts' version='2' visible='true'>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
<b:includable id='main' var='this'>
<b:include name='widget-title'/>
<div class='widget-content popular-posts'>
<ul class='list-group'>
<b:loop values='data:posts' var='post'>
<li class='list-group-item'>
<div class='item-thumbnail'>
<a expr:href='data:post.url' expre:title='data:post.title'>
<b:with value='data:post.featuredImage.isResizable?resizeImage(data:post.featuredImage, 42, &quot;42:42&quot;): data:post.thumbnail' var='image'><img class='circle' expr:alt='data:post.title' expr:src='data:image' height='42' layout='responsive' width='424'/></b:with>
<span class='pop-title'><a expr:href='data:post.url' expre:title='data:post.title'><data:post.title/></a></span></div>
<div class='clearfix'/>
<span class='pop-meta'>
<time expr:datetime='' expr:title=''>
<span class='fa fa-clock'/> <>

Note: The code above is a raw code, you'll need to add some CSS stlyle.

.popular-posts {width:100%;margin:0 auto;}
.popular-posts ul {padding:0;border:0;position:relative;}
.popular-posts ul li {list-style-type:none;margin:0;padding:10px 10px 10px 72px !important;position:relative;}
.popular-posts ul li:nth-child(1) {background-color: #00bcd4;}
.popular-posts ul li:nth-child(2) {background-color: #009688;}
.popular-posts ul li:nth-child(3) {background-color: #4caf50;}
.popular-posts ul li:nth-child(4) {background-color: #8bc34a;}
.popular-posts ul li:nth-child(5) {background-color:#cddc39;}
.popular-posts ul li:nth-child(6) {background-color:#ffeb3b;}
.popular-posts ul li:nth-child(7) {background-color: #ffc107;}
.popular-posts ul li:nth-child(8) {background-color:#ff9800;}
.popular-posts ul li:nth-child(9) {background-color:#ff5722;}
.popular-posts ul li:nth-child(10) {background-color:#795548;}
.popular-posts ul li:hover {background-color:#757575;}
.popular-posts ul li a {color:#fff !important;text-decoration:none;}
.popular-posts ul li a:hover {color:#fff !important;}
.popular-posts ul li img {width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;

That's it. If you face any issue implementing this popular post widget in your Blogger blog, let me know in the comment box below. Lastly, if you find this post helpful to you, kindly consider sharing it on your social pages.

Turn Your Website
into a Lead-Generating Machine

Webcopy, Designs and SEO are King, Queen, and Knight respectively. And how well you use them together creates a user experience that either drives people away or makes them click the "buy" button.


Want to make your offers irresistible? We write conversion-optimized copy for small and medium brands, digital agencies and online stores.

Custom Web Design

Creating a branded website can be the best thing you do for your business. Branding can help you figure out what and how to communicate your company's story.

Skyrocket Your Traffic

For more than 20 years, we've been providing SEO solutions for businesses wanting to expand their online presence, increase leads and grow their revenue.


Contact Us

About us

Archie Webmaker is a digital branding agency with a magical touch on brand identity, brand strategy, and marketing to drive business success.

Call Us

Email Us

Working Hours

Mon - Fri: 9AM to 5PM
Saturday: 9AM to 1PM