Horizontal Recent Post Widget Thumbnail

Horizontal Recent Post Widget With Thumbnail (Updated). Is this kinda new style of blogger recent post widget? Then all credit is given to my brother, mas kolis, where the widget originally i stole from. That guy is realy good enough in coding. He's not only created this horizontal recent post widget, but he's also created much enough blogger templates to download for free.

To my opinion, the templates are not too bad, but maybe not everybody have the same look and passion. Just take a look at the website if you wanna check his templates. Try this blogspot blog: creatingwebsite-maskolis.blogspot.com.

There is also a normal recent post widget with thumbnail that i stole from him, Recent Post Widget With Thumbnail. Or maybe you want a random post widget: Horizontal Random Post Widget With Thumbnail For Blogger

Well, back to the topic. The horizontal recent post widget that i'm going to share here doesn't take too many script code, cuz it's truly just a usual recent post widget, similar to the widgets that you have known already. The only difference here is that this horizontal recent post widget is styled with a different arrangement using a paragraph of css code, that's it.

At the time i write this article, you can find the demo just right on this blog. Take a look at the "slide" horizontal post list above this post, that is the recent post widget that i'm talking about.

Well, it is not something hard to add this widget to blogger, not at all. You only have to include two short paragraph of javascript code, and one paragraph of css code in your template and done. Even it's not realy complicated to customize the widget. Pay attention to the following instruction.

1. Find the closing tag ]]></b:skin> in your template and add the following css above it:

#carousel{width:970px;height:125px;position:relative;display:block;} --> Here is where you can modify the whole width and height of the widget. Not the contents inside
#carousel h5{color:#fff;margin:2px} --> Here is where you can modify the title color
#carousel .container{position:absolute;left:24px;width:950px;height:125px;overflow:hidden} --> Here is where you can modify the whole width and height of the contents inside
#carousel .thumb{float:left;margin-right:5px;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguITxgcOtqD6HJgDEslmHpfiyLWnDSN2H-mliIMtEVzxaTs50zrSdmtyj9ARKEfNLo1gmY7p-RHrqvVwixu8CYBkrdS9t0dSKWBk2b0cK_22PZm4VGUe5GdwABcm7PfT4qBdMCp1V4Pb0/s1600/next.png) center;z-index:100;cursor:pointer;} --> Here is where you can modify the next button
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3oxEi68f07KTltUOz2fvC4wrkD5PjsgO_PAC9uYipA01p7s7IjT61xS2G1_Rmc-EPhEsTrsh2g3D7TK6P04PmeFSAgQo-tO_ojQg-6S09pM0isjvM5_XUL6mP5vdxRctLYAHQVDizbU/s1600/prev.png) center;z-index:100;cursor:pointer;} --> Here is where you can modify the previous button
#carousel .thumb:hover,#carousel #next_button:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7} --> Here is where you can modify the thumbnail and next-prev button hover
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#41ccff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQd3v1TfJgGVOuOX0-xtx5a69QJvTcEV_HBVPbz74B-9VNfYWZdw8PpbveWcGd7-QfDTfE3a0r9q_jXOzKQcJdW_Lv_UVHKnnPbrqVlftx0V31x6mLGhnRIywS7idFxTSzNBb8TozxVc/s1600/carousel.png) repeat-x top left;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:210px;height:90px;margin:0 2px 20px 6px;padding:6px} --> Here is where you can modify the background and the width and height for every single post
#carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#fff;font:bold 13px Arial;}

Here to copy
#carousel{width:970px;height:125px;position:relative;display:block;} #carousel h5{color:#fff;margin:2px} #carousel .container{position:absolute;left:24px;width:950px;height:125px;overflow:hidden} #carousel .thumb{float:left;margin-right:5px;} #carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguITxgcOtqD6HJgDEslmHpfiyLWnDSN2H-mliIMtEVzxaTs50zrSdmtyj9ARKEfNLo1gmY7p-RHrqvVwixu8CYBkrdS9t0dSKWBk2b0cK_22PZm4VGUe5GdwABcm7PfT4qBdMCp1V4Pb0/s1600/next.png) center;z-index:100;cursor:pointer;} #carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3oxEi68f07KTltUOz2fvC4wrkD5PjsgO_PAC9uYipA01p7s7IjT61xS2G1_Rmc-EPhEsTrsh2g3D7TK6P04PmeFSAgQo-tO_ojQg-6S09pM0isjvM5_XUL6mP5vdxRctLYAHQVDizbU/s1600/prev.png) center;z-index:100;cursor:pointer;} #carousel .thumb:hover,#carousel #next_button:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7} #carousel ul{width:100000px;position:relative;margin-top:10px} #carousel ul li{background:#41ccff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQd3v1TfJgGVOuOX0-xtx5a69QJvTcEV_HBVPbz74B-9VNfYWZdw8PpbveWcGd7-QfDTfE3a0r9q_jXOzKQcJdW_Lv_UVHKnnPbrqVlftx0V31x6mLGhnRIywS7idFxTSzNBb8TozxVc/s1600/carousel.png) repeat-x top left;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:210px;height:90px;margin:0 2px 20px 6px;padding:6px} #carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0} #carousel ul li a.slider_title:hover{color:#fff;font:bold 13px Arial;}

2. Next step, find the closing tag </head> in your template and add the script in the text box below above it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> --> JQuery script
<script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/> --> Script to load the next-prev button (If it's dead, you may remove this line)

<script type='text/javascript'>

(function($) { $(document).ready(function(){ $(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 4,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
</script>

<script type='text/javascript'> //<![CDATA[ imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiysj0-9tPbJ9AE3klpx2E6OG1pOqh2VnKkwhcXs5NEL445CpMR3q8l0CkmY1KjM_5UV_JWYg_ScDVkosaiArUAX7gzRhtkXXgyc5rx2EI9aHTU7nMeiI3sTwYyQDxiYSPXzBreMSb1hjI/s1600/no+image.jpg";--> Image for posts that have no image/thumbnail
showRandomImg=true;aBold=true;
summaryPost=60; --> Here is where you can modify how many text will be taken for summary. If that is not this, then it must be the summaryPost1 below
summaryPost1=60;
summaryTitle=80; --> Here is where you can modify how may text for the title
numposts1=4;numposts2=4;numposts3=10;numposts6=3;numposts0=12;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts0(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts0;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;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}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'">
<img width="100" height="90" --> Here is where you can modify the width and height of the image/thumbnail shown on the widget
class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd);j++}document.write('</ul>')}
//]]>
</script>

Here to copy
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/> <script type='text/javascript'> (function($) { $(document).ready(function(){ $(&quot;#carousel .container&quot;).jCarouselLite({ auto:4000, scroll: 4, speed: 800, visible: 4, start: 0, circular: true, btnPrev: &quot;#previous_button&quot;, btnNext: &quot;#next_button&quot; }); })})(jQuery) </script> <script type='text/javascript'> //<![CDATA[ imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiysj0-9tPbJ9AE3klpx2E6OG1pOqh2VnKkwhcXs5NEL445CpMR3q8l0CkmY1KjM_5UV_JWYg_ScDVkosaiArUAX7gzRhtkXXgyc5rx2EI9aHTU7nMeiI3sTwYyQDxiYSPXzBreMSb1hjI/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=0;summaryPost1=60;summaryTitle=80;numposts1=4;numposts2=4;numposts3=10;numposts6=3;numposts0=12;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s} function showrecentposts0(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts0;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;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}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd);j++}document.write('</ul>')} //]]> </script>

3. Add the below script where you want the widget to appear:

<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts0+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts0\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>

Here to copy
<div id='carousel'> <div id='previous_button'/> <div class='container'> <script> document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts0+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts0\&quot;&gt;&lt;\/script&gt;&quot;); </script> <div class='clear'/> </div> <div id='next_button'/> </div>

For example: if you want to place the widget above your main and sidebar column (this is where the widget is placed on this blog), what you have to do is to find the following html code in your template, and then put the code in the text box above before it:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

The code might be different in every templates ( <div id='main-wrapper'> ), but it shouldn't be realy much. The id='Blog1' may be the same in every templates.

That's it my friend.. Not hard at all right? Feel free to post your comment. If you face any trouble, maybe we can solve it together. Now have a nice day. :)