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.

Kamu dapat membuat tampilan blog kamu menjadi lebih menarik dengan memasang gambar slider di blog kamu, ini untuk menambah daya tarik agar pengunjung tertarik untuk melihat gambar dan link yang di tujuh oleh slider tersebut.

Ada banyak macam slider yang bisa kamu pasang di blog kamu, 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.

Wow Slider with thumbnails 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://www.seocips.com"><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>



ok sob sekian untuk postingan kali ini dan jangan lupa lihat artikel terbaru seocips yang lainnya. ok semoga bermanfaat.
5 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.

cara buat biar responsive gimana gan?