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
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(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 4,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(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
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(" <script src=\"/feeds/posts/default?max-results="+numposts0+"&orderby=published&alt=json-in-script&callback=showrecentposts0\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
Here to copy
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. :)
Download Geisha Band Songs For Free. Or in Indonesian it should be Download Gratis Lagu Mp3 Geisha Komplit. There are quite much songs available to download: Karena Kamu, Pergi Saja, Hatiku Bicara, Sedari Dulu, Aku Bukan Mereka, Jangan Pernah, Ku Menyerah, Kenangan Hidupku, Cukup Tak Lagi, Remuk Jantungku, Cinta dan Benci, Penyesalan Terdalam, Pilihan Hatiku, Untuk Selamanya, Penyesalah Terdalam, Jangan Pernah Lelah Menungguku, Tak Segalanya Indah, Cemburumu Keliru, Cintaku Hilang, Bunda, Ijinkan Aku Mendua, Takkan Pernah Ada, Selalu Salah, Kamu Yang Pertama, Jika Cinta Dia.
