Membuat Slide Show Dengan Gambar Pilihan

KAPAK Comunity - Membuat Slide Show Dengan Gambar Pilihan, pada postingan saya coba postingkan requesan atau permintaan dari salah satu teman saya yang baru belajar blogger, dia minta tolong carikan cara membuat slide show gambar yang akan dilettakan di blognya tapi tanpa menngunakan flash atau yang terlalu berat dan akhirnya saya coba berikan cara yang ini saya kira ini tidak terlalu berat dilettakkan di blogger, sedikiti info buat sobat semuanya bahwa di blognya KAPAK Comunity ini kemaren saya postingakan tentang Cara Mengganti Nada Log on Pada Windows XP dan pada kesempatan kali ini saya coba postingkan tentang Membuat slide show dengan gambar pilihan sobat sendiri biar lebih jelas silahkan simak contoh hasilnya dibawah ini atau sobat klik Disini.

Biar tidak panjang lebar silahkan ikuti cara-caranya di bawah ini.

• Dashboard 


• Tata Letak / Rancangan 


• Edit HTML 


• contreng tulisan Exspand Widget Templates

Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard ),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut 

/* CSS easySlider */





#containerSlider {

width:230px;

height:220px;

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:220px;

margin:0 auto;

}

#slider {

margin-left:0;

background:#ccc;

border:1px solid #999;

}

#prevBtn, #nextBtn {

display:block;

height:220px;

left:-20px;

position:absolute;

top:38px;

width:31px

}

#nextBtn {

left:200px;

}

#prevBtn a, #nextBtn a {

background:transparent no-repeat scroll 0 0;

display:block;

height:220px;

width:170px;

}

#nextBtn a {

background:transparent no-repeat scroll 0 0;

}

#slider img {

background:#ccc;

padding:5px;

width:200px;

height:210px;

}

Kemudian cari kode </head> lalu lettakkan kode dibawah ini tepat diatas kode </head> tadi 

<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>



Sekarang langkah yang terahir yaitu melettakkan gambar tadi ke dalam blogger atau web kita, caranya kita tinggal pilih mau ditarus dimana terserah berikut cara memasukkannya.

• Tata Letak / Rancangan 


• klik tulisan Add New Widget atau Tambah Gadget,


• Selanjutnya pilih HTML/Javascript 


• kemudian letakkan kode berikut ini 

<div id="contentSlider">

<div id="slider">

<ul>

<li><a href="http://yourlink here" target=_blank"><img alt="pemandangan 1" src="https://fbcdn-photos-a.akamaihd.net/hphotos-ak-snc7/377433_300377066668952_100000899835759_927853_1469780525_a.jpg" /></a></li>



<li><a href="http://yourlink here"><img alt="pemandangan 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxTjGlJAmjUJv-Ssh66caw4KehmQFIHh4J28rJDRn32Lg3fpC41T2sNSDzawWMzOefa8LDIu6l6M4JvKy0nUF_nE3Q3x88Q9oxeUJTFIuWoASV1Ssx_sxd9Psv_PP3cSP8nXZoKm32O0/s1600/LOGO+SMK+BU.jpg"/></a></li>



<li><a href="http://yourlink here" 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>



Keterangan :

• Kode yang berwarna Pink Merupakan link atau tujuan dari gambar tadi saat di klik nantinya


• Kode yang berwarna Biru Merupakan alamat atau URL dari gambar yang akan ditampilkan


• Kedua kode yang berwarna Pink dan Biru sobat bisa ganti dengan kesukaan sobat sendiri

Sekian dulu postingan kali ini tentang  Membuat Slide Show Dengan Gambar Pilihan semoga bermanfaat bagi kita semua terutama buat temanku yang telah merequest postingan ii.