Slide Show Postingan itu apaan sih?
SlideShow, dari namanya sudah cukup jelas bukan? Itu lo yang gambar/foto nya berpindah-pindah sendiri. Saya banyak menjumpai blog sesama blogger itu menggunakan website slide show. Misalnya Slide.com, Kizoa.com atau Slideshow.com sendiri.
Situs-situs slideshow seperti diatas hanya cocok untuk memajang foto-foto/ gambar saja. Tapi bukan itu yang saya maksud pada postingan kali ini. Tapi slideshow postingan pilihan. Yang artinya slide show yang berisi image-image untuk menuju artikel-artikel pilihan yang kita tentukan sendiri.
Sebelum kita mencobanya disini saya akan memberikan cara pemasangan Slider ini, tepat diatas Sidebar.
Baiklah, kita lansung kelangkah pembuatannya..
Ikuti langkah-langkah berikut :
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .
#slideM{margin:0 0 15px; overflow:hidden}
.stepcarousel{border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; position:relative; border:1px solid white; overflow:scroll; width:270px; height:200px}
.stepcarousel .belt{position:absolute; left:0; top:0}
.stepcarousel .panel{float:left; overflow:hidden; margin:10px; width:175px; height:160px}
.panel img{width:175px;height:160px}
4. Selanjutnya Cari kode : </head> . Lalu letakkan Kode berikut sebelum atau diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/last.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/Nav%20Mdev.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/Gambar%20Bergantian.js' type='text/javascript'/>
<script type='text/javascript'>
summary_noimg = 500;
summary_img = 300;
img_thumb_height = 130;
img_thumb_width = 110;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0 10px 0 00;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery',
beltclass: 'belt',
panelclass: 'panel',
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUh0-gy1RKUxZxTqSMsA-C79PKxlbiTrFADEU6Wz2wO3B5peIx3KjqiPqjwBWPpFZAqRcT0TbbO96a6Z035Tkvftnu4ktSWEvUc3Y0jrjzx9LVbHyoRfyYmn7sZHT9hokq8MQrs_S2GTFO/s400/NLeft.png', -27, 80], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqWJIur3Ce6LuZ_TEs1wPHRfqsFDBD1a6E7sl6nQ8eq3bHg0m6MxFDhDHs49NtiCgSY_HQUgnvUmvUWxuxbhd2GoCvmDRhMRgWNnAYzugu7poSVJ7xUHNR0EpZ5Zfwd9zzhh5Dc2EuDT23/s400/NRight.png', -12, 80]},
statusvars: ['statusA', 'statusB', 'statusC'],
contenttype: ['inline']
})
</script>
4. dan selanjutnya cari kode : <b:section class='sidebaratas' id='sidebaratas' preferred='yes'> , lalu letakkan Kode berikut diatasnya.
<div id='slideM'>
<div class='stepcarousel' id='mygallery' style='width:80%;height:180px;margin:0 auto;'>
<div class='belt'>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/uniqx-transparent-version-10-design-by.html'><img src='http://i52.tinypic.com/1z5p4xf.jpg'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/junoon-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw_mu6BOlpjv52Hv7Tj6TRc3jozMjs0HRhndJLVUzEeyHCLLfR-JOz3eH7UkYldNfFLt7Q1B_-vAKrWdEj26MqB4ZrH19tj2CMnLnUr_pbnKe16CHBHUE8EeFILZVL64kxxSjMcAMnGbhC/'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/mdev-template-tampilan-klasik-sentuhan.html'><img src='http://1.bp.blogspot.com/-uDccDJ5KkPE/TabSvWyY86I/AAAAAAAABnk/xV28znia9CQ/s1600/Mdev.jpg'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/smart-shadow-template-blogger.html'><img src='http://lh5.ggpht.com/_dfnTVAxeWMI/Sy2ZHIP3tfI/AAAAAAAAC7A/uQgnydj_zNE/smart-shadow.gif'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/black-eleganisme-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Yc97wAOMKKf391YvHYzHjU54WlrnzNFuvOt_M8DmgEbtE7bH-EVN7A9_XlF3HM2QKughvg8uBfE5DB9ZDrFIdqKgaG-8Ahv9q_JDlWcXAcdtX4RKIGzCpcSyqgRshHiJml-KVddy6ic/s400/Black+Eleganisme+Blogger+Template.png'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/03/koleksi-template-terbaru-2011.html'><img src='http://www.bloggertheme.net/wp-content/uploads/2011/02/yalene.jpg'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/css-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPcYSZLsQD2Widtv7h8E8tF4L6Xkvh1UJ3KzhKNztvmwcYCFiLgRQ8P9-y_ild0WuQ2HluFneLcXu3kOaOUgOqKeFBmY_Un3i2R3bUGdLnZ3j9FaacfXxsPVV57VZ7lx-xGDxnSZde-sno/?imgmax=800'/></a>
</div>
</div>
</div>
<p id='mygallery-paginate' style='text-align:center'>
<img data-moveby='1' data-over='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-TGTbgwnO9_VZ_mREYhgaIrQ9ZI3syanml4pasWFH7qFEudXzIKWMfXzlush2R9-DNjR2xQfBSw7PxwfQo4_ATMmVSzsfMW2qiP-LkxoMHVLpEoi0F1e3bwNpdOun-wtrgqMtp526my9/s400/hovclose.png' data-select='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSOGGTqxvwMzfcG7lSmyPomXihgjOcYoe_FEFqsTYGE9-u-XvmpbTIebtnCYPuiQrXfUkPtlvP8TMgh0FiWlql94KzSUdlx7j2g6Ob8f1hy45O8Y37mBUQP0CaEDza2QuzIt7GvhStjBT/s400/close.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi05TpNZKOiJaR6NHgt6-Fs64i6aMU5A6ZDexiSXPR2KQ8gGPxO-2wDPcuOrPizdeiffgQDVYW3XUKDxE0iStkrevIDqvbLC-um-4248W-WZST9FdS0n6nP_Fen2VH7pWeufsMxCUy-YncD/s400/open.png'/>
</p>
</div>
KET:::
- teks yang berwarna orange, URL Gambar anda.. sedangkan
- teks yang berwarna merah, URL gambar anda.
6. Terkhir Preview dulu,. jika berhasil. baru Save template..
Selamat Mencoba.
Ditulis Oleh : Unknown ~ KRJ_Team
Anda sedang membaca sebuah artikel yang berjudul Cara Memasang Image Slider dengan jQuery, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan tulis di kotak komentar
0 komentar "Cara Memasang Image Slider dengan jQuery", Baca atau Masukkan Komentar
Posting Komentar
~~ KOMENTAR HARUS ~~
1. SOPAN
2. BIJAK
3. MASUK AKAL
4. GAK BOLEH KOMENTAR SAMPAH CONTOHNYA . PERTAMAXX !!!
Ty..