Beautiful Material Design Recent Posts Widget for Blogger

Best Movies Sites: TOP 10 MOVIE WEBSITES

Recent Posts Widget for Blogger
Recent posts widget in a blog is more essential to signify your readers that your blog has been updated even if they are reading your old article. Recent posts widget on your blog's sidebar is one of the best ways to attract your visitors. Though Blogger provides recent post widget by default, no one is interested to display that nakedly without further customizations. It's a totally different beautiful material designed recent posts widget and hope this widget can enhance your blog.

Why You Should Add a 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).

recent posts widget

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.

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)

add html/javascript blogger

  • Step 4: Copy & paste the below code in it

<div class="recentpoststyle">
<script src=""></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've given “book antique” font for its post title, so you'll be able to replace it with your desired font. Moreover I have highlighted basic customization parts in different colors. If you're still in doubt, hire them via comment or contact me straightforwardly.

– Other Blogger Widget Related Articles –

  1. Customize Default Blogger Scrollbar to Gmail Style Scrollbar
  2. Best Sliding Gallery Style Popular Posts Widget for Blogger
  3. Almost YouTube Style Horizontal Menu Bar for Blogger Blog