cara buat slider post berjalan horizontal dibawah header

hallo gan, kali ini saya mau ngasih tau artikel yang cukup bagus buat blog agan nih nama judulnya adalah cara buat slider post berjalan horizontal dibawah header.

Sebelumnya saya sudah pernah posting yaitu cara buat recent post horizontal di atas postingan. Tapi yang ini berbeda karna yang ini bisa berjalan dan ada tanda panahnya dikanan dan dikiri plus bisa jalan juga loh. Tapi yang ini ane gak pake karna ane males make - make yang beginian.
Sebenarnya ane demen banget sampe ane cari - cari buat dapetin slider post kaya gini, eh setelah saya dapet ide saya ambil scriptnya aja dari template mastemlate.com. Kalau sobat mau tau cara pemasangannya ikuti saya yah !

1. log in blogger
2. template > edit html
3.  cari kode ]]></b:skin> dengan cara ctrl+f atau f3 dan letakan kode dibawah ini tepat diatas kode ]]></b:skin> 

#carousel{width:1100px;height:200px;border-bottom:1px solid #ccc;position:relative;display:block;background:#000;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:1100px;height:200px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:30px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVAupH_ReUbx6F3cJlOgBTbKPkfeKq8-NKEQmFVWTVljw5fk_2gaNPsHpl3YiJU3gDUuysiPG7S8Dsw6f6UaeYZ1ZSa5daxFwYL7CKl5Oygm8OyF8_S6w-XBjiAeAxse5PIcDulpqS5ohx/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit-ilH9_4msJNgh363NP9HQ9lqwUbW1xpt_dJx5cSEs_pUT59wmTsQkjBErSuyBr0C4ktuNxidEl4Y85BIAFnIubwh0rZEHgd_XeAmOdHgNI57ve1vidDJy6nm87mA1-_9FIxvDtFM7PVn/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#04B404;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 5px 2px;padding:6px}
#carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0}

-- kode warna hijau sama kan dengan lebar dan tinggi blog sobat --
-- semua kode warna merah yang diatas boleh sobat ganti dengan kode warna yang sobat mau --

4. cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>

<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'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRymwUsSdTmhUC4Oycz7ursKasuNZKpa7eCAWzltObze93I7RVYLK2Ap7JI0sUV7ZwXjuEg6yKeH30KN_aA8pUEFNXlWQgpa4t7gpq29rn1KZPZbxgvnZOw5zwoUvgt0p0XHMG0hDBI1k/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; 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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
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>

-- kode warna merah adalah jquery, jika sobat sudah mempunyai jquey maka jangan dipasang lagi -- 
-- kode warna biru adalah tinggi dan lebar foto yang akan ditampilkan -- 

5. cari kode salah satu dibawah ini !
--    <div id ='main-wrapper'>
--    <div class='main-outer'>

6. kalau sudah ketemu letakan script dibawah ini dan pastekan diatas kode yang tadi anda cari!

<div id='carousel'>

<div id='previous_button'/>

<div class='container'>

<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script>   

<div class='clear'/>

</div>

<div id='next_button'/>

</div>

<script type='text/javascript'>

(function($) {     $(document).ready(function(){

$(&quot;#carousel .container&quot;).jCarouselLite({

    auto:4000,

    scroll: 1,

    speed: 800,   

    visible: 15,

    start: 0,

    circular: true,

    btnPrev: &quot;#previous_button&quot;,

    btnNext: &quot;#next_button&quot;

    });

    })})(jQuery)   

</script>

 
7. Simpan hasilnya dan lihat blog sobat