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 trikjavascript jQuery untuk mempercantik custom template Blogspot kita..
Costum template Blogspot
Hal hal pertama yang harus diperhatikan adalah:
- Untuk diperhatikan, Sebelum melakukan trik ini ada baiknya Anda melakukan Back up template blogspot 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, disarankan untuk mengunakan situs picasa saja karena sudah karena Picasa masih kepunyaan dari Group Google juga.
- Mulai bekerja dengan tag xhtml
Pasang slide show javascript jquery
- Pada Dashboard, masuk menu template lalu pilih edit HTML
- Klik 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’>Silahkan Anda ganti tulisan yang berwarna merah dengan alamat URL file gambar anda
<div id=’slider-holder’>
<ul>
<li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVLO_CuSeYIGsIiZHsCKbFRqUkqEKtVhzk5JtYNOHEqeui0urizU3yg5dEOVxoUVSJaWvs6cwVhkQfEi6McBtAGqflGtkjYPacDJY2sg06oad3SQ6iTyN3aNRbpunn_YkpyZdi5jGkJTY/s800/slider-if1.jpg‘/></a></li>
<li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicR4tcEtT6QBDGTo3qxgimjfxv0v7H37peOjS7BTb3Vrt0SOgWdwqgMGKaCfjGIOXHOVnr0uzuqMQiMCguqX6EMsCL56auY609orpk_J2_K1Q9aMXLpOol1wblaVoVvzDyJFzrOtAD8Zc/s800/slider-if2.gif‘/></a></li>
<li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvFXKjCsNvpppFzgzCUEn6HR2eXgUQKl3BSFgO1-QCYQ5HujvOoRfVAsMUywjaoMqEmzA7ZKhIU0MPtZGy6A6-A5OZaOFkBFxQpcQmFUoBy_UrHzMiACy0uDb3xEKwzww6El1ScmtKnL4/s512/slider-if3.jpg‘/></a></li>
<li><a href=’#'><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSZ1LpjHW-Brojd3aveMgSEpoeJB3TlUXExv821JbU1XW3vWt4U6s1zb8kGH2sxYo9-Zgp9q7ctOCymx8rYAbgq5Vp_DemvG3H8sgTDakK2z7bemp_8OlcZ5WPMLzYv3EwmQNh2gTqulk/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>
Demikian tutorial tentang cara Membuat slideshow di Blogspot dengan Javascript jQuery, semoga trik ini dapat meningkatkan kreasi kita. Selamat mencoba.......
Post a Comment
Post a Comment
This Blog is DOFOLLOW, Well Please Comment and are not included in spam Thank You..
Cheers,
Admin