Add JavaScript Image Slider to Blogger Easily

Add JavaScript Image Slider to Blogger Easily.

This image slider is created by menucool.com. A really cool slider is this. It has pretty nice sliding effect, and a less loading time as created by Javascript, no jQuery or flash used. And another thing is it’s easily customizable. I have customized it little to suite perfectly for blogger blog. See Demo or download source code from below link.

Let’s Install the Image Slider to your Blogger Blog

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

<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/AVvXsEjkHK4j0I4BwmqLPorZcfGXVAKzKfsoIHKWYt1dRg9rYOJTCHCokxbAzvhjilEWrr3nqnDylGCioiMUshqpjMPO8fdpvwk7PZIpKqqwP_eD9jrIDyE575-2bbNYkRqIXbKPLlVty3dL2lID/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/AVvXsEiBGzHCn6vWmISDW_p_NCXRjaT3v3swuIVAnGyuJfcM5cG0DSDmF_lMbobYoDcff5eO00wloZK00Fo2UkFgzaFXm7pg-T_IqQLdPNfr5OLZ_lEzJCw3CB6Ce6uXf1tzR6hgw2muu4YTxbie/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="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobV3MDF8PU5TagKSgSO0ENQpxWiXfywUeQcyweuomtcjceg28MlTSe5BRyuwK7smvmfsuqsvcx2QA31qHZaGXRUw5e1Iq5xfGtrJQfVWQ_Ct9vxTbIRZbglARAI2JIJ4lX2F_0kgVYU5I/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBNANZANeqKFZ_Dk_P2MPTGRJRaCqWz5VO59d1KqogX_9wqlyO2w00lWG2LDMgfdzPs0wa0-V_05sTHSs4dgk7o4GJd8PSA0WK7lcMS4tLKH3q0FrXLZ7aHDhspUZ9EybBPB-Z1_fpSvQi/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhouNJQ9rWz0qOSXSR4bHCHOZtVu324yokY0UyHx8YoAHFugSR_QE3YLgtBdnRwKDQlTCafXspPOHbyNRz9HZnCqAaz_6tsM_zzw1PDEcKn5DDGzLFjFiT_Wl8f8E7ShGkirroTc4tJmMZH/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpEN6A77Z43Ll2HOlwu56E9N2lTRHHPOwj0elzGvedfia_KxcM2cEET034gd56Q1YXmb93L9nzIO2FvJ3Bujy2oYugy2X50tRlLAiAS18YERw3swJACpDjKsGtJSglFcGociE_edBa4LrR/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGOOSbMMY1nQj-73x5yJj14vTnMzivFqs1i98j9ETg8LKizYI_LR3JmlkFcLlbW6kAH6cWv0iO1_9uBqS3u2jG6_bMY37HD01JhtTZUdxqrqnFkLf4yOGhC8-NEs-ja45P96XfWRawEaWE/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.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>

4. Now Change the value of Image URL, Link to Image, Image Caption etc. as your way.

Live Preview

Pure CSS3 Cycle Image Slider

Pure CSS3 Cycle Image Slider.

hot image slider for blogger that is just using pure CSS3. No Javascript or jQuery is used. So this slider is more easy to customize for newbies, just need a basic HTML and little good CSS3 knowledge. No server side coding is used here, so all is on your hand. This cycle style slider is created by smashingmagazine. Take a look on their page for more about it.

it is now just need to follow few easy steps to installing this slider on blogspot blog.

Lets follow the simple 4 steps to add this.

1.Go to Blogger Dashboard > Layout >  

2. Add a HTML/Javascript Gadget

3. Copy the code below and paste on it.

See the Pen Kwpgxz by humayun khan (@humayun) on CodePen.

4. Replace with YOUR LINK any page of your blog or other site you want open on click.
5. Replace with YOUR IMAGE LINK.JPG that you want to show in slides.
6. Replace YOUR SLIDE TITLE with your.