Cara Membuat Slideshow dengan jQuery

Cara membuat slideshow di Blogspot dengan Javascript jQuery khususnya pada HTML dan CSS ditemplate blogspot. karena kita ketahui pasilitas penunjang di blogspot kita hanya coding HTML dan style CSS saja (tanpa PHP) dan berikut ini ada sedikit trik javascript jQuery untuk mempercantik custom template Blogspot kita..

Costum template Blogspot

Hal hal pertama yang harus diperhatikan adalah:

1. Untuk diperhatikan, Sebelum melakukan trik ini ada baiknya Anda melakukan Back up template blogspot terlebih dahulu
2. Siapkan juga hosting pihak ke dua untuk menyimpan file-file template seperti gambar yang akan di costum nantinya. Anda bisa menggunakan hosting gratisan untuk file foto/ gambar seperti photobucket, disarankan untuk mengunakan situs picasa saja karena sudah karena Picasa masih kepunyaan dari Group Google juga.
   
3. Mulai bekerja dengan tag xhtml

Pasang slide show javascript jquery

1. Pada Dashboard, masuk menu template lalu pilih edit HTML
2. Klik expand template widget
3. Cari kode </head>  (gunakan ctrl+F untuk mempermudah pencarian) lalu pastekan Javascript jQuery  code dibawah ini, tepat sebelum code  </head>
   <script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’ type=’text/javascript’/>
   <script src= ‘http://inflashover-gallery.googlecode.com/files/jquery-func.js’  type=’text/javascript’/>
   <script src=’http://inflashover-gallery.googlecode.com/files/jquery.jcarousel.pack.js’  type=’text/javascript’/>
4. Cari kode ]]></b:skin> (gunakan ctrl+F untuk mempermudah pencarian) lalu pastekan CSS code dibawah ini, tepat sebelum code  ]]></b:skin>
   *————————————————-
   Slider Section
   ————————————————–*/
   #slider { height:190px; position:relative; overflow:hidden; }
   #slider-holder { width:430px; height:190px; position:relative; overflow:hidden; }
   #slider-holder .jcarousel-clip{ width:430px; height:190px; position:relative; overflow:hidden; }
   #slider-holder ul{ width:430px; height:190px; position:relative; overflow:hidden; list-style-type: none;}
   #slider-holder ul li{ width:430px; height:190px; position:relative; overflow:hidden; float:left; }
   #slider-nav { position:absolute; top:165px; left:350px; z-index:2;}
   #slider-nav a{ font-size:0; line-height:0; text-indent: -4000px; width:10px; height:10px; border:1px solid #003366; background:#0066CC; float:left; margin-right:5px; }
   #slider-nav a:hover,
   #slider-nav a.active { background:#3399CC;}
5. Save template
6. Selanjutnya masuk panel widget, untuk menampilkan slide show tersebut
7. Pilih add new widget, pilih HTML/ Javascript
8. Lalu pastekan code dibawah ini pada widget tersebut
   <div class=’box’ id=’slider’>
   <div id=’slider-holder’>
   <ul>
   <li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieo9vVi6-yIJpZH3INATKJG69Qq8MxR5bGx7o_LuBuzYROazmuqgYH09qZA83YtqE6whddpKyEduh0zqCHrdNtf8L2o1uquwDt7scDeTHaiKEenHQXeVs_hG4CL_3e8eFnZ2d0vgfokj0/s800/slider-if1.jpg‘/></a></li>
   <li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBvkPqeW0e7MBuGa3TUoa97GgNWVXiyIfCrcPrAZ2x4vK-jnD4liavrEBXF20Dm-v_9myReHXtAKTHdnYoI8A6jNRKF9xtjhb5Vr2q2h_tK93dKbFOfG3y7-h5N_vwuT3aB6i0PsEFzjw/s800/slider-if2.gif‘/></a></li>
   <li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik5j6byc4R0vGx1Zrh3jT1v0pMdWFSyiAY0sn_iax1ZaXBu1vg8YGo5Joz3vmUSZacKTvIwDztSmgKoG1vCa_taPAxwgrYNO2nz5pUSCoTAgCMug_App41yMjGYGkunz7QaAh25vCRR8g/s512/slider-if3.jpg‘/></a></li>
   <li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUP5R5gtCkmpcNJnviXdlTLCEhVwqKyyQty-_XOqcwlzv-amvCXxxWawxSKo6wtCDXAmLVEu8PkLCtpRJCYj6Y3YRt1MJig9tya_TldK62KhwbXPO-2HytCzkuN6q7wRQA8VQc6hZ4ENk/s512/slider-if4.jpg‘/></a></li>
   </ul>
   </div>
   <div id=’slider-nav’> <a class=’active’ href=’#'>1</a> <a href=’#'>2</a> <a href=’#'>3</a> <a href=’#'>4</a> </div>
   </div>
   Silahkan Anda ganti tulisan yang berwarna merah dengan alamat URL file gambar anda

Demikian tutorial tentang cara Membuat slideshow di Blogspot dengan Javascript jQuery, semoga trik ini dapat meningkatkan kreasi kita.  Selamat mencoba...

Share this post