Membuat Slider Sendiri Di dalam Blogspot

   Hallo semua para blogger yang lagi,ngenewbie......,saya kali ini akan sedikit memberikan tips tentang tata cara membut SLDER/SLIDING yang contohnya sama di www.capolisma.co.tv lihat dulu keren bukan,namun disini saya hanya bisa memberikan tips sederhana di mana slider bisa dipasang di mana saja,cukup gampang juga cara membuatnya,maka dari itu kita lihat bersama-sama caranya cekidot..........


Langkah pertama selalu menuju Rancangan => Edit HTML => jangan Lupa selalu Backup Dulu template sobat agar apabila ada sesuatu yang error nantinya tidak bingung => Centang kolom"EXPANT TEMPLATE WIDGET"

Langkah selanjutnya silakan cari kode ]]></b:skin> (gunakan Ctrl+F ),setelah ketemu tinggal letakkan kode HTML berikut tepat diatas kode tersebut.

/* CSS easySlider */


#containerSlider {
width:210px;
height:110px;
margin:0 40px;
padding:0;
position:relative;
}
#prevBtn, #nextBtn {
display:block;
margin:0;
overflow:hidden;
padding:0;
text-indent:-8000px;
}
#slider ul, #slider li {
list-style:none;
margin:0;
padding:0;
text-indent:0;
}
#slider, #slider li {
overflow:hidden;
width:210px;
height:110px;
margin:0 auto;
}
#slider {
margin-left:0;
background:#ccc;
border:1px solid #999;
}
#prevBtn, #nextBtn {
display:block;
height:34px;
left:-20px;
position:absolute;
top:38px;
width:31px;
}
#nextBtn {
left:200px;
}
#prevBtn a, #nextBtn a {
background:transparent url(http://2.bp.blogspot.com/-sy3zWYyTWLg/TWpAOl7v1II/AAAAAAAAAt4/GZ4veAPRe_Q/s1600/Arrow-Left%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0;
display:block;
height:34px;
width:31px;
}
#nextBtn a {
background:transparent url(http://1.bp.blogspot.com/-ri5ctN5jxp4/TWpARdezqDI/AAAAAAAAAuA/dfmkoYxhjew/s1600/Arrow-Right%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0;
}
#slider img {
background:#ccc;
padding:5px;
width:200px;
height:100px;
}



Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/easySlider1.5.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

kalau sudah Simpan sob,template sobat tinggal Klik aja "SAVE"
Ets perjuangan sobat belum selesai sekarang kita lanjut ke langkah selanjutnya yang lebih sederhana dari pada itu......

Pilih ELEMEN DASAR => Tambah WIDGET => HTML/JAVASCRIPS

 

 GB : 1

 

GB : 2

lalu sobat COPAS KODE berikut ini.........

<div id="contentSlider">
<div id="slider">
<ul>
<li><a href="ALAMAT LINK YANG DITUJU" target=_blank"><img alt="pemandangan 1" src="http://3.bp.blogspot.com/-w5seRbe2tUg/TWoyA1W3pJI/AAAAAAAAAtQ/aRE-mp374oU/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B4.jpg" /></a></li>

<li><a href="ALAMAT LINK YANG DITUJU"><img alt="pemandangan 2" src="http://1.bp.blogspot.com/-XOxtNnKWuMA/TWoxnu0KhuI/AAAAAAAAAtA/Ihx2MMDHKZo/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B2.jpg"/></a></li>

<li><a href="ALAMAT LINK YANG DITUJU" target=_blank"><img alt="pemandangan 3" src="http://2.bp.blogspot.com/-V8sTo8mkTGs/TWoxiV2oGhI/AAAAAAAAAs4/sBbrwSA5hl8/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B1.jpg"/></a></li>

</ul>
</div>
</div>


Lalu SIMPAN deh,sobat bisa mengedit gambar diatas menurut keinginan sobat (kode gambar pada huruf bercetak miring)...sekarang sobat sudah bisa membuat slider sederhana sendiri

Keterangan :
   
    *SOBAT HANYA BISA MERUBAH TULISAN TEBAL DI ATAS SAJA.
    *SOBAT BISA MENGGANTI GAMBAR DIATAS SESUAI KEINGINAN SOBAT DENGAN   CARA MEMASUKAN URL LINK GAMBAR SOBAT
   

Nah gimana mudah bukan cara membuat slider ternyata,tutorial di atas emang sengaja saya cari dari blog temen Spesial Thank for Pelajaran-blogs.blogspot.com