Cara Membuat Slide Image Gallery Pada Blog

Fama Gulz kali ini ingin membagikan Cara Membuat Slide Image Gallery Pada Blog. Slide ini memiliki loading yang relatif cepat, lucu, dan Image Gallery ini sangat terkendali atau slideshow dengan memiliki tombol pilihan jeda.

Slide ini menggunakan Jquery, JavaScript dan CSS dan HTML dan  mampu membuat widget blogger yang kompatibel yang akan menampilkan posting fitur, foto, gambar dll dengan cara yang indah.

Cara membuat nya sangat mudah,,sobat tinggal instal melalui  Edit HTML saja, dan tambahkan Elemen HTML/Java Script di sidebar blogger sobat.

Klik buka untuk melihat kodenya:

<style type="text/css">
#simplegalleryOW {
    //CSS for sample Gallery
position: relative;
    visibility: hidden;
    border: 5px solid black;
    margin: auto;
}

#simplegalleryOW .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="https://otowebsite-blogspot.googlecode.com/svn/trunk/image-gallery.js">
</script>

<script type="text/javascript">
var mygalleryOW=new simpleGallery({
 wrapperid: "simplegalleryOW", //ID of main gallery container,
 dimensions: [300, 200], //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="simplegalleryOW"></div>​

1. Pertama mengubah ukuran semua gambar Anda ke dimensi tetap = Untuk mengubah dimensi dari slide Anda hanya perlu merubah kode 300, 200 di mana 300 adalah lebar dan 200 adalah tinggi.
2. Ganti  IMAGE LINK HERE  dengan Url gambar sobat sendiri
3. Ganti # dengan link atau url yang ingin sobat tambahkan ke gambar tertentu.
4. Ganti IMAGE DESCRIPTION HERE dengan beberapa deskripsi tentang foto. Ini gambaran yang gambar akan muncul di bagian atas ketika user melayang kursor mouse di atasnya. Jika Anda tidak ingin menambahkan deskripsi apapun maka cukup menghapus IMAGE DESCRIPTION HERE.
5. Jika ingin mengubah dari auto play gambar maka cukup mengubah true menjadi false.
6. Untuk mengubah interval waktu antara slide selanjutnya dan sebelumnya silahkan edit  2500.
7. Untuk mengubah font dari deskripsi silahkan rubah calibri dengan nama font sendiri, untuk melihat macam-macam font huruf silahkan klick DISINI.

Okey,,cukup sekian Tips-Trick Blog kali ini Cara Membuat Slide Image Gallery Pada Blog.

Semoga Bermanfaat.