I will learn you how to add Recent Posts Widget on your Blog

I will learn you how to add Recent Posts Widget on your Blog

As I mentioned, displaying a recent post widget on your blog's sidebar is the best way to inform your visitors that your blog has been updated with fresh and new content. So it may help you keep visitors engaged on your blog a bit longer guys. People love different recent posts widgets to display and there have thousands of widgets available all over the web.

But to be frank, I don't feel them as professional even if its works well. More over, it’s more customizable and you don't need to add any CSS or jQuery codes into your Blogger template means your widget load faster. So I believe this is the simplest method to engage your visitors on your blog thus to increase your blog's ranking on Google search results. It seems like below image screenshot and you see this widget in action from our blog itself (as shown at the right sidebar).

As you all guys probably know this is the era of material design, clean and simple. It's almost same as CNET's recent posts widget. But remember guys this widget includes no thumbnails but beautifully displays recent post titles, published date and a hover effect read more link. And it includes an awesome customizable circled post count on left with narrow vertical line. Both colors and texts' fonts are customizable according to your wish. - See more at: 

Consider the Following Before We Begin

Please note: This recent posts widget adjusts the dimension automatically according to the place where it belongs to. But it’s better to have at least 300px if you're focusing on sidebar. To prove it, if you own a demo blog, try to add this recent posts widget in your blog’s sidebar as well as footer to see its automatic dimension. And you can easily customize your Blogger sidebar width if it’s below 300px via Customise.

Access path: Blogger Dashboard » Template » Customise » Adjust widths » Right sidebar

Adding Recent Posts Widget via One Click Installer
If you're a novice blogspot user, you can straightforwardly add this recent posts widget in one step method without making any headache. One Click Installer makes it easy for you. Slightly click on the Add to Blogger button granted below and it automatically adds your recent posts widget to your blog. Also don’t forget to customize (provided down below) the code snippets before you save your gadget.

So, you'll be able choose the second method if you wanna add this email subscription box to your blog manually. It’s for guys, who’re experienced adding widgets to their blog earlier. Kindly follow simple steps provided below. Hope you consider things I mentioned above!

Adding Recent Posts Widget Manually

Step 1: Go to Blogger Dashboard — Layout
Step 2: Click on Add a Gadget link from Layout
Step 3: Choose + HTML/JavaScript (See below)

step 4: Copy & paste the below code in it

<div class="recentpoststyle">
<script src="http://goo.gl/JI3Hml"></script>
var posts_no = 3;var posts_date = true;var post_summary = true;var summary_chars = 90;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
<style type="text/css">
.recentpoststyle {
    counter-reset: countposts;
    list-style-type: none;
.recentpoststyle a {
    text-decoration: none;
    color: #0080ff;
.recentpoststyle a:hover {
    color: #db4437;
.recentpoststyle li:before {
    content: counter(countposts,decimal);
    counter-increment: countposts;
    float: left;
    z-index: 2;
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    background: #666;
    margin: 10px 5px 0px -4px;
    padding: 0px 10px;
    border-radius: 100%;
li.recent-post-title {
    padding: 7px 0px;
.recent-post-title {
    font-family: "book antiqua";
.recent-post-title a {
    color: #666;
    font-size: 14px;
    text-decoration: none;
    padding: 2px;
    font-weight: bold;
.post-date {
    padding: 5px 2px 5px 30px;
    font-size: 11px;
    color: #6d6e72;
    margin-bottom: 5px;
.recent-post-summ {
    border-left: 1px solid #69B7E2;
    color: #777;
    padding: 0px 5px 0px 20px;
    margin-left: 11px;
    font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;
    font-size: 15px;

Step 5: Customize your widget as you wish
Step 6: Click Save button and you're done!

Basic Customizations & Guidelines

As you see, I have beautified this code for your easy understanding. Replace var posts_no = 3 with the number of post you wanna display on this widget. If you prefer another link hover color, replace #db4437 with your custom color code. I suggest you no need to change the padding and font size because it's accurate for your any Blogger template. 

I will learn you how to add Recent Posts Widget on your Blog I will learn you how to add Recent Posts Widget on your Blog Reviewed by Mohammed Elarby on September 05, 2015 Rating: 5
Powered by Blogger.