RECENT POSTS WIDGET WITH THUMBNAILS FOR BLOGGER/BLOGSPOT

Wednesday, 21 May 2014

RECENT POSTS WIDGET WITH THUMBNAILS FOR BLOGGER/BLOGSPOT

RECENT POSTS WIDGET WITH THUMBNAILS FOR BLOGGER/BLOGSPOT

-------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
--------------------------------------------------------------------------------------------------

<html >
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Auto Recent Posts Widget With Thumbnails For Blogger
Not Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

img.label_thumb {
float: left;
border: none;
background: none;
height: 400px;
width: 300px;
margin: 0 10px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-bottom: 1px solid #fff;
overflow: hidden;
}
img.label_thumb:hover {
background:none;
}
.label_with_thumbs {
float:left;
margin:0;
padding:0;
}
ul.label_with_thumbs li {
clear:both;
margin:0 0 5px;
}
#contento {
float: left;
margin-top: 10px;
padding: 10px;
width: 290px;
font-size: 13px;
}
.featurearticle {
width: 310px;
height: 295px;
position: relative;
float: left;
}
.featurearticle h2 {
position: absolute;
bottom: -150px;
z-index: 2;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEdsFLqlnEczHnoa1EZny6ejOgQm6JaCtFVUhzbEcIH2jx-xlp2b8prleptEQABa243rY7CnqszKnzHSstiZ7dqvM0coS6lJVCVuW0AzGEv-aI4LCqt810U3f1S6HS-ykHYEuptzQs6sFh/s1600/tooltip_bg_featured.png) left bottom no-repeat;
padding: 2px 0 19px 13px;
font-family: 'LatoBlackItalic', Arial, Helvetica, sans-serif;
font-size: 34px;
}
.featurearticle a {
color: #fff;
line-height: 1.2em;
padding: 2px 5px 2px 0;
font-family: lato, sans-serif;
font-weight: 800;
font-style: italic;
text-decoration: none;
padding-top: 1px;
}
.title a {
background: #000;
}
.latestarticles a {
background: none!important;
font-family: Lato, sans-serif;
font-size: 18px;
font-style: italic;
color: #000;
text-decoration: none;
font-weight: 700;
}
.latestarticles {
clear: none;
float: left;
margin-left: 20px;
background: #fff;
margin-top: -1px;
width: 300px;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
border-top: none;
min-height: 480px;
}
.latestarticles li { padding-bottom: 10px; float: left; padding-top: 10px; }
.label_with_thumbs li:nth-child(2n+2) {
background: #f6f6f6;
}
.latestarticles h2 {
margin: 0px;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
line-height: 22px;
padding-top: 10px;
}
.latestarticles #contento {
padding: 0px;
margin: 0px;
}
.datewrap {
color: #777;
font-size: 11px;
}
.latestarticles .datewrap {
color: #777;
font-size: 11px;
margin-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
margin: 0px;
padding-top: 5px;
}
.featurearticle #contento {
line-height: 22px;
}

]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_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.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb346wdxK1cq8dG02seVYi7h1Fm4SSmMlQ0wnN-9WO-EGhbnyikI9k2lxAKbLdyvTUsVGRGbEYmrBmAAbY3lCUG3TlFPf-Ikwhi2zZbS1tppHE5YHbJstOZVCDOvJeueG6TxJkveQ4gQot/';}
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('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><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('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttexommenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More ?</a>';flag=1;;}
document.wt=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')crite(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]></script>

</head>

<body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='featuretop'>
<div class='featurearticle'>

<script type='text/javascript'>
var numposts = 1;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 280;
</script>

<script src='/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs' type='text/javascript'/>

</div>


<div class='latestarticles'>

<script type='text/javascript'>
var numposts = 6;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = false;
var numchars = 200;
</script>

<script src='/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</div>

</div>

</b:if>

<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'> </b:includable>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'></b:includable>
<b:includable id='feedLinks'></b:includable>
<b:includable id='feedLinksBody' var='links'></b:includable>
<b:includable id='iframe_comments' var='post'></b:includable>
<b:includable id='mobile-index-post' var='post'></b:includable>
<b:includable id='mobile-main' var='top'></b:includable>
<b:includable id='mobile-nextprev'></b:includable>
<b:includable id='mobile-post' var='post'></b:includable>
<b:includable id='nextprev'></b:includable>

<b:includable id='post' var='post'>
<data:post.body/>
</b:includable>

<b:includable id='postQuickEdit' var='post'></b:includable>
<b:includable id='shareButtons' var='post'></b:includable>
<b:includable id='status-message'></b:includable>
<b:includable id='threaded-comment-form' var='post'></b:includable>
<b:includable id='threaded_comment_js' var='post'></b:includable>
<b:includable id='threaded_comments' var='post'></b:includable>
</b:widget>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>

</body>
</html>