Cara membuat Slider dengan jQuery diBlog

Sehubungan dengan permintaan dari sobat blogger Nias yang menanyakan bagaimana cara membuat slide gambar atau foto pada blog. Dalam fungsi kita tidak bisa menggunakan marquee pada HTML, karna pada dasarnya fungsi marquee hanya sebatas objek yang bergerak atau berjalan. Untuk contohnya anda
bisa lihat pada blog sobat kita di hombobatu.blogspot.com.

Nah, bagaimana cara membuatnya? disinilah kita akan membahas langkah pengerjaannya. Langsung saja, bagi anda sobat-sobat blogger yang juga mencintai kopi untuk menemani anda dalam bekerja, silahkan mempersiapkan dulu sebelum kita melanjutkan tutorial ini.

Baik, sekarang silahkan ikuti langkah dibawah ini.
1. Seperti biasa, silahkan login terlebih dahulu diblog anda
2. Masuk pada menu design/rancangan dan pilih menu edit HTML
3. Perlu anda ingat sebelumnya backup dulu template blog anda dengan "Download template lengkap"
4. Silahkan anda centagkan "Expand Template Widget"
5. Cari kode ]]></b:skin> dan copy paste script code dibawah dan letakkan di atas code ]]></b:skin>

.coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

6. Setelah itu, cari code </head> dan letakkan code dibawah ini diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 500, navigation: false, delay: 5000 }); }); </script>

Untuk ketarangan tulisan yang berwarna biru, adalah ukuran lebar slide. Silahkan anda ganti sesuai dengan lebar penempatannya pada tampilan blog anda biar kelihatan rapi.

7. Setelah selesai, silahkan simpan template anda.
8. Ops, belum selesai ternyata. Silahkan masuk pada menu design/rancangan dan plih menu tata letak atau eleman laman
9. Tambahkan widget dengan memilih HTML/Javascript dan copy-paste code berikut kedalamnya..

<div id='coin-slider'>
<a href="url tujuan" target="_blank">
        <img src="url link gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>
 
<a href="url tujuan" target="_blank">
        <img src="url link gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>
<a href="url tujuan" target="_blank">
        <img src="url link gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>
</div>

Untuk text atau code yang berwarna biru, silahkan anda ganti dengan alamat url tujuan bila anda mengklik gambar sedangkan warna hijau silahkan anda ganti dengan url gambar itu sendiri.

10. Setelah selesai silahkan SIMPAN, dan lihat hasilnya

Selamat mencoba.

Artikel Terkait