JavaScript Image Slider For Blogger

Today I am sharing another cool slider which works with JavaScript and no jQuery and flash is needed.This slider contains a ribbon at the left top corner of slider and it is named as "What's Hot" also it contains a beautiful slice effect which slices image into 12 parts,these main features increase beauty of the slider.Another great feature of this slider is it is highly customizable .
-----------------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------------
  1. Go to Blogger Dashboard > Layout
  2. Click on Add a Gadget
  3. Select HTML/JavaScript (below header)
  4. Paste code inside it,



<style type="text/css">


/* JavaScript Image Slider By dothestuff/ */



#mcis {
display: none;
}
iderFrame {
p
#s

losition: relative;
width: 500px;


margin: 0 auto;



border:5px solid #000;
}
ribbon {

# width: 111px;
bsolute;
top: 
height: 111px;
position: 
a-4px;
left: -4px;
p:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIKcma9PNBPY4HjR852JG4BXIA1U9RXFsiWamOkFxyoyMJMq1rW6N0KFkMZ1mhbEnRKZezyqQedqduHe8QLcyzjsAA9qnt3O2mRegA6_T1qPoMjlYra4eqfmk9cS5tFcFH0FwMlqj08k/s1600/helperblogger.com-ribbon.png) no-repeat;
z-index: 7;
}



#sl
background: url(ht
tider {
width: 500px;


height: 218px;


background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_P89c_1wDahXVs8itxssv3OSTkuZL52oujri9SktU3xNALmFi-F2pas9TGAThsUAvWgbgrCW-j_pOh1SCDwoqORT8XhXlQolmYjGH8_GvgAxzUzNG1i-q-giLLZvANXItSv5NJR_pvMY/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;



position: relative;
margin: 0 auto;

1px 5px #999999;
}
ider img {
#s
l
box-shadow: 0px
 
 position: absolute;
 border: none;

display: none;
}


height: 100%;
}
di
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;

 v.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;

ext-align: cen
 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;
 
tter;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;

p.blogspot.com/-G-ie
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(http://3.
bkYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;

slate3d(0,0,0);
-o-t
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: tra
nransform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">

     <div id="ribbon"></div>
            <div id="slider">

<a href=
"#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJz24vwP9FgGbA85lKC_mUSumZEFGwqanHXE_k8HopfI2yBExYvNvYj58pJcYZAv3P7t3cvAH-knsIwkYLD7lKNk6jNhf0YU0jg6ogVibvqfbBMuUtp0WstIMt4LPkrk9gkBXoVv7Je_MV/s728/dta+up.+logo..png" alt="Image Slider By dothestuff"/></a>


a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJz24vwP9FgGbA85lKC_mUSumZEFGwqanHXE_k8HopfI2yBExYvNvYj58pJcYZAv3P7t3cvAH-knsIwkYLD7lKNk6jNhf0YU0jg6ogVibvqfbBMuUtp0WstIMt4LPkrk9gkBXoVv7Je_MV/s728/dta+up.+logo..png" alt=""/></a>

<


href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJz24vwP9FgGbA85lKC_mUSumZEFGwqanHXE_k8HopfI2yBExYvNvYj58pJcYZAv3P7t3cvAH-knsIwkYLD7lKNk6jNhf0YU0jg6ogVibvqfbBMuUtp0WstIMt4LPkrk9gkBXoVv7Je_MV/s728/dta+up.+logo..png" alt="The slide is a linking image"/></a>
<
a


href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJz24vwP9FgGbA85lKC_mUSumZEFGwqanHXE_k8HopfI2yBExYvNvYj58pJcYZAv3P7t3cvAH-knsIwkYLD7lKNk6jNhf0YU0jg6ogVibvqfbBMuUtp0WstIMt4LPkrk9gkBXoVv7Je_MV/s728/dta+up.+logo..png" alt="Pure Javascript. No jQuery. No flash."/></a>
<
a


href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJz24vwP9FgGbA85lKC_mUSumZEFGwqanHXE_k8HopfI2yBExYvNvYj58pJcYZAv3P7t3cvAH-knsIwkYLD7lKNk6jNhf0YU0jg6ogVibvqfbBMuUtp0WstIMt4LPkrk9gkBXoVv7Je_MV/s728/dta+up.+logo..png" alt="#htmlcaption"/></a>
<
a

</div></div>


Important Note - Before adding  images to slider resize all of them to same size.

Color Codes Info - 

      - Width Of Slider

Set the width of slider according to your image width also use the images of same width and same heights.


      - Width Of Slider

Set the height of slider according to images height also use images of same width and height.


      - Image URL

Replace all highlighted image URL's with your own images URL.


      - Image Caption

Here you can add your image caption.


      - Link To Image

If you want to add any link to image then replace # with your own image URL.


Finally save all your changes and you are done :)


----------------------------------------------------------------------------------------------------------------------------- 
be vigilant and careful while doin html / javascript duties
coz it may lead to info leaks or slowing down or unworkability.
also check out google blogger terms and conditions.
----------------------------------------------------------------------------------------------------------------------------- 
no video for this stuff.






Labels:

Latest posts.