Scribd
Upload
111 views4 pages

Recent Posts Widget: Add This Code Below in Html/Javascript Widget

This document provides code to add a widget to a blog that displays recent posts with thumbnails. The code includes HTML, CSS, JavaScript and JSON formatting to pull in recent post data from a blog and display titles, images, dates and optionally comments or a "More" link for each post. Settings are provided to customize aspects of what info is displayed.

Uploaded by

Haleem Akhtar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
111 views4 pages

Recent Posts Widget: Add This Code Below in Html/Javascript Widget

This document provides code to add a widget to a blog that displays recent posts with thumbnails. The code includes HTML, CSS, JavaScript and JSON formatting to pull in recent post data from a blog and display titles, images, dates and optionally comments or a "More" link for each post. Settings are provided to customize aspects of what info is displayed.

Uploaded by

Haleem Akhtar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

RECENT POSTS WIDGET

ADD THIS CODE BELOW IN HTML/JAVASCRIPT WIDGET


Change http://simplegrids.blogspot.com/ with your blog links

<style scoped>
img.recent_thumb
{width:72px;height:72px;float:left;padding:2px;background:#333;margin:0 2px
2px 0;transition:all 0.3s ease-in-out;}
img.recent_thumb:hover {opacity:0.8;}
.recent_posts_with_thumbs {font-weight:bold;font-size:13px;}
ul.recent_posts_with_thumbs li {fontsize:14px;color:#888;overflow:hidden;margin-left:5px;}
.recent_posts_with_thumbs a {text-decoration:none;font-weight:400;marginleft:5px;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul
class="recent_posts_with_thumbs">'); 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=='replies'&&entry.link[k].type=='text/html'){var
commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var
thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.
$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.subst
r(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){

thumburl=d;} else thumburl='http://1.bp.blogspot.com/v45dgAnX3H4/TxvVHISv35I/AAAAAAAAAZs/6VycwMKI-KE/s320/noimage.png';


}
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";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"
title="'+posttitle+'" alt="'+posttitle+'"/>');
document.write('<b><a class="alink" href="'+posturl+'" title="'+posttitle+'"
target ="_top">'+posttitle+'</a></b><br>');
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 (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}
var towrite='';var flag=0;
document.write('<br><strong>');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]
+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='Add Comment';
commenttext = '<a class="alink" href="'+commenturl+'" target
="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a class="alink" href="'+posturl+'" title="'+posttitle+'"
class="url" target ="_top">More -></a>';
flag=1;
;
}

document.write(towrite);
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('<hr size=0.5>');
}document.write('</ul>');
}
//]]>
</script>
<script>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src=" http://simplegrids.blogspot.com/feeds/posts/default?
orderby=published&amp;alt=json-inscript&amp;callback=showrecentpostswiththumbs"
type="text/javascript"></script>

You might also like