Add Awsome Image Slider with JavaScripts

Hey Guys.. How are you... I hope to you are well. so today I going to give you a awsome blogger trick. This trick about adding a Image Slider on your blog or Website. It is very simple and easy to handle on your blog. Its need no HTML editing, Flash Animations or other Web designing knowledge. So lets we start our work.



Before it see some demo of the Image Slider.

See Demo

Ok.. First we need to resize or crop your Images to the same size. You can use Photoshop or othen Image Editing Software to it. When you resize please note the Image width and Height. It is helpful to us later.

Now Upload your images to Some Image Server or a data server. I recommands tinypic.com. Now grab the image urls and save it on Notepad or Somewhere.

Now Go your blogger account or Websites backend. Now bloggers get a HTML/Javascript Gadget and Copy and paste this Codes to the HTML box.

<style type="text/css">
/* http://dimpost.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
      
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFN8zeiwjySJzhiXlf8unTKeiMhqNqX5VLiXFYJBxP0oYJ-mq35Sjmd4JgbpH06qrohfuZ6Y_KsG2GgaY7I2SzqHEqSG9mxlQSHfgoAYIE1dFIUdzhR4SB6N8LhBmODn0cQtLdJSPlQpcF/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJZqFQ8TqC1eZS-eAqboMPO3Wf_sKI-mB968g3C0nJ8jeW5oL9x_7Iv3YjzolDNYugaqvifM-tlb7S48LRqJbECzjD2qdArQWp9rGshX3Fupw-ADpzhDyKC0LtVirJdQEOkGXXhbwK700/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="Link 1"><img src="Image URL 1" alt="Text" /></a>
<a href="Link 2"><img src="Image URL 2" alt="Text" /></a>
<a href="Link 3"><img src="Image URL 3" alt="Text" /></a>
<a href="Link 4"><img src="Image URL 4" alt="Text" /></a>
<a href="Link 5"><img src="Image URL 5" alt="Text"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://freewarehut.blogspot.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>

Now we have some editing in this html. Now give your images width via pixels in Green colored points and give height of your images in pink colour points.

Now edit these with your URLS:
Link 1,Link2,Link3... : with the URLs to when the images clicks redirects.
Image URL 1, Image URL 2,... : with the Image URLs according to the Redirect URLs
Text : A alternative text to the Images

Now you need to add another image simply add this code before </div> code.

<a href="Link ?"><img src="Image URL ?" alt="Text" /></a>

 now save the widget and see a preview. I hope you enjoy with this trick. I'm back soon bye....