Simple Stylish Recent Posts Widget For Blogger

Displaying Recent posts in your sidebar often help your users to quickly take a look at the content that is more new and fresh. It also gives them a basic idea that what kind of content is published on a certain blog. If the most recent posts are somewhat linked to each other, then it might engage your visitors for a bit longer.  

However, in some designing methods people want to display recent posts differently according to their design. In this article, I will show you How to Display Simple Stylish Recent posts Widget in Blogger. This widget is very attractive and eye-catching.

Live Demo

To install this widget on your blog, Go to Blogger Dashboard >> Layout >> Click on Add a Gadget >> Select HTML/JavaScript.

Now Paste below code inside it:

<div id="hlrpsb">
<script src="https://googledrive.com/host/0B-AYvC9Y1riaT0o5TEt3djQ4bTg" type="text/javascript"></script>
<script>var numposts = 7;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://smartpik.blogspot.in/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type="text/css"> 
#hlrpsb li
{padding-left:10px;}
#hlrpsb  a {color: #fff; font-size: 13px; font-weight: bold;font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif; /* font size of post titles */
display:block;} 
.bbrecpost2{
padding:6px 10px 6px 10px;
border:1px solid #e5e5e5;
-moz-box-shadow: 0px 0px 2px #BBB; 
-webkit-box-shadow: 0px 0px 2px #BBB; 
box-shadow: 0px 0px 2px #BBB; 
position:relative;}
.bbrecpost2:nth-child(odd) {background:#c476c4;}
.bbrecpost2:nth-child(even) {background:#945994;}
.bbrecpost2:hover { opacity: .94;}
</style>

Now just change the highlighted things accordingly. Most important step to change is my blog address smartpik.blogspot.in to yours. 

If you want a different background color for Recent Posts, Change the color code in Red with which one matches your template. Some of the commonly used colors are described in below. You can also choose from our  Color Picker and Color Codes Table.

Color	Odd Color Code	Even Color Code
Sky Blue	#76bcc4	#598d94
Red	#c47676	#945959
Yellow	#c4c476	#949459
Green	#89c476	#689459
Dark Blue	#7689c4	#596894
Pink	#c476c4	#945994

Save your widget. And that's it! If you need any help, leave a comment below. Don't forget to like and Share. Thank you!