Blogspot için Küçük resim ile jQuery Slider (Tek kodlu)

• DEMO1
• Demo2

"Blogger bloğunuza CSS3 görüntü slayt" eklemek için aşağıdaki adımları takip edin.

1. Bloggere git Yerleşim'e tıkla
2. Bir ekleme HTML / Javascript Gadget açın
3. Aşağıdaki kodu kopyalayın ve yapıştırın.

<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/AVvXsEiI86tBkPk8ayS4LqK88q0wZa_z_VWIbfPflWMnfpWsqH2eRCHc1rjAAx_-TUUXECMCB9ACqfGboyoZQbbNkux_vHQaC9NxASAfAUDMXh1akj06B3aEck8gi5980KuM1AkeDy-6ijDWRHNl/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QgvxICDzhClprCXL5wfFZ9NjseTcIjyV3K6RcniRiYpA3muASjF7bRgBvg2gOr0eEp6gyfOyOD5eK-zT2fDsV48uqHdqKm_pQRsiQOJhwodBEqdlx94vY-kWgvsRtTNI92NAvShXGGYi/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4iGfOSSLT8Bn8tGY2_XTQmOzEqnPoV6J8afuCmujWJgVgG9J91EwztLjfuYC7Ws3OqcXsGY1M_ljnArrt34Rsmx4c7c27ruKt30m7k-DC92OfW9n4UULvApFf_AHAXOsL2xBjUdl2sktB/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/AVvXsEhNbKkMqPbVkP8plhQoCmT7sa_-MTYyusUzckxpQWjvxhd5Sc_1Dyysvl3LjxVgDZdPYgqUhpwyw-qwJK41v8_jWXrR9jMXwnREgcBK4kNlCK2qQIMNtEXbD-FLCMljLbG4QWHpHa12XpD7/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga1Ne8DM-3yOXImrOaETAAUTZ4dhTM5ik3234lkG5wTriYJqWHy_Ii5EGyg6QrbfKLfXnIB82zicjqCaU1JPI6vYZu42b2GRG9Mp3_V01FvQkc-zXAsryjuXDK0zjrqeZ_Dpz-aM98cW3Q/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2-2PD69fF7Xkl13cz4Oyu3SpL1rNwvJj7bFR0cQKwA6d1mUpcnqzS8jHlSzW5-_R_vUSi81zrQNdOX-V5ccxysWN3C6qBxnGY1eSp7VJehiCNz1zMC0ZbA_UNgz-Lt2f7xwCrju29RJfh/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/AVvXsEgYH-LhCkiLaTLBn-VvldatmvZI3zGQMCcG77OMYViCdM9pQo6_CkPvTx74YdGijw_iQTd_JOdK8oZZELob_DfdTN8Y36NMuBCdUaj5jsbu_uHg5HwnKsZUY3tbDoc3ewHU_iXgbmp9-SqO/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3tJS90Ia4X5cDsCYHfYw1dg43hpjcK6oZoSDNHpC7SOecTRTpdDCbIE9ZMaIXoISnyHKQ7e4-fqM7xMEQ-Hk6lC2wE03cIz4SiZJvU_sU7wmuPmXki5wQHnuyO-TWz52UgXVVL62PdLuE/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiymA99_MxbwVmk1vtegRil4yH2PZWYfkhd88qP8ThviLCBHMRpcsbbV2C1_xOINwk3OmhJPrzCDMeXvIblm36Lk5nMBMFTnQ3hBcl8ddExQHEPCplnXuFVjKHjkVtbfxOXoUZXe_JHJ6Ws/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOU9j1ivtngs_KL4GdgO2pI8XEO19peoM2OKKPovvaqE98LxgTozXfzcSkzSaoeFW7B7JmhJz84JTziwdV6ObsBBPEnkiwUPmEvXT5u9alwyFoMfyjnNU4LOtXZZZDGnJOjN8rpTbwDB6c/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_wzJmoy8Jo9u3U3ceIzcnGiBcvzxgVTr7YXhB1O6ak95u_lgJmzPp41g4SDaoYhq0WsRZbvka-XdJ7oXLpUxtnnMCH5AyLlzrLLekRB0E8UciOC-zajUkG7DA_J_7ZariULBi3y1wR-zf/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwEWnQ8x6IbGjRIyx7xbSa5pn1V21OiRgouXUz91sgdsQzRszy0D9u0lkPKme4HEU45CKf5TvmZTPVIsMGIx2C3AawOvtc0hon4N-8Kdm6ctcyBeXYIu5LgEpNsaF6-hxF-xkU5v4Gif7k/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

• A boat with beautiful sunset.
• 
• Tree in field with blue sky.
• Amaizing sunrise moment
• 
• 

Written by Nhv-Editör

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.