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.
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.
Features:
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-settings>
<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:widget-settings>
<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, "42:42"): 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>
</a>
<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='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<span class='fa fa-clock'/> <data:post.date/>
</time>
</span>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
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;
vertical-align:middle;}
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.
