Tutorial Membaut Slide Show

• Pertama yang harus kamu lakukan adalah Login Blogger
• Kemudian masuk Dasbor Blogger
• Pilih Template >> Edit HTML. Jangan Lupa Download Dulu Template Asli Kamu.
• Kemudian cari code ></b:skin>  Gunakan CTRL + F untuk mempermudah pencarian.
• Kemudian letakkan code dibawah tepat diatasnya.

/* Slide Show
----------------------------------------------- */
#carousel{width:auto;height:115px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:0px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEi5JeK6eLBu4bNq425uWybcLuWi8WYHnZhre8Z0jhpTOdInFw7uxQTCsM5jFV1tBcamMHBjPGewUCUyfk43Lwd_0k4HtqdUsqImJFWwhe3LnddD_lSHkALkAL6HswVmBHSc35lQ8GYaQH/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/AVvXsEg5lgJYIy4kAtca2LxiAzLhGQUW4gIggZNPwR_wIzISQPTYa8U_5QIncMI0mbC3frq1Dz-TTvgf91iWzFcd-o45ocuHtrkcfgR8NGNcbtgeb64upcBpjktnpTncLYytZkUGF07NkriMJHf9/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:auto;position:relative;margin-top:5px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 12px Arial;border:1px solid #ccc;width:240px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}

• Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
•  Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head>

<!--Slide Show-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvOdaH-OSYGia1lCFXTJGlUe6sWRELWAfPfCAHZNduUYdliq3tVEqgnIw6hxjluYQgvVHRPPgheA7m8_1QFe2vMB7HfrtTOlNoMTXbipKh7TMyJlX0s8Z8qktIW4iBXMYmk_svkf-tmk8/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 5;

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>
<!--Slide Show-->

•  Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
• Kode warna biruadalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90 adalah panjang dan lebar image yang ada di slider.
•  
• Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'> atau </header> kemudian letakkan kode berikut ini diatasny.

<!--Slide Show-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/label?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:1500,
    scroll: 1,
    speed: 800,  
    visible: 4,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)  
</script>
</b:if>
<!--Slide Show-->

• Perhatikan kode warna merah diatas, label adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/label. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.
• Kemudian Save Template anda dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Referensi

http://www.maskolis.com