Slide Post Images Dengan Java Script

Pernak Pernik Blogger menambah satu koleksi lagi yaitu Slide Foto / Gambar, buat para Sobat Blogger yang mau mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

DEMO SLIDE POST IMAGES

* Langkah yang Pertama
@- Login dahulu seperti biasa dengan ID Blog milik Sobat.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Copy Kode CSS dibawah ini kemudian Paste di atas Kode ]]></b:skin>

#coverslide{
position:relative;
width:220px;
background:#1c1c1c;
float:left;
height:220px;
margin-top:5px;
}
#slider{
width:200px;
height:200px;
padding:0px 0px;
margin:10px 10px;
visibility: hidden;
background:#fff;
}
#slider ul{
margin:0px 0px;
padding:0;
list-style:none;
}
#slider li{
width:200px;
height:200px;
background:#000;
overflow:hidden;
margin:0px 0px;
}
.slider-position {
position:relative;
}

@- Lalu cari Kode : </head>
@- Kemudian Copy Kode di bawah ini lalu Paste di atas Kode </head>

<script src='http://iyang.googlecode.com/files/1.2.6.js' type='text/javascript'></script>
<script src='http://iyang.googlecode.com/files/imgslide.js' type='text/javascript'></script>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx (document).ready(function(){
$jx('#slider').css('visibility','visible');
$jx("#slider").easySlider({auto: true, continuous: true});})</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

@- Jika sudah jangan lupa Klick SAVE TEMPLATES / SIMPAN TEMPLATE
@- Langkah yang pertama selesai sudah.

* Sekarang Lanjut Kelangkah yang Kedua
@- Klik Tab Page Element / Elemen Halaman
@- Klik Add Widgate / Tambah Gadget
@- Klik Pilih Yang HTML / JavaScript
@- Lalu Copy Kode dibawah ini dan Paste pada Widgete / Gadget yang tadi barusan Sobat siapkan.

<div id='jqueryslider'>
<div id='coverslide'>
<div id='slider'>
<ul>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
</ul>
</div></div></div>

@- Kemudian SAVE /SIMPAN
@- Selesai sudah langkah yang kedua.
@- Yang Saya tandai dengan warnan MERAH adalah Cover Luar Slide dan yang berwarna HIJAU adalah Cover Dalam Slide.
@- Untuk soal Tinggi dan Lebar Cover Slide silahkan Sobat Blogger sesuaikan menurut kebutuhan.
@- Silahkan lihat hasilnya dan sukses selalu buat para Sahabat Blogger semua.