Cara Mudah Widget Membuat Slide Show Keren di Blog

Slideshow adalah cara terbaik untuk memamerkan foto Anda, posting fitur, gambar dan materi lain.

Ini adalah slider sederhana gambar dengan banyak pilihan seperti dimensi menyesuaikan, play, pause, interval antara berikutnya dan sebelumnya slide dan beberapa naskah options.The lain galeri ini diambil dari dynamicdrive dan saya telah membuat beberapa perubahan sehingga Anda dapat dengan mudah menambahkannya ke instalasi blog. Anda adalah salah satu langkah instalasi, Anda hanya perlu copy dan paste kode dalam bagian isi HTML / JavaScript widget yaitu Anda dapat menambahkan sebagai HTML / JavaScript widget.

Cara Mudah Widget Membuat Slide Show Keren di Blog :

1. Go to Blogger Dashboard > Layout

2. Add a Gagdet > HTML/JavaScript

3. Paste the below code,

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

KETERANGAN :

1. Pertama mengubah ukuran semua gambar Anda ke dimensi tetap.
2. Untuk mengubah dimensi geser hanya kode ini dalam kode di atas 400 dan 365 di mana 400 adalah lebar dan 265 adalah tinggi.
3. Ganti IMAGE LINK DISINI dengan gambar Anda sendiri
4. Ganti # dengan link yang ingin Anda tambahkan dengan gambar tertentu.
5. Ganti IMAGE DESCRIPTION HERE dengan beberapa deskripsi tentang foto. Gambar ini decription akan muncul di bagian atas ketika user melayang kursor mouse di atasnya. Jika Anda tidak ingin menambahkan keterangan apapun maka hanya menghapus KETERANGAN GAMBAR DI SINI
6. Jika Anda ingin mengubah bermain auto gambar kemudian hanya mengubah true menjadi false
7. Untuk mengubah interval waktu antara slide selanjutnya dan sebelumnya kemudian edit 2500
8. Untuk mengubah font deskripsi kemudian mengubah Calibri dengan nama font sendiri.
9. Jika sudah selesai silakan simpan template anda .

Sumber : http://cukuppas.blogspot.com