Latest: Download Free Desktop Wallpapers of Chef Loony! | Series: AuthorRank? | Download MBT eBooks!

jQuery Image Slider (wow slider) dengan Thumbnail untuk Blogspot

jQuery Image Slider (wow slider) dengan Thumbnail untuk Blogspot


Di sini saya datang dengan slider lain gambar yang mengagumkan untuk blogspot. Ini adalah 'jQuery Image Slider dengan Thumbnail' diciptakan oleh WOWSlider . Saya melakukan sedikit penyesuaian untuk membuat blogger ramah dengan hormat untuk wowslider. Lihat demo di bawah ini.




Mari Langkah ke depan untuk menambahkan ini jQuery Image Slider dengan Thumbnail untuk Blogspot

1 Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
2 Pilih HTML / Javascript
3 Copy kode di bawah dan paste di atasnya.  
<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> <div class="slider-box"> <div id="slider-wrapper"> <div id="jslider-container"> <div class="jslider_images"> <ul> <li><a href="http://dimpost.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> <script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script> 
 
 
SELAMAT MENCOBA ,!!!

Tidak ada komentar:

  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!