Search

Dropdown menu

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu
THIS BLOG IS JUST SET UP TO TEST MY WIDGETS IF YOU NEED ANY OF THE WIDGET OR MORE JUST CONTACT ME

Thursday, 16 January 2014


Lets Step forward to adding this jQuery Image Slider with Thumbnails for Blogspot

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it. 
<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/AVvXsEgv6DXyk8IFwjWwJdMGWTy9EtX83hV1_wlD9dP_we7IrY5EF1KCi9_bnbjf7HQPyl0qmkj4PCgehXaV-LdDoMddwlZf-L_cmoB0drZPdUR-gpSdy9bk79_NaYHxM16r69FhBMehyphenhyphensM1wxeR/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwAulqdjmG_7RWbZi0udc4sq3FETIBdYSzYRlkNHm1MZjVz5EgSyvXC4yLu7JdlFcxXOtDnnoJeHYOBt8nKYs28KOlj3b45c2QwxSPVlC71oIU8pGTYE2M3VNYTBY34ikR7GKBEIeitMEa/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlMRoxp29i_7Npn1cGG3nneFByoGCZRjfWf9S9Bv246tHpnvHAOwQsAVMDWcbm8qaVcEgN36-lzfwWDEvDMioRlpT25adJF6c51BKzooA24Q07YpJUMoIBUuDWgRAeQCpghJ3NnutWbDRc/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/AVvXsEhe0ohqETuMLvTWyeiZ4MF0FONNNSK6tU-ADpWnFXDOHX6zY1Lre1CgjoEAA8ABE3fPLnmAJMVKkqVuRV0oSupQQZmDNsQmAK-eKAG97fTZeJ2M2-TbAhQBp_yd8B1_PT3svvdtMPprANbG/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgexKjJcuxmEAbKmNp686-pHPHZTHbsbgrUBmdfgU2azD56k4vRwNWWqv5cahpL7WcB0f3HHKJTb2kNxcthwiLDgar7CD2P0TikSiArWRvRATpvrh8NJPie7V6SWQ1GCkEbf1BBb9mOxHfh/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaNaQBaA2efSwwiFnLKGlFNJFqUPkT09_jCCOVFydbvjewOCOFQXkE7_3gMAfGgIvWGtqbUKnmkmM5D8NpWhTPSqecTUiF1TxOitkfGS_Yo2gQMN9gqLCayc_OTdHp81Al_IKc5PH8PlHo/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/AVvXsEjJlZWQHjOUVm6cpd7WCzrZ-DBs2V9reJPOMjPSPECV7EQNdQ8VnbHUoEz6PRzqLnvbZ-q1TMZBm1LfH8VB7U4JZ0I3PBc5QYcgw9Plai99AjibO-aQRyfJDDSZi_aTsUzIyiEORA13WMhy/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifjsFhvTpQ-nEy2L9-LSPrIDtaxVvbHft8Yn80bgYTx6xfZmeeDmKWcIil_KP2DqwR42wPBRMOloaiSKNs30j_6Zhvgy5ZsKCVw_41pWRLzjWw0_1E3Y_N_V_2h5EduP2V9JMHdmiim9ce/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW-7SyRCDng0DU-5Fh3EdAwDTHryDv7qKD5qZiKXXZMbxCHYnOWU-w4nOIfB60biLB009zXHp7wPn2akLM2v_2lYKzd8vVGi8PzvNhC24eRAzzaBEAraZCy9c2m9XtLZ0JMAgrxSWSu1Co/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwz9DUPl7C3bpAzzEIQoqBzW-1n8MEGnoC1hsxWcWsyKVlEN7VDSPnZamYQa3MvTOmCJBeDvEg-UTVrRxDmvAtfU3MRzI8pAwv3Oh3Sf2sAgOW8rKCcwUNqyCfNFNrl5eCh0F7YBY987-i/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6mIAYuqfPX3biamEchg9j6OC86ozZmnXkY7_q8eiWb116sqKy02bSAG5s8UCyK74E7MRAAO74n-mBw2Yi7LOa8ZcueQgHHLFCUY93UailUYRCehQbITYClHbUwXt6CpwLn-cOtoNbaGLg/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnzRZrJLfG4YSuqSB7N-QZ6dDsF3gFg2380G8kOIe1cHOJS7bYHkWGjzh76x_eHAlSR3DU3XeQcLH9x8SvOpwvBT2ofTAA3T26fB7OdlIDMjkApfZI2oR9qzJiK8bDDyOUCJKXniGejb2/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
 

No comments:

Post a Comment