Pasang Slideshow di Blogspot dengan Javascript jQuery

Oke, lngsung saja tutorial cara pasang slideshow di Blogspot dengan Javascript jQuery tapi btw eniwe busway, ternyata sudah lama juga yah ga posting. Padatnya skejul akhir akhir ini, tugas kuliah yang seabreg, jadwal UTS, serta karena banyaknya mata kuliah yang harus remidi juga alias perbaikan pas UTS kemarin termasuk nilai UTS mata kuliah kalkulus yang ancur ancuran . Huuuft… Tambah lagi yang akhir akhir ini sedang dihantui oleh ccoding satu ini “Javascript jQuerry” cara pasang slideshow di Blogspot dengan Javascript jQuery slideshow di blogspot kususnya pada HTML dan CSS ditemplate blogspot. (hohoho) yap, mungkin saking asyiknya ngulik coding template di blogspot kali yah, salah satu penyebab nilai UTS saya ancur ancuran , hehehe (alibi sajah). Jujur saja, saya termasuk orang baru dalam dunia blogspot loh. Ehh, pas pertama terjun dan coba coding templatenya ternyata seru juga. 2 kata deh, mudah dan simple karena di blogspot kita hanya coding HTML dan style CSSnya saja (tanpa PHP) dan sedikit sentuhan javascript jQuery untuk mempercantik custom templatenya.

Costum template Blogspot

Hal hal pertama yang harus diperhatikan adalah:

Penting, untuk Back up template blogspotmu terlebih dahulu
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
Mulai bekerja dengan tag xhtml

Pasang slide show javascript jquery

Pada Dashboard, masuk menu template lalu pilih edit HTML
Centang expand template widget
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’/>
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;}
Save template
Selanjutnya masuk panel widget, untuk menampilkan slide show tersebut
Pilih add new widget, pilih HTML/ Javascript
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/AVvXsEgwdG_6pl8k3IAom6O1PG09ALzvrhP93hA14T9cBYzVML8TqkXG7ao_g2HWIXLgl8krll9Vbi6-848HxlGRABxKvK1APNinOHxOu7vOcXl1GRs1QfqoUo7U7GoZOeSMOxitPhF67iWRdgw/s800/slider-if1.jpg‘/></a></li>
<li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEJvP8MMUqRTmOv5R4NqJIIUIb5mR7ZRhHhinTz9VZeo6QFpaHiJEgsHT5ANkw1iHwTYRyV4YWSZ0mCFkohABHrpa8ZrS8xQ09surasibvlAAE8V6cqqERnMK99brgrcWgAMlxV1jh8po/s800/slider-if2.gif‘/></a></li>
<li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisrlAIGANwzSEnTJD7c_2VE9VgB5qatH-ML_a7oQp8RgsCCWu04egQKw1Cb6nZRFabWnRhGbUB2NguJSUBPsbwyBbfjxEvXpP4v2XHIM5oauuAbF6CihFj2roCwHa7Gg_a_sLyLn2Bkjs/s512/slider-if3.jpg‘/></a></li>
<li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLr5G7bqMaRqZsmqk5-1N-1k-zQhxD8hLqPD1IAeM1goVkkCXJOy0SuGf2RxyPSlaaRNiGH1tjeX_9OqzLd_XYMutWa4md9hWmH_pQIoekEE3ORhr3g5ta5_mvSvXF987wmRnIeVSnQVA/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