My Blogger Free For You: Add Image Slider in Blogger Post

Add Image Slider in Blogger Post

You can follow below step by step guide to Add Image Slider in Blogger Post:

Step 1

Step 2

Go to Layout then Click on Add A Gadget as shown in below picture.

Step 3

Select HTML/JavaScript as shown in below picture.

Step 4

Copy and paste below code.
-------------------------------

<style type="text/css">
/* http://dimpost.com */
#sliderFrame {position:relative;width:347px;margin: 0 auto 40px;}

#slider {
width:347px;height:200px;/* Make it the same size as your images */
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-FSXyoejMndEqlQ-x9up7SkuzbMgB68BJHOcWmW9ErbEq37lD61PYB6XzYaiVuGF4LcXztpkYK5gsYNGp1zy594YtL4mcSQRFXJf5NBfwEfYpTeFgc8vDiD1b-IPVZvz8a9B2OyBhqmj/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:5px;
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:215px; left:106px; /* 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/AVvXsEhWOy-XdL0MJaLX410YWRBEJXwSpnvqvz_IZPNfN3tLUHKN-ihOaxcEr3Q5ExXL6JozkX-kX4DeHOeLYb3nyHcwwg6q8-mA9eNHukoxk92-bQjRz3Zee5w6Xs4AYntEA-wRw7BmOEZMCIcK/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;}

/* --------- 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://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="http://digimovie.ws/"><img src="http://4.bp.blogspot.com/-QWrsrNGRL84/Uj-qmiQbiQI/AAAAAAAAAlM/1XhjTNdWbmE/s1600/2.JPG" alt="Internet Sevice and Movies download" /></a>
<a href="http://www.l192.com/"><img src="http://3.bp.blogspot.com/-Vrq4aVAzYKk/Uj-qmipsHPI/AAAAAAAAAlI/MVtfsAc7yPc/s1600/3.JPG" alt="Men and Women Clothes" /></a>
<a href="http://www.khmer24.com/"><img src="http://2.bp.blogspot.com/-xIrS5InskEw/Uj-qmmKqNxI/AAAAAAAAAlY/NhAx26aamek/s1600/4.JPG" alt="Buy and Sell" /></a>
<a href="http://www.cambodroid.com/#chitika_close_button"><img src="http://1.bp.blogspot.com/-O_09km8yAR4/Uj-sx1IV-2I/AAAAAAAAAlk/kDP8QjYlOAM/s1600/5.JPG" alt="Android OS Technology" /></a>
<a href="#"><img src="http://2.bp.blogspot.com/-GdlvW4330_E/Uj6zOf-QSNI/AAAAAAAAAkA/mPT6lPtHid8/s1600/Untitle3copy.jpg" alt="The Best Colors" /></a>
</div>
<div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</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>

-------------------------------