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.jQuery Image Slider with Thumbnails
2. HTML/Javascript
3. Berikut adalah kodenya:
<style type="text/css">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.
.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>
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.