7:15:00 AM
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>
.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