Simple Image Gallery Untuk Blogger Dengan Control Options

Saya tidak pernah berpikir saya bisa memiliki Slide dengan loading, cahaya cepat, lucu dan Image Gallery sangat terkendali atau slideshow dengan bermain dan pilihan jeda.

Perlu Anda ketahui slide ini di buat oleh Muhammad.

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

Sekali lagi saya memberi tahu Anda bahwa disini saya hanya melakukan sedikit perubahan pada script ini agar Image slide ini bekerja menjadi lebih sempurna.
Dengan instalasi yang sangat mudah tanpa perlu Edit HTML anda hanya perlu menembahkan Elemen HTML/Java Script di sidebar blogger Anda.
Sebelum kita membahas Cara minginstalnya Simple Image Gallery Untuk Blogger Dengan Control Options ini lebih baik Anda lihat dulu demonya dengan menekan tombol di bawah ini.

Lihat Demo

---

Cara Instalasi Simple Image Gallery Untuk Blogger Dengan Control Options

---

Sekarang kita akan mulai membahas Cara Instalasi Simple Image Gallery Untuk Blogger Dengan Control Options ini, untuk itu silahkan ikuti langkah-langkah berikut.

1. Login ke akun blogger Anda.

2. Pada Dabor klick Tata Letak ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script.

3. Lalu copy kode berikut ini dan paste atau letakkan di dalam elemen HTML/Java Script tadi.

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

4. Simpan.

---

Sekarang hati-hati dalam membuat perubahan ini.

---

• 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.
• Ganti  IMAGE LINK HERE  dengan Url gambar Anda sendiri
• Ganti # dengan link atau url yang ingin Anda tambahkan ke gambar tertentu.
• 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.
• Jika Anda ingin mengubah dari auto play gambar maka cukup mengubah true menjadi false.
• Untuk mengubah interval waktu antara slide selanjutnya dan sebelumnya silahkan edit  2500.
• Untuk mengubah font dari deskripsi silahkan rubah calibri dengan nama font sendiri, untuk melihat macam-macam font huruf silahkan klick DISINI.

---

Apa Selanjutnya ???

---

Dari kode di atas masih ada kode yang bisa Anda rubah sesuai dengan selera Anda, tapi saya tidak bisa mempostingkan semuanya, Jika Anda mengetahui Java Script pasti Anda tidak akan kesulitan, tapi bagi Anda yang kesulitan silahkan tinggalkan pertanyaan Anda, saya akan secepat mungkin membalasnya.

---

Finish !!!

---

Bagaimana apakah Anda berhasil menerapkannya pada blog Anda? silahkan tinggalkan tanggpan atau komentar Anda tentang postingan atau article di atas!