Add Multi Color Recent Post widget In Blogger

In this tutorial we discuss about recent post.As from widget name you got it the most recently publish post.It is very good to increase page view of blog.so we will learn how to add recent post in blogger.This widget is multi color and show thumbnail and title of the post.Adding it very simple just in one step so not a long tutorial but important one.

why to add this widget

There are many gadget like popular post available in blogger template and you can add then  in one click but recent post gadget is not available.To add this widget in blogger you have to do some manually action.It show five recent post with round thumbnail.

Also add pin it pinterest button

How to add recent post in blogger

This is not very necessary but is good if your blog is large.This recent post widget help visitor to know that is new on blog.May be you have blog of multi niche and you have more than one admin so it mean you are updating your blog more that regular single niche blog.This recent post widget help visitor to know that is new on blog.It  is very simple to add in blogger follow me in few steps.


step1:First login to your blogger account and go to layout of your blog 

Step2: add a gadget of html/javascript and paste given below code there and save it.

<script style="text/javascript" src="http://makingdifferent.github.io/blogger-widgets/recent-posts-widget2.js"></script> <script style="text/javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = false; var posts_date = true; var post_summary = true; var summary_chars = 70; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> <a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://5gblogger.blogspot.com/2015/01/add-recent-post-widget-in-blog.html" rel="dofollow">recent post Widget</a> <noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /> <style type="text/css"> img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff} .recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; } ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%} ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%} ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;} ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;} ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;} ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;} .recent-posts-container a { text-decoration:none; } .recent-posts-container a:hover { color: #222;} .post-date {color:#e0c0c6; font-size: 11px; } .recent-post-title a {font-size: 14px;color: #444; font-weight: bold;} .recent-post-title {padding: 6px 0px;} .recent-posts-details a{ color: #222;} .recent-posts-details {padding: 5px 0px 5px; } </style>

visit your blog to confirm that recent post in working fine on your blogger blog.I welcome you if for have any question.I hope you like it.