20 May 2013

Simple Elegant Recent Post Widget for blogger

recent post widget for blogger


Today, i will show you how to display Recent Post With Thumbnail for blogger. This is simple javascript/html based widget . Recent post widget gives quick idea to explore your blog contents. It provide overview to blog visitor. It is said that first impression is last impression. So recent post is first impression for any new visitors. Also visitors can find your blog post quickly, without spending more browsing time. Small thumbnail image in recent post could be right fix. This widget has hands on control option so that you can on/off thumbnail, post summary etc.

Follow this simple way to add “Recent Post Widget” to you
blog


  • Go to Blogger >> Design >> than Page Element
  • Click on Add a Gadget link
  • A popup window will be display with many option, select Add
  • Javascript/HTML
  • Copy and paste following code in blank area


<style type='text/css'>
img.recent_thumb
{padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width:
100%;min-height: 70px;margin: 5px 0px 5px 0px;padding:
0;font-size:12px;}
ul.recent_posts_with_thumbs li
{padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript'
src='http://yourjavascript.com/3012232105/androtweet.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
6
<script
src='http://bloggertrendytricks.blogspot.com/feeds/posts/default?orderby=published&<hr/><small><a style='margin-left:10px;align:right;'
href='http://androtweet.com' target='_blank'>Recent Posts
Widget</a> | <a href='http://bloggertrendytricks.blogspot.com/'
target='_blank'>BTT</a></small>

Few hands on control option

  • First of all replace blogger address by desired option.
  • If you want to change no, of post to show, vary numpost=5
  • Numchars=100 is to change characters shown in summary.
  • Change other option by assigning true/false.

Now save this widget. checkout your blog to see change, if any
problem occurs, share with us, will try to solve asap.

0 comments:

Post a Comment