Kali ini kita akan membuat Slideshow yang menarik dan sangat mudah untuk diterapkan di blogspot.berikut langkah dan cara pemasangannya.
- Masuk ke akun blog sobat.
- Dari dasbor klik Rancangan
- Tambag Gadget => Html/ JvaScript
- Simpan kode di bawah ini.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script><script type="text/javascript">$(document).ready(function() {$('#BUS-slider').s3Slider({timeOut: 3000});});</script><style>#BUS-slider {width: 550px; /* Keep it 20px-40PX greater than ACTUAL Image size */height: 335px;position: relative;overflow: hidden;margin-left: 0;}#BUS-sliderContent {width: 550px;position: absolute;top: 0;margin-left: 0;}.BUS-sliderImage {float: left;position: relative;display: none; top: 0;border:1px solid #ddd;}.BUS-sliderImage span {position: absolute;font: 10px/15px sans-serif,Arial, Helvetica;padding: 10px 10px;background-color: #000;color: #fff;filter:'alpha(opacity=70)';-moz-opacity: .5;-khtml-opacity: .5;opacity: .5;text-align:justify;}.BUS-sliderImage span a {text-decoration:underline;color:#FE6602;}.clear {clear: both;}.top {top: 0;left: 0;width: 550px !important;height: 70px;}.bottom {bottom: 0;left: 0;width: 550px !important;height:90px;}.left {left: 0;top: 0;width: 110px !important;height: 335px;}.right {right: 0;bottom: 0;width: 110px !important;height: 315px;}</style><div id="BUS-slider"><ul id="BUS-sliderContent"><li class="BUS-sliderImage"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0kUlnBmYZGa07diAwbM03iCqLq9gPo3odC-7KS7lfuvf_YvJn4QtMaJxuU5jeEbeuiK5EmT21EP7nQM0HYDjP6ap3qv51QHuBfO29NNnpJSRc4vCDVlZUbUKZswvHftJikiFe8FWsIS8/s144-p/froggy-01.jpg"width="550"height="335"/><span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span></li><li class="BUS-sliderImage"><a href="#"><img src="https://lh6.googleusercontent.com/-tMlCuLM8W9U/T1ePb8zPZ8I/AAAAAAAAWYA/Ts4L8-EKRLw/s144-p/liquidmoon.jpg"width="550"height="335"/><span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span></li><li class="BUS-sliderImage"><a href="#"><img src="https://lh5.googleusercontent.com/-Jj2icsmjKU0/TRZIEbg1DrI/AAAAAAAAPII/W3qlBQN8EEY/s144-p/DSC_6188.jpg"width="550"height="335"/><span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span></li><li class="BUS-sliderImage"><a href="#"><img src="https://lh5.googleusercontent.com/-qaIEtFbC4Ww/TRo3lpIItlI/AAAAAAAAAbY/PrrDCpaGpUM/s144-p/DSC_9636.jpg"width="550"height="335"/><span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span></li><li class="BUS-sliderImage"><a href="#"><img src="https://lh3.googleusercontent.com/-3N2mUk21gII/TQvDoVM-W9I/AAAAAAABNp8/YJKXUVO6Sw0/s144-p/Lovas%25252010%25252004%252520136-2.jpg"width="550"height="335"/><span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span></li><div class="clear BUS-sliderImage"></div></ul></div><br/>
- Nah sobat lihat kode yang saya cetak tebal seperti ini width="550"height="335" itu yang harus sobat ganti sesuai dengan ukuran Widget dimana sobat letakan kode ini, sobat bisa bermain-main mengganti kodenya
- Untuk mengatur cepat dan lambatnya slide sobat ganti kode berikut timeOut: 3000 Semakin tinggi nilainya semakin lambat slide-nya dan sebaliknya.
- untuk kode yang berwarna ungu (#) sobat ganti dengan link tujuan.
- Nah untuk kode yang berwarna biru sobat ganti sesuai dengan judul gambar dan deskripsi gambar.
- Jika sobat ingi menambahkan gambar slideshownya sobat tinggal tambahkan kode di bawah ini.
- Warna merah adalah url gambar. silahkan ganti dengan gambar anda.
<li class="BUS-sliderImage"> <img src="https://lh3.googleusercontent.com/-3N2mUk21gII/TQvDoVM-W9I/AAAAAAABNp8/YJKXUVO6Sw0/s144-p/Lovas%25252010%25252004%252520136-2.jpg"width="550"height="335"/> <span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span></li>
- Simpan kode di atas sebelum kode paling bawah dari kode di atas yaitu kode.
<div class="clear BUS-sliderImage"></div> </ul> </div><br/>
Selesai sundah tutorial kali ini cara membuat slideshow pada blogger,semoga bermanfaat..