'Recent Posts' or 'Popular Posts' widget is very essential widget for both personal and professional blogs. This widget gives information about your popular blog posts to your readers. So you should look after this widget very carefully. Also if you provide some style with this widget, your reader will be simply overwhelmed. By default blogger provides some styles for this widget but somehow those are obsolete and unprofessional. You are actually recommended to go through those styles for the first time. If you found those are not suitable for your blog, you can come back to this tutorial. I've written few posts about customization of this widget. You can also check those out in my blog in case you're interested. This tutorial will show you how to display popular posts in horizontally rather than vertically. Only problem is it requires larger horizontal space i.e. larger width of of your blog. So before you proceed, make sure you have enough room in your blog.
Features
- Full control over 'Image thumbnail' view.
- Full control over 'Snippet' view.
- A preassigned image will be shown if you've checked 'Show image thumbnail' but unfortunately your post does not contain any.
Screenshot
Let's proceed. If your blog already has this widget, jump to step #7 after step #1.
- Go to 'Blogger' dashboard.
- Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Layout' form the drop-down menu list.
- Click 'Add a Gadget' link as shown in the fig below. A new window will appear that contains list of all available gadgets.
- Scroll down and click on 'Popular Posts' gadget or the '+' icon close to 'Popular Posts' gadget.
Add Popular posts widget - Configure 'Popular Posts' widget as follows.
- Select the 'Most viewed' option to 'All time' .
- Select number of the post(s) in 'Display up to' section.
- Check 'image thumbnail' if you want to show it, otherwise leave it as unchecked.
- Check 'snippet' if you want to show some texts along with its title.
Configure Popular posts widget - Click 'Save'.
- Click 'Template' from left navigation menu and then click 'Edit HTML'.
- Search for (Ctrl+f)
</b:skin>
and paste the following before</b:skin>
. - Click on 'Jump to widget' and select 'PopularPosts1' from the drop down menu. Alternately you can search for (Ctrl+f)
Show snippets and thumbnails
. You'll find a code similar to the following. - Replace that with the following snippet of code.
- Click 'Save template'.
/* ---------- Popular Post by Bloganalyzer ----------- */
.PopularPosts li {
display: inline;
list-style: none;
width: 200px;
height: 150px;
float: left;
text-align: justify;
background: #e4e4e4;
border: 1px solid #333;
color: #111;
margin: 5px;
padding: 5px;
line-height: 1.2em;
}
.PopularPosts .item-title {
text-align: left;
width: 200px;
font-size: 20px;
background: #afafaf;
padding: 5px;
border-bottom: 1px solid #868686;
border-right: 1px solid #868686;
margin-bottom: 5px;
}
.item-thumbnail img {
height: 80px;
width: 80px;
}
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxwYt82nXKEq-b3wsW0JJnem6bzjJ-zMMjQQDBviK2MnNbzSoy0KJhDL0OFbB-2Xya7Hgn3n4adlhTxvDGHKPRA4v8D4DwHikFBnbuqRMEzDXDhpakLw-6e_z2PBEkGNR2KDfZH3s4g/s400/noimage.png'/>
</div>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
Thank you for this tutorial. It worked great after I tweaked it to my specifications. I really appreciate your help!
ReplyDeleteTHANK YOU FOR THIS GREAT TUTORIAL... I SPENT YEARS LOOKING FOR SOMETHING LIKE THIS.
ReplyDeleteYou share nice tutorial related blog, which give me some good ideas in creating my own blog, For More Popular Posts widgets you can
ReplyDeleteVisit my blog here