Pasang Slideshow di Blogspot dengan Javascript jQuery

Costum template Blogspot

Hal hal pertama yang harus diperhatikan adalah:

1. Penting, untuk Back up template blogspotmu 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, saya sarankan sih pakai picasa saja karena sudah bawaan dari google, sama halnya blogger.com
3. Mulai bekerja dengan tag xhtml

Pasang slide show javascript jquery

1. Pada Dashboard, masuk menu template lalu pilih edit HTML
2. Centang 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/AVvXsEgatqrwEk-cxZQeTouG4EUrlLf0rvX-ytwDqOLvldvfkjZGaIdCeNKNAkHzPXPpfI-3pMYBYz4l4Fc3S0bA9BSOWQsG2QsHL4FdHpUGyd8DDPnNNVGzE2u98ubvPgdCf91Z1c5gQWfW9ao/s800/slider-if1.jpg‘/></a></li>
   <li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIPMw1buORNwHvyOZdcK8Wjx_orCLP6C9ncH0YWT9lVLIGkW9jaGXywsMl3jzLQVyf-vKdVwz6i8tkwkYK484jXwDRVwhFytu2btQVWfWI67PIH0Ysta7bJvjBAiRNvXUoCMWhyq0cIEI/s800/slider-if2.gif‘/></a></li>
   <li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEUEGGvtdaqoUskZBkTqMYJebUEof6vrTw5sqtQ6HmXlsmQRsFjXJG7bGM_e2NEdiBsV5p3TzELUhE_u-gnJU5GPe21eWnMzZnnuuI3FqNSZyH-kZtEiZjhnivJmC4h9q5_cHwcBFZJRU/s512/slider-if3.jpg‘/></a></li>
   <li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvobZEOuJ60dh-kutM62AqlTjH3fl-LKv3aOJU-TROhjPO71OnWr_HcVhvliBr6MGFSaGoV7CgsYUVrA5CCjbRIE6x_fpQEhGjVSkiP_KWpSRWOsn_32Z_IxnyUawh7QLXlOUemiz_q2Q/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>
   Rubah tulisan yang berwarna merah dengan alamat URL file gambar anda

Nah, demikian tutorial tentang cara pasang slideshow di Blogspot dengan Javascript jQuery, semoga bisa membantu sobat dalam berkreatifitas lagi.