Blogger Recent Posts Widget With 3D And Metro Style Border

Recent Posts is a very powerful widget for blogger, which displays your recent posts with thumbnails. It’s the perfect solution for online magazines or simple blogs and it comes with customization options available. You can dynamically re-size thumbnails to any desired dimension. Displaying a list of the recent posts in your sidebar is a great way to keep your visitors busy. There are lots of recent posts gadgets you can use but the one we will be covering in this post will definitely grab the attention of people on your blog. This Widget originally made by Blogger plugins.org and we share customized version by adding some CSS code. Installation of this this is very easy you just need to add html/JavaScript gadget and drop it where you want to show recent posts. So let's start the tutorial.

 

Live Preview

 

How to add it to blogger blog

1. Go to blogger layout section
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/JavaScript .
4. Copy the code below and paste it inside the content box.
5. Save the gadget.
6. Drag the gadget and reposition it where you want to show recent posts.
7. Click Save button (top right hand corner).

 

<style>
#bp_recent {
width:300px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}

#bp_recent img {
width: 70px;
height: auto;
border-top:5px groove #00a4ef !important;
border-bottom:5px groove #ffb900 !important;
border-right:5px groove #7fba00 !important;
border-left:5px groove #f25022 !important;

webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

#bp_recent a{
color: #fff;
font-size: 15px;
text-transformation: uppercase;
margin-bottom: 10px!important;
}

#bp_recent a:hover {
text-decoration: underline;
}

</style>
<div id='bp_recent'></div>
<script type="text/javascript" src="http://yourjavascript.com/401413211131/recentposts-orig.js"></script>
<script style='text/javascript'>
var numberOfPosts = 9;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Read More';
</script>
<script src='HERE_IS_YOUR_BLOG_URL/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

 

Widget Customizations

1. Simply replace the HERE_IS_YOUR_BLOG_URL with your own blog address (Url) which is include "http://".

2. Widget comes with fixed width you can also edit width by changing following value (300 to 350 e.g.).

width: 300px;

 

Need any help

Do you have any query regarding these tutorial on how to add recent posts widget to blogger? We're always there to put you through. Post your queries via comment and we'll get back to you as soon as possible.  We've done our own part by sharing these informative tutorial with you. So, it's now your turn to show appreciation by leaving a useful comment below.You don't want to miss any of our future updates? Subscribe to our rss feeds to get all our latest updates delivered directly to your email inbox.