Attractive Latest Post Widget For Entertainment Blogger Blog

Recent post widgets is can go a long way to enhance the usability and user friendliness of a website and blog theme. The attractive widget can help to driving more traffic to your blog and website. If you are using our older version of recent post widget then you must familiar with this widget. So today in this tutorial we are going to make a new recent post widget for videos blog and website, Which can make your website and blog theme more attractive and also better for browsing your latest posts. There is no better way to understand something than by seeing a live preview, So click on the link and see the demo.

 

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:320px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}

#bp_recent img {
width: 120px;
height: auto;
border: 8px solid rgba(255, 255, 255, 0.5) !important;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#bp_recent img:hover {
opacity: 0.5;
-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2);
}
#bp_recent a{
margin-bottom: 10px!important;
}

</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 = 8;
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.MYBLOGGER-TRICKS.COM/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

 

1. Simply replace the http://www.mybloger-tricks.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: 320px;

 

Do you have any query regarding this tutorial on how to add recent posts widget to blogger? Post your queries via comment and we'll get back to you as soon as possible. I hope this tutorial has been of interest. Thank you everyone for reading and special thanks to bloggerplugins.org for his valuable help for making script. Make sure you browse the comments as some of them contain useful advice about how to make your widget customizable, how to reduce number of the posts even further the size of the recent post image, etc.  If 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.