slider




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/AVvXsEhQNhACzwKOgkOWYgt7-syE0iws1F5oyKQxTQcSXwJ4xt0HutkEvt4sg-Bnbt1VV3-DErj6zsoC7KbQiEdjknIm9wLpfLTNepe6MvVbcURxNq5Sa5RproO1PQTWpuGeWXElfUsKJ9ORwWNg/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsz5xjVwkiCYjE61uDhFUyefYLpUYKuQ6GFb9lKQsi8lncjJb8lwWjEYgDgMWohYvm6HcgbLuK-1BfuggfSqLzdv_gZzue4awccRkHV9opMzDlk5hx7WjfrNOu1yGSISqGWzxarNeZmCNw/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFUXMCeaOoMUkX84W87WKV_n6RDYOKsF8YlER0DeLmmBt21_3bxA_ZJwgpav4Rf2YooCCd7vKTD_OiLVa4bTWVdbYvyU5xheBgXdDTRB_-pDnqMglOLuu10EosR0x2VRhvTZglF_cNQywr/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/AVvXsEgMsap4XbeGh3GOGmKOZriDUx6O1wCyJcdtigs4V-NJODzetp2JO8ty7bXInlraG1MtB4VKPBoNk-gw_bnLZal0ek1TVIkQ85hkzF2cG1oeugZTFwnYTTvmG20m9lTmy6YEeNJ_CB2KAAIS/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh4hKSYn-gtF5JR42CfqHahquPzLVDiyGy6G8rpBTFffTI2j9DizxM8_SXd1om_xCFmVz8ZHU_JMzSpuJ2xzrHne3ct5JGmMcL9drsisNwMVKYtxeT78jVDR2I58w349bFo72sdGjWGOtd/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ0TDMHsivMeoLMA5bra9ygBQMGzeE9TTOgy_nJVArqCU4SPNhkRWF5TIwq-AWlNpsPbvaoxPFFo8Dpr0MakKmac_EDjz8rM0z3hQVzUJ-y4qWDC-IO1Dp2IuF3FO3-Et2IPrV3SKaxTxY/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/AVvXsEhD9jdLDtm2T9byF0lQnC7XY7jxO8tnwshgDFNpN4TumL-PbT3YvLeqRLYUz0j1jc323Fh-rOZSQ0gTkEYeNlQN7jRjKKpj2EniNSOPho6fHPepU56MsNlkZT2UWy6hBlfhrdi4BfN460HH/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMKlglKJD-4m724BQNoOu6I0opjKajDfOX2yFyWsWtQUj6JHDWYjhpSPDLuU3oWZveWk5l9dywZX5e27PqauIvKDZW14J2J_fnULMAku_pkuqaufzHczl7IRo2sqkKL6FMz0uwFjGO5Z03/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMkKMpLb2695sYXubsq8pII4MBCAmrOmDnEws0ceE9LOKtXC_YjJ87s4XRU46asLiY-UmX_jFeoZWQzy8pzgcLcV-jRSssE6o7tDH1rkmdmt241Ed_-bYIN-1_9t9KsrrmWRPEtigo9Yt/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzveoYJIi_JT3rUz989qLWuUBbgw3f0p-kaVHLqaPMZfnsosfG7buVpLV-1ux6HBm706Vl7uhn8xWudnvnne-KR0kDnQ1FHzmlRBfNrOaYbAgbPaVCrliwlXJcuhmp0JvxOShyrlX6vZde/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBslhnBUdR-Q3c_t47nAN1EdF560sn9qvuaFCW6qmBIcY2h_jKklKD9xT-_kRRJsmatiexGjNNrcuzdeWBFkhiyLHiRZRhsOIH4kq3pnx4P-2lEuiORbsvlcog29ulriI4VSvoZBmXxxxp/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZByDXUC9fWQCEyDA5B98w8Nu_Gt9ssWAn3gs-tZPrIiQKdGNMtWEFqeDQF0vhVyycnNeKe9I-xUvEK9EZH5qk5eQHZ-FTymbs-rOSCaIK75-XeTA4EpBbzfh1v7vjW3_gOyH5FZr2yxp/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>


4. Sev

0 Response to "slider"

Posting Komentar