Ok sobat berikut ini adalah image slider lainnya yang dapat dibagikan oleh seocips.com setelah sebelumnya telah membagikan slider-slider seperti ; jquery image crousel slider dan juga slider blog versi 6 dan slider gambar dengan efek quake atau biasa disebut slider quake untuk blogspot. Sebenarnya ada banyak macam slider seperti slider otomatis artikel terbaru yang sudah dibahas sebelumnya dan juga image slider dimana sobat harus memasukan gambar yang sobat inginkan ke dalam slider tersebut.

LIVE DEMO Wow Slider !

Sobat dapat membuat tampilan template blog sobat menjadi lebih cantik dengan menggunakan slider-slider, ini untuk menambah daya tarik agar pengunjung tertarik untuk melihat gambar yang ditunjukan oleh slider tersebut.

  • Slider For Blog 1A boat with beautiful sunset.
  • Slider For Blog 2
  • Slider For Blog 3 Tree in field with blue sky.
  • Slider For Blog 4 Amaizing sunrise moment
  • Slider For Blog 5
  • Slider For Blog 6
Slider For BlogSlider For BlogSlider For BlogSlider For BlogSlider For BlogSlider For Blog

jQuery Image Slider with Thumbnails


1. Blogger Dashboard > Layout > Add a Gadget
2. HTML/Javascript
3. Berikut adalah kodenya:
<style type="text/css">
.slider-box { background:none repeat scroll 0 0 #FAFAFA; border-radius:5px 5px 5px 5px; box-shadow:0 0 3px #333333; margin:0 auto; width:675px; overflow:hidden; }
#slider-wrapper { margin:0 auto; padding:10px; }
#jslider-container { border:2px solid #FFFFFF; max-width:550px; position:relative; text-align:left; z-index:90; }
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box"><div id="slider-wrapper"><div id="jslider-container"><div class="jslider_images"><ul><li><a href="http://blog.spezer.net"><img src="http://1.bp.blogspot.com/-8PTU1PEcmLI/Uc2n85UpHUI/AAAAAAAAB4k/j6NY9ZqIyRY/s550/sample1.jpg" title="Sunset"/></a>A boat with beautiful sunset.</li><li><a href="#"><img src="http://2.bp.blogspot.com/--GmwV2nAsUQ/Uc2oEd7wNBI/AAAAAAAAB40/ETmQqqlBgvk/s550/sample2.jpg" title="Rainbow"/></a></li><li><a href="#"><img src="http://1.bp.blogspot.com/-6g4P9qoMRmI/Uc2oOy08cOI/AAAAAAAAB48/XZ09I9967yU/s550/sample3.jpg" title="True Nature"/></a>Tree in field with blue sky.</li><li><a href="#"><img src="http://4.bp.blogspot.com/-gHD47bEFHb8/Uc2oBkNydjI/AAAAAAAAB4s/pT6e5eMXCCc/s550/sample4.jpg" title="Sunrise""/></a>Amaizing sunrise moment</li><li><a href="#"><img src="http://4.bp.blogspot.com/-_Fl22hwvf4g/Uc2oRuUPfOI/AAAAAAAAB5M/-paJ0C3ecTw/s550/sample5.jpg" title="CAR in HDR Nature"/></a></li><li><a href="#"><img src="http://3.bp.blogspot.com/-cOF07FfXZ0I/Uc2oQ5cFN2I/AAAAAAAAB5E/RTzFpK-6oMM/s550/sample6.jpg" title="Sunshine"/></a></li></ul></div><div class="jslider_thumbs"><div><a href="#" title="Sunset"><img src="http://1.bp.blogspot.com/-EV9QJIgCZVs/Uc2sZ302fAI/AAAAAAAAB5c/aw2ncIBTWPI/s85/sample1.jpg"/></a><a href="#" title="Rainbow"><img src="http://4.bp.blogspot.com/-ScQ2WF7eUb4/Uc2saKrS2_I/AAAAAAAAB5g/QacTeCtKU-c/s85/sample2.jpg"/></a><a href="#" title="True Nature"><img src="http://1.bp.blogspot.com/-zQzvkfDsyzg/Uc2sbpceU3I/AAAAAAAAB5s/PN7wNSrydbM/s85/sample3.jpg"/></a><a href="#" title="Sunrise"><img src="http://3.bp.blogspot.com/-R4gOTYCU9dQ/Uc2sbxFqTqI/AAAAAAAAB50/ESHZD7VlnXY/s85/sample4.jpg"/></a><a href="#" title="CAR in HDR Nature"><img src="http://1.bp.blogspot.com/-b5dbnH0-dMg/Uc2scRDvV4I/AAAAAAAAB54/4P9RYqtJdDM/s85/sample5.jpg"/></a><a href="#" title="Sunshine"><img src="http://3.bp.blogspot.com/-L8rLW2XCv7I/Uc2sdkpcx8I/AAAAAAAAB6E/uRfT9gYb5rM/s85/sample6.jpg"/></a></div></div></div></div></div>
Simpan template dan lihat hasilnya di blog sobat. bagaimana sob? apakah sobat berhasil membuat slidernya? ok sob sekian untuk postingan saat ini dan jangan lupa lihat artikel terbaru seocips yang lainnya. ok semoga bermanfaat.
3 Komentar untuk "Wow Slider with thumbnails For Blog"

Gan ajarin donk cranya menambahkan wow slider yg baru kita buat sendiri, kedalam blog...

masbro..
cara munculkan slide seperti contoh itu di postingan gimana yaa?
maksudnya slide itu muncul di postingan bukan di widget?
thanks

Masukan saja kode diatas kedalam postingan.