Thursday, April 23, 2015

jQuery Image Slider With Thumbnails For Blogger

Here we provide you another jQuery Image Slider With Thumbnails For Blogger to create slide bar for your home page. We provide you full ste... thumbnail 1 summary
Here we provide you another jQuery Image Slider With Thumbnails For Blogger to create slide bar for your home page. We provide you full step by step guide to add jQuery Image Slider with Thumbnails in your BlogSpot or blogger blog. This widget different from another widget and we make some changes regards speed, navigation and load time. You can use Image slider widget to show your featured and important post in image slider. Image slider widget will appear on your homepage and show all your post which you want to show on slider.


How to Add jQuery Image Slider With Thumbnails For Blogger

Please follow below steps to add jQuery Image Slider With Thumbnails For Blogger and you can also check our demo:

Step 1

Login into Blogger Account. Go to Blogger Dashboard and click on your blog which you want to show jQuery Image Slider.


Step 2

Now Go to Layout at the left panel and click on Add a Gadget Link as shown in below picture.


Step 3

When you click on Add a Gadget link a popup window will open with all gadgets list. Select HTML/JavaScript from gadget list as shown in below picture.


Step 4

Copy and Paste below code into HTML/JavaScript box.

<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: 500px;
 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">
<a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
 <div class="jslider_images">
      <ul>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDOOzHSHJ7gHFRY7hHgZ9WBlJWcTLFrVMWT6xoyiOeDVmtQFew6IissA9CajaSzBleSEJ9UwAz7tsZQT1kOK3VAlZC-uWF6cKeqf90WjKbIDvzsyyVXbiilhpuH1pmkfUyXXnFwz6o3RRt/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxOg9zbAC-_5CWvNPqHdiz-ouCxcWrpmUVDqUV1-qEuv3egp0jF1frEp_glk8RSiHgYyJA2vYJvh_Bv6rO12kbcjw4nZXx61iY_gmY2mJGKhRexykEKYziidranSmNNCcG74wASHqZ7Haz/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Tzczmi3XHGPE6OS7NZ9sWihAOFYX-YQOWb4QQimcPjz3KPwoEGG4lya-iCtn1nIIhnQI3ogTWL0nJZ5Rri7MZ18orZxHfV3AQKx5Xv9TYq5O59luuxKNeqGMw69_VAIbEiw1UY5tiBhQ/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/AVvXsEg8YPO1kQodFjfFgJ0QLo4XWbEpFsRww2apqBSb6kPJ3Ca4svw07J-laKTwAcrLuOD5JJu4MXvERfWz46Ol2eX2nZJ4wTcc8rMpfKXVrX7bKZDKffkx2E1uQV_9Njn6ZCRorSKJq17MX3lR/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlSgKZwpt9EHcYo_zZayEgGwuXtR4yIXQt7JhA-uitdgQclnt5jBezcFb96YRwM-8VIVsGJBBO-6SW_9si1fuU_GIFm5nxfrj24kegUA3fB5U1nQlCi9xGAyF_aFoXpbytXvIPjHBuDvQW/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAH2R0QtG7qGIfQnDn-QV41bB9KUwVDVQbWQiG43E31felbqhyphenhyphenLn6CCMPZvL4ITf8iTqtKPAZ57dNYF_O-wvtGpAdtfnAtiNJvr8hcqZAUYErpME3klNmwzsxCkzcrsKB1xaFJuDya8DmM/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/AVvXsEi1f602guFQWOWHm4K0jp3zNlq8tWe-Aed4ZvtY-tTKyzaGjTR8RFoZGyD0SoZQvnipvKQcHmnX9sV3TCBsBCSVxkyJMozD6xEXvNoF3G_ljVY_yMFV4WSES9nxIVvt5QnO7dtbGodGH4hk/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo3DL3jer6l31m-grQoa3O4_MPhNQy8I1w8Z7i8_yH7f3XA-kF3Tuif_w73plMswZWyKeuh9g7_2CtRqNYSbRkrOjUxkRk9hxuPr9DCw5cHJhOJixIrbE8QXULlWskkJAT5tQJ-532qCKG/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuUQM169rVN4TsTgfcM7zn6qNhbPfWOWP66QvcIFItm4B7ujlOZtfutLXexqQP-fZXjWW_6pNbDBDw_x2AG5R500r3rzdKHsx2qpn3pNiRjYOU4nOWanEZ2DmP-mbxgOo1Ndc8pj_U8ni8/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtUDz2jNFtIyYxTOHNNl2JMG1NIKkIwW8dtPHa6c7CG81MhJJ9Kzp0G3bA6t_kxIBIfz2fXc5xdNdDfi2GNk91OgA9yOA3IEE4cLkSBKsHVhZbcAhKlsI0OqpioVCaswFzcgKookizcfau/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLyFpCCQBTBQAANp6Yd3vinQoU-riCdPM4JsTWTSAkbZrF2nGLoGxWvslrVyJNP0zSmUBvWtAceWUFqMydJws6-eFG33QuMDJiZZVf1zWTrfO57BtXAp_Mjba2dEFZ2nYMnZo9gNNZWWk/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsyoIvahPru2e2GxzudUiw3sMB0tE0ZWD67lwXi0CDJ_0NyNcXg3N37020g9wh-cRqpLmhz-yo_S4ZXwwFDW11sDL2dHN-M8FlwGNM37wrEjxW6tvuS1TFq7sB-QyP3DAq3m7bL83LLL-m/s85/sample6.jpg"/></a>
        </div>
 </div>
 
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

Tips: You can change width according to your blog. Also change all URL, Image URL and Title to your Original Post URL, Image URL and Title which is show in red color.

Step 5

Click on Save Button and Refresh your blog to see Image Slider.

No comments

Post a Comment

Subscribe to: Post Comments (Atom)