JavaScript Image Slider For Blogger

05 February 2013

JavaScript Image Slider For Blogger

Namecheap.com - Cheap domain name registration, renewal and transfers - from only $3.98/Year

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 so that to edit it as you wish and which will perfectly suits to your blog.This slider is created by menucool.com and I have created a bloggerized version of this slider to works perfect with blogger blog.See the demo of the slider by clicking on th,

How To Add This Slider To Blogger?

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

/* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmcSlnDcNNd1-x_24oBstaMSJODSDyZ1ljnPFzD4EcyfAEr4PlHXPdpVd1WKFr4FV89dCjl6ZtdZMgNq-atRjiOsIYY91WRLmwpQ4Ah7uniD7epk_a5HvV602wiqBSGTkEC_CHoZLTerg/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgu5CA72nwQZrwuu0uCA_KduXq11Cv0bDRjjf5G5nJd4jYIoUiLBMdeqzS-A_CpybJtBzwEv5adrF9FniB8RQQmcOnkKjjvr5mIRWnE23hrF5GEjk4NRSUsXay-WHTDTbb7ntPY9ME3ww/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

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

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 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;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp36CaNeeYjB7JZryX1Pommi8kd9qt4sjdgsJ9-UmXujvf2Xroiu3nQ3SzWUfHlXcqkbJa2QR-C3dyAeX8mGqkQZZ1nMa-dhrxdgfyI2LoGMv9Td_UTkSfP21hZlFzS3qFaJI1ovT7D9Q/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

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

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

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 :)

Please Share it! :)

0 comments:

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Imtiaz Ahmed

05 February 2013