Add a simple yet beautiful "Recent Posts" Gadget in blogger blogspot

Published

So, here you are, for adding a recent posts widget in your blogger blogspot.
Without wasting time, lets get to that straight.

I will be explaining how this works, at the end of this tutorial,
Now lets add this to your blog.


<script>var numposts=5,cmtext="Comments",pBlank="http://4.bp.blogspot.com/-wThBtCxQRx4/UWusJ3fHPaI/AAAAAAAAB2E/qSt2qlSec20/s798/no-image-72x72.png"; function rpthumb(b){document.write('<ul class="rpthumb">');b=b.feed.entry;for(var c=0;c<numposts;c++){for(var e,a=0;a<numposts;a++)if("alternate"==b[c].link[a].rel){e=b[c].link[a].href;break}for(a=0;a<numposts;a++)if("replies"==b[c].link[a].rel&&"text/html"==b[c].link[a].type){cmnum=b[c].link[a].title.split(" ")[0];break}var a=b[c].title.$t,d=b[c].published.$t.substring(0,10),d=d.replace(/-/g,"/");postimg="media$thumbnail"in b[c]?b[c].media$thumbnail.url:pBlank;document.write('<li><img src="'+postimg.replace(/\/s72-c/, "/s40-c")+'" class="rp-thumb" alt="thumb" />');document.write('<a href="'+e+'" target="_parent">'+a+'</a><span class="footer-outer"><span class="dt">'+d+'</span><span class="cm"> - '+cmnum+" "+cmtext+"</span></span></li>")}document.write("</ul>")}; </script><style type='text/css'>ul.rpthumb{background-color:transparent;margin:0 0;padding:0 0;border:1px solid #CCC}ul.rpthumb li{display:block;padding:7px 7px;margin:0 0;overflow:hidden}ul.rpthumb li a{text-decoration:none;display:block}ul.rpthumb li a:hover{}ul.rpthumb img.rp-thumb{padding:0 0;outline:none;border:1px solid #CCC;background-color:#02406C;display:block;float:left;margin:0 10px 0 0;width:40px;height:40px}ul.rpthumb span{font-size:10px;color:#666} </style><script src="http://aslamise.blogspot.com/feeds/posts/default?alt=json-in-script&callback=rpthumb&max-results=5"></script> <a href="http://aslamise.blogspot.com/2013/04/How-to-add-beautiful-recent-posts-widgets-in-blogger-with-javascript-and-css-full-code-with-demo.html" target="_blank"><img src="http://4.bp.blogspot.com/-Dg7HZY9G_yA/UWvexkzUCMI/AAAAAAAAB2Y/PD2HTvht0e4/s1600/bullet_add.png" style="float: right;height: 20px;margin-top: -20px;position: relative;z-index: 10;" title="Get This widget for your blog" alt="Get This widget for your blog"/></a> <noscript></noscript>
Copy Above code and Open your blogs layout,
click on add a gadget option, then select html/javascript option then paste this code.
Don't forget to replace http://aslamise.blogspot.com with your blog's address,and set number of posts to retrieve. if not set, default is 5 posts.
save the gadget with a title of recent post or something.
Save layout. and load your blog.
It will show a recent posts widget where it will show
Enjoy blogging ;)



Comments

  1. Thanks, Just the widget I was looking for. I just installed on my blog and its looking nice..http://tech70.blogspot.com/

    ReplyDelete
  2. Thank you so much! This is exactly what I was looking for - it looks great!

    ReplyDelete
  3. simple and superb.......thnks a lot

    ReplyDelete