Minggu, 02 Desember 2012

Cara Membuat Slideshow Pada Blogger


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


Artikel Terkait:


Tidak ada komentar:

Posting Komentar

Komentator Blog Ini