22 Feb 2013

cara membuat slide show

Cara Membuat Slideshow Pada Blogger?
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/AVvXsEiVBd5wQEMEMr5wKUGAzXQTPMQ8AUlHAxbVlCmPEWVNNnSDA2BkAXCtgBgcQBC3g5OufcJtWu3bIKzcGElB-O3VpV1PKg5SY2SD4NlxVYAL-pFFqZNNgpvQktPg2z4GJQkDt-2cjwgQ5yk/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..
 readmore