JavaScript Image Slider For Blogger

Thursday, 9 August 2012

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/AVvXsEih0F5IG7d3J4zuAz-lOoDbiUF7SxrcuGnsk5hRmmYHyT-ai7wPS65onicB8qukElpn4EYS34B_v7o1SOdu3aoi6dt1pXPOuZ1zzlj5AmaA1vBa-9HR7ildw1EE1VD6ReWBZdFaW4eeq8Q/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/AVvXsEidwaUipAOjyZtcaz6Sl_E0_KBopKSNHtS9m7volqMBODtgBZAr1zfqp7cvzt0gqoQwrBDM8RrCkR9NblRTpXK-IND9nvjPYea1__oFSraRrJYDRYR_MjCzTsWyq-15xQ7ZZ0aQgR2DeQU/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/AVvXsEhyfuManpuC8Fn0JqM5LW7sSbwqCgdfNjIIK-O3KpZLOJtLBMZQyxbUyLUt2ITfMHUCeSzYMvqP4WOgytwsLJA6KkYF2wpApEXyPmH4e545r18mk3BNy7s4Z8QH3FM9YQS8hOCVz2_9P7I/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 :)

Sohailjawaid.Blog

Pages

Thursday, 9 August 2012

JavaScript Image Slider For Blogger

How To Add This Slider To Blogger?

No comments: