Menu Close Menu

Attractive Latest Post Widget For Entertainment Blogger Blog

View Your Latest Post QuicklyRecent 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).

#bp_recent {
padding: 5px;
color: #999;
font-size: 14px;

#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;

<div id='bp_recent'></div>
<script type="text/javascript" src=""></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 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 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 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.

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    1. This comment has been removed by the author.


Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.