2 Cara Mudah Membuat Slideshow Foto di Website

Sang Alang Penikmat Senja 9:35 AM
Blog atau situs yang menarik merupakan dambaan setiap Blogger atau Webmaster. Salah satu widget atau script yang membuat blog atau website terlihat manis dan cantik adalah dengan dimunculkannya slideshow foto diatas postingan blog.

Penggunaan dan peletakan yang tepat kiranya akan membuat blog menjadi terlihat interaktif dan berwarna. Berikut 2 cara mudah membuat tampilan slideshow foto pada blog Anda:

1. CARA PERTAMA
  • Go to Blogger Dashboard > Layout
  • Add a Gagdet > HTML/JavaScript
  • Copy dan Paste-kan script kode berikut:
<style type="text/css"> #simplegallery2 { //CSS for sample Gallery position: relative; visibility: hidden; border: 5px solid black; margin: auto; } #simplegallery2 .gallerydesctext { //CSS for description DIV of Example 1 (if defined) text-align: left; padding: 2px 5px; font-family: calibri; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://code.helperblogger.com/image-gallery.js"> </script> <script type="text/javascript"> var mygallery2=new simpleGallery({ wrapperid: "simplegallery2", //ID of main gallery container, dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly imagearray: [ ["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"] ], autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] persist: true, fadeduration: 1000, //transition duration (milliseconds) oninit:function(){ //event that fires when gallery has initialized/ ready to run }, onslide:function(curslide, i){ //event that fires after each slide is shown //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML) //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc) } }) </script> <div id="simplegallery2"></div>
PENJELASAN:
  • Pertama ubahlah ukuran semua gambar Anda ke dimensi tetap.
  • Untuk mengubah dimensi, ubahlah kode diatas 400 dan 265 di mana 400 adalah lebar dan 265 adalah tinggi (warna hijau).
  • Ganti IMAGE LINK DISINI dengan gambar Anda sendiri (warna biru).
  • Ganti # dengan link yang ingin Anda tambahkan dengan gambar tertentu.
  • Ganti IMAGE DESCRIPTION HERE dengan beberapa deskripsi tentang foto. Deskripsi gambar ini akan muncul dibagian atas ketika user melayangkan kursor mouse di atasnya. Jika Anda tidak ingin menambahkan keterangan apapun maka hanya menghapus KETERANGAN GAMBAR DI SINI.
  • Jika Anda ingin mengubah gambar otomatis, ubahlah kata true menjadi false.
  • Untuk mengubah interval waktu antara slide selanjutnya dan sebelumnya editlah angka 2500.
  • Untuk mengubah font deskripsi, ubahlah font Calibri dengan pilihan font Anda sendiri.
  • Jika sudah selesai silakan simpan Widget Template anda .
2. CARA KEDUA

Copy paste kode berikut dan simpan di Widget blog Anda:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>
  • Ganti URL Foto 1 sampai Foto 4 dengan URL foto yang sudah dihost atau diupload (warna biru).
  • Anda bisa juga menyesuaikan tinggi (height) foto  dan lebarnya (weight) (warna hijau).
  • Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
  • Simpan jika sudah selesai.
Semoga Bermanfaat...