Cara Membuat SlideShow Photo Berubah-Ubah

Cara Membuat SlideShow Photo Berubah-Ubah

Slideshow Photo adalah Gambar yang bisa berubah dengan sendirinya atau otomatis. Membuat Slideshow ini sebenarya sangat di perlukan karena selain untuk menarik perhatian pengunjung blog juga bisa untuk memudahkan pemilihan artikel.Kebanyakan blog yang menggunakan Slideshow ini adalah blog-blog yang membahas artikel Informasi, seperti Berita, Berita Bola, info komputer, info teknologi, berita Militer, dll.
Nah, untuk anda-anda yang ingin memasang slideshow ini, silahkan ikuti langkah-langkah di bawah ini :

1.Login akun Blog sobat
2.Masuk Ke Template
3.Pilih Edit Html
4.Centang Expandt widget template
5.Cari Kode ]]></b:skin> dan letakkan kode berikut tepat diatasnya

• 
  /* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .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.Selanjutnya Cari kode </head> dan letakkan kode berikut tepat diatas kode </head>

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

7.Save template
8.Selanjutnya Masuk Ke Tata Letak => Tambah Gadget => Pilih Html/Java Script
9.Lalu Masukkan Kode Berikut

• <div id='coin-slider'>
  
  <a href="URL Blog Sobat" target="_blank">
  <img src="link gambar" />
  <span>
  Deskripsi gambar......
  </span>
  </a>
  
  <a href="URL Blog Sobat" target="_blank">
  <img src="link gambar" />
  <span>
  Deskripsi gambar......
  </span>
  </a>
  
  <a href="URL Blog Sobat" target="_blank">
  <img src="link gambar" />
  <span>
  Deskripsi gambar......
  </span>
  </a>
  
  </div> 

10.Save
Oke sampai disini dulu Tutorial dari saya, Semoga Bermanfaat Good Luck And See You ...