Latest News
Home » All Blogger Tips » Add a stylish Recent post widget for blogger
web development, SEO services, Web designing

Add a stylish Recent post widget for blogger

Add a stylish Recent post widget for blogger

In my previous posts about recent post widget I had provided you with Simple Recent post widget and also with Animated Recent post widget. Here in this post I will provide you all with a new stylish widget that would attract a lots of people towards it. This widget is with a thumbnail and a scroll so makes your website very attractive.
If you want this stylish recent post widget then just follow the following steps:

Steps to add Stylish Recent post widget:

  • Go to your blogger dashboard.
  • Click on layout.
Add a stylish Recent post widget for blogger
  • Click on add widget and select HTML/java.
Add a stylish Recent post widget for blogger
  • Now just copy the following code in it:
bloggerfascinator-recent”>

<script style=”text/javascript”>
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = “»»”;
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = “Jan”;
monthnames[2] = “Feb”;
monthnames[3] = “Mar”;
monthnames[4] = “Apr”;
monthnames[5] = “May”;
monthnames[6] = “Jun”;
monthnames[7] = “Jul”;
monthnames[8] = “Aug”;
monthnames[9] = “Sep”;
monthnames[10] = “Oct”;
monthnames[11] = “Nov”;
monthnames[12] = “Dec”;
if (“content” in entry) {
var postcontent = entry.content.$t;}
else
if (“summary” in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = “”;
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, “”);
if (!standardstyling) document.write(”);
document.write(‘<div>’);
document.write(‘<span>’);
if (standardstyling) document.write(”);
document.write(posttitle);
if (standardstyling) document.write(”);
if (showpostdate == true) document.write(‘ – ‘ + cdday + ‘ ‘ + monthnames[parseInt(cdmonth,10)] + ‘ ‘ + cdyear);
if (!standardstyling) document.write(‘<div”>’);
if (standardstyling) document.write(”);
if (showpostsummary == true) {
if (standardstyling) document.write(”);
if (postcontent.length < numchars) {
if (standardstyling) document.write(‘‘);
document.write(postcontent);
if (standardstyling) document.write(”);}
else {
if (standardstyling) document.write(‘‘);
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(” “);
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + ‘… ‘ + readmorelink);
if (standardstyling) document.write(”);}
}
if (!standardstyling) document.write(”);
document.write(‘</span>’);
document.write(‘</div>’);
if (standardstyling) document.write(”);
}
if (!standardstyling) document.write(‘

‘);

if (standardstyling) document.write(”);
document.write(”);
if (!standardstyling) document.write(‘/div’);
}
</script>
10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;
allbloggingways.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”></script></div>
<style type=text/css>
#bloggerfascinator-recent a {font-family:Arial;transition:background .2s;display:block;padding-left:9px;padding-top:6px;padding-bottom:6px;
font-weight:bold;text-decoration:none;color: #0066cc;font-size: 12px;}
#bloggerfascinator-recent a:hover {background:#eaeaea;transition:background .2s;color:#cc0066;text-decoration:none;}#rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:black; text-decoration:none;}
#rpdr a:hover {color:black; text-decoration:none;}
.bbrecpost2  {
border-left:1px solid #ddd;
border-right:1px solid #ddd;
border-left: 1px solid rgba(0,0,0,.2);
border-right: 1px solid rgba(0,0,0,.2);
background:white;
border-bottom: 1px solid #ddd;
}
</style>

  • Now just change the website name in place of www.allbloggingways.com
  • If you want to change the number of posts shown then just change count 8
  • You can also change the height of widget by changing “height”:”500
  • Save the widget and you are done 🙂
Thanks very much to admin of helplogger to provide this wonderful widget.

Originally posted 2013-05-14 06:13:00.

About Vishal Sharma

Hi`i' m +Vishal, a Search Engine optimizer, internet marketer, web designer, affiliate marketer & founder of this blog. I love to learn and share new things. For any query or help you can contact me at any time.

9 comments

  1. Wow! this will be very helpful dude. Thanks for sharing it.

  2. You are welcome Mitch 🙂

  3. Debopam Banerjee

    Good one for blogger users….. Thanks for sharing….

  4. You got a nice blog….And this widget is good one for blogger users….Thanks for sharing….

  5. thanks for your post. it works really well.

  6. Its great 🙂
    Thanks for your response David 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.