Membuat Image Slider Tumbnail

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

        DEMO

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. Salin kode di bawah ini 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXEVe6UXGMH7B2lBWhyHQ56S2t9MmNwr_ANxhego8cbVkU6keqTDvQyK-w8JhnlSGIQQ75edOjM4QEdebI6gI3aXztgLkUUkI_W-R2Zk0RauCvTfiEqkEUCmrY24U-wx8mbI55WfTk42g0/s550/sample1.jpg" title="Sunset"/>
           </a>A boat with beautiful sunset.</li>
           <li><a href="#">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrpwTN-W0Wr0Fnkf4y6uAIEHquN2KAg1tgh-pv7OmA58Qp0-wnZ1Gqnv9TQ5_ffOANOTsmfzrqh_-u2OFNAYT4lbmjZUWrxoUBxqwKxnnbUsmN2Wx4Eks5JqAir0xbdwafckpy_C0k0fb/s550/sample2.jpg" title="Rainbow"/>
           </a></li>
           <li><a href="#">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UhLt6BZyxCgfdVoDrToR_CSXnHvGZUCojMo-q_EhdFk_S9BWZajOw4lfhkvpqTTT_HgOUkOs1TB0uv7TPhj1vpFN8Zqmk1rQhhK2hTWX9Frawi_n4jI2FH6A61YewQ0eZ0okp9Hmgu90/s550/sample3.jpg" title="True Nature"/>
           </a>Tree in field with blue sky.</li>
           <li><a href="#">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hL0M4Ap0MauU3NXO3xCKYg1xZZ7TclZgpiSoNGtWzRucOhRM6U7RdZzUhiUQWv60RxvdIIhiVsyUiUIEcn36agTZkhdQl4TdFXEp0UPXoVgH7ICTB-rKbjrJ909k_xMi5XHdlAx-_xMK/s550/sample4.jpg" title="Sunrise""/>
           </a>Amaizing sunrise moment</li>
           <li><a href="#">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6yGEfqhkoBqI8nZyQaJHfZGp4EZOz1iXdhnVymwMW88E21P2RSACTttnZ5MjNwKHrj0GP8H-OZeV9EQCV2Nn9BA6z8qo04NBBd00-BbFaxZgfvGjWmG8kFN2nwQYE4b-h3Oyo1_gxU32f/s550/sample5.jpg" title="CAR in HDR Nature"/>
           </a></li>
           <li><a href="#">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrZatjGgoSTTq3Z8sKsDgd-lSQu0hpyB_NIbU325UxovJfweoV1Fw_rWAFE0VqCwdu5OG7JQjcIUUYXcKpJRV1_FgNrdMVRUtU9KTY2Y8xqTu4BfQyH297GT4VLk4GJqdQxFOs6rKS-e1Z/s550/sample6.jpg" title="Sunshine"/>
           </a></li>
         </ul>
       </div>
      
       <div class="jslider_thumbs">
           <div>
           <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRZ-MYGTU9Yd2h0UcdLuBO5WkNHPBfLJwL-I2apEqJfdbrmlBseVTkCO6zp1KDEtmdaGefyBjeUXZgbUAtoCZjALAF_1q3v_9aVcTZVyEwaqFQ8W16z3EdeRh9j6M-2iEGZqCGdleeerJC/s85/sample1.jpg"/></a>
           <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUnV4JrnBMbIEQq6tZamurGJcx9P-jRpQDO2L1PdUUzU6itKk5N9hEI3_fqF7OmEQ3FSWCgdwm92QfSao4P7vhI72YIsx0USxcd8tYOsO1-v5BDwogftKwtdGngOCoA4MyV5qP7Teownx2/s85/sample2.jpg"/></a>
           <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVTfcj2IrSYFWAXMDsuUi0KHQnPmMAKcg5Oc2zfkLCcdgFetThlIm6y0me2MbTW1KCZa_ktwTgZaI3kyUrPyuzaTaSe43DGdnwbPuaiPUljUW3yMPQy9mVfyE-e0aiYTR3ct8Qedwjf9M/s85/sample3.jpg"/></a>
           <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7td5L_zKjYV10vgxP51sjirbb-OPaKJVTuPrdqH8t7qC0hNe8hSAWOziqFybW8hO3DItEQKdqgNS3JPBLKE0YVhfOHaJdRprgG1BlVE_jRNybYvJiwJO_dpP6hallsJhId-lZMoUD8lhI/s85/sample4.jpg"/></a>
           <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0NZZ9GJZNMPnqWIGIen0PjosiPpizaTrTEG-krIbVEsp8tqOpjbqGeh9h1S2mpOspjsyhWvqBc9cgrgzYQGvdXVBcULlXKYwWajbe7GYPMVT_2qyqrD0YglFnID614myHKu4fjfaU1EH/s85/sample5.jpg"/></a>
           <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLbw_TDdLjdTTd2tSdAvu0lV-3seYbMf_3qbtWTAGPRCPEVkCZYfdHfE-Jy6ypBTpzWFkaiQ0Em2QCyMBLq3ICo793cgGD0eWuuYJGlbn5I8Y4JTOB9L3A7c_hqL2a61T-38zmoqnKDgw/s85/sample6.jpg"/></a>
           </div>
       </div>
      
   </div>
   </div>
   </div>
   <script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
   

4. Save