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.



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!

Posting Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top