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.
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