5 Eylül 2013 Perşembe

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/AVvXsEgVejqhYLTuk13L9Q_QXREQTfgqT8JgNo4cYjrfjp2wVLNemBM72qxWy70BvOv2FeNi2dERp3PeqgjKl6Xi68iB3rKGeLupqmhBbfow2gnirX4FoTYUu4e781cLaEZksjoFH5RANlSYo8NF/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0QfYeSDau2hSvZXt_BIa13i0pts3pRsFBKLXbPG654bdAERgc3ZWtl7KDrl5dsED7601BP-oj9xf6cdpMD3yjkcxF8By7Qv1WVzYeNOa1G6zJa5ltAFDI1aBJLlJ_lMGUmLWADDaLjtfZ/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwYFtlEhXNsz90ZISNfkLwN2y7ThSsjt-hMRRiOVHC958GJHmX-ct0BT7dYDXyDpSA2eVy27jxOERCcZTsBTbGGN3qMLrwp7-m7pxYvsPgixUcj6NbgdO0NyDh8JMkorpGPKaRnauIXu-u/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/AVvXsEhYxsLg4qMjLYz0lNGT6co2NabTqmrmnnMSjnQOy5N-JMLjMhk9fbpvOP13OmJG3tJJAsG3_kD66-V1q_K_yFbVn5zilJdS_5cOOPSqpUuc_2eVniCI2LM6I56Eqxlq_oBYIKxzKDzTCnbI/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguD-EogSpzoqw7wh32z0ZeRTCcifklZrXMdN4LB89zw_1Gc32YOkhmC0evIJCI2VCjfXxwFhTbjCbn3WrPJ-KdO7vQXHgPxiWvtw9nMw-Uv3lCNPPMpF_flf0F-RjWzvauO78Dsq62FfCI/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9S2gI7b7gFhuj0CBkwWMKmYvBTuUIgpL3GtXgTOJdEpup288OKmKlLluIHSE8H0Ros2fQQ1WFQgTcpOoALLYxpwYiVYeeSycATyldZ9pMe11WH_Z0x4jQViwLSv0xLyQQmupDUvqVWexE/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/AVvXsEg3Opyuv-K5G7mR3iVZCIku9PEd_GN34-wPapdaMiHKA8b_jzXA-QbDMTt3wrasldSqbKIlJ0uanuMM5dKJmb35dMlRYzbUIDNfhMlTW23N6UP-G3O8JX8GYD01nj9Pz3oQuTXLKrHBtRG_/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxx5PSV32EKWsolN8iaS9hooHHExB61_wxNM0oonHiNKYPu_Bt3pJaJ0oFm0KFfAiGuPB8YdDL6wIENeo-Z3y6eJRYVey609BjWZ52TqD0CRBvSdPVNnFUCuhabZqoKERb5N4fQ9Oaxg76/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONS9P94IAFcnYY7iPjJceFDRkRWNVUr84nNabaGf-Sfu5kzQqB50FIzEC32-wP8wJ2xhChvZeWWnq5SvcQyWSxIKwQ3lyJ_FfQG8WJYy2PKuXAjPtzN0H396U-FfywHCanizgZCrVKtsi/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL_UqnoRYlYKlhrMemWMLBstB-JcR77rEbAj6Z3NzFZPE8wAgi0TpfC05zgjpEPLoxAlkiNpEkoyU0TgQ5fPx6qSV_WGPTSgF6ItpRkiIa6Up1fw7ziROyUIv2CA8J7idFWPv-8oei8mTQ/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Us2zO2a-CgKVUb-FnXmaDbuUWLjFmFROXDRGb1ywsejqXKj-7Fn16kzJnRl4lYaalLL0Lj9PrYbauRtuKJNML-Hkz1PBk2uUY5o4eHTa4v1KK2r9EQoqpCdgGb0oU3ATIT_rU2B4cLoS/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMgTxgrkalDTUXlE8ukBHIbgw5fU2kroAKTsX-gcCGULhOlOlGKkXUvfEfz1MQ6GnmsCcwL3VAdsrbmHO1_mfx9a3MIy4NjCsgEGc4_79eJ5wZ48ARjXEuS5eRVBhWm1uQak4TKtKwy-C/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>