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.
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="UR_BLOG_URL/feeds/posts/default?orderby=published&alt=json-in-script&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 blog address UR_BLOG_URL to yours.
If you want a different background color for Recent Posts, Change the color code in Red with which one matches your template.