HOW TO ADD HORIZONTAL FEATURED POSTS IN BLOGGER

See the 5 square images? Those link to the 5 most recent posts! And they update automatically! COOL huh?! To add this to your own blog you need to —

1. Go to your Blogger Dashboard.

2. Go to Layout

3. Add a new HTML/Java Script Gadget to the area right above the posts.

4. Paste in this code. To copy put cursor at the beginning of the code and drag all the way to the end. 


 

  <center><div id='bp_recent'></div><div class='bp_footer'><small><a id='bp_recent_link' target='_blank' href='http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html?utm_src=bp_recent' style='padding: 1px 0px 0px 19px;text-decoration:none;'><a href='http://www.bloggerplugins.org/?utm_src=bp_recent' target='_blank' title='blogger widgets'></a></a></small></div>
 <script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
 <script style='text/javascript'>
 var numberOfPosts = 5;
 var showPostDate = false;
 var showSummary = false;
 var titleLength = 0;
 var showCommentCount = false;
 var showThumbs = true;
 var showNoImage = true;
 var imgDim = 125;
 var imgFloat = 'left';
 var myMargin = 5;
 var mediaThumbsOnly = true;
 var showReadMore = false;
 </script>
 <script src='http://destinywebdesigns.blogspot.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'>
</script></center>


5. Make these changes — 

At the bottom of the code change out YOUR feed url for the one shown. Make sure you keep the question mark!

So yours will look like this ::

<script src='YOUR BLOG URL/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'>
</script></center>

You can also change the number of posts by changing this …

var numberOfPosts = 5;

Or you can change the thumbnail size by changing this …

var imgDim = 125;