Recent Post: Add Recent Posts Widget With 3D And Metro Style Border in Blog of Blogger

Recent Posts may be a very powerful widget for blogger, that displays your recent posts with thumbnails. It’s the right answer for on-line magazines or simple blogs and it comes with customization choices offered. you'll be able to dynamically re-size thumbnails to any desired dimension. Displaying an inventory of the recent posts in your sidebar may be a good way to stay your visitors busy. There are uncountable recent posts gadgets you'll be able to use however the one we'll be covering during this post will certainly grab the eye of individuals on your blog. This contrivance originally created by Blogger plugins.org and that we share custom-made version by adding some CSS code. Installation of this this can be very simple you simply have to be compelled to add html/JavaScript convenience and drop it wherever you would like to point out recent posts.

How to get more clicks on links.

Recent Post Demo!

Let's begin the tutorial.

How To Add It To Blogger Blog

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

<style>
#bob_recent {
width:300px; 
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}
#bob_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);
}
#bob_recent a{
color: #fff;
font-size: 15px;
text-transformation: uppercase;
margin-bottom: 10px!important;
}
#bob_recent a:hover {
text-decoration: underline;
}
</style>
<div id='bob_recent'></div>
<script type="text/javascript" src="https://blog-of-blogger.googlecode.com/svn/trunk/js/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='http://www.BlogofBlogger.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bobrecentpostswiththumbnails'></script>

Widget Customizations

1. Simply replace the http://www.BlogofBlogger.com 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 facilitate

Do you have any question relating to these tutorial on the way to add recent posts widget to blogger? We're continually there to place you through. Post your queries via comment and we'll retreat to to you as presently as attainable. We've done our own half by sharing these informative tutorial with you. So, it's currently your intercommunicate show appreciation by effort a helpful comment below.You don't need to miss any of our future updates? take our rss feeds to urge all our latest updates delivered directly to your email inbox.

You Also Like:

Anchor Tag: How to create Anchor Links in Blogger – Jump links