Wow Slider with thumbnails For Blog

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.

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.