Greetings to Every One,
Today I'm gonna show you how to add a Cool Java Script Image Slider widget for your Blogger and no jQuery and flash is needed.
Today I'm gonna show you how to add a Cool Java Script Image Slider widget for your Blogger 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. I have created a bloggerized version of this slider to works perfect with blogger blog.
Add this to Your Blogger
- Go to Blogger Dashboard > Layout
- Click on Add a Gadget
- Select HTML/JavaScript (below header)
- Paste code inside it,
<style type="text/css">
/* 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/AVvXsEhfngy_0h58XxZXF8JMcRy95zKwlKmWsljpnopv-sRBYmNrwXHdELi14hLmM01kXnKjD5SkZX0Snu7x8ea4dnqib3EpvAzQsLm2p94vznh_tswclC1_5Scp2MFRkMU-m7i7nugpcZ9EHdw/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/AVvXsEid5Exv_b7yicNxJHpDPFNRh0vb7XvdI7vLFOhVBS1B3EM2CnxiLK10vy7Ck7ZE08W5d9GwvKVJygwDBZ8nKCitGYXHClHa5buNGOTARJKvOwjKIbolCtdcIxTKsyUhr3uu0DsynLNnBkQ/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/AVvXsEiu-YpAFHYSHIDI5VQWg3r_iIRAtNyzJl37ut6kiqTApKM0HL-qj1bAGd1CGq3qhajzNdJXZYjB5UCTKiZ-qZwI1wldlGfOiLNzqaqwk8sIV4wh4Th5rmIAl8OcPauEed7f6ErI0mk4AMw/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>
<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="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By Blogging Industries"/></a>
<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="Easy to Deal "/></a>
<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="Innovation of Blogging"/></a>
<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>
<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a>
</div></div>
Important Note -
Before adding images to slider re size all of them to same size.
Color Codes Info -
- Width Of Slider
- Height 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 (one line description)
- 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 !
Warning : Don't Copy from this Post Without Linking Back to the Post
Hi! I am Dulshan, a Pro Blogger, an E-money Guider for the those who need. I have created Blogrithm and currently runs it. Helping to the People who struggle to make money from the Internet is the cause which motivate me in creating the Site. 
THIS IS AWESOME !!
ReplyDeleteReally easy.. helpful and to the point.. searched all over the net for a simple slider... now finally got one.. :-)
Thanks alot..
I am Glad because of you enjoyed it. :) Go through our other posts also and Reveal cool things :d
DeleteThat is the only working version of this slider all over the internet. OMG thanks! I've been looking for this for months... ima click every ad on your site ;)
ReplyDeleteHow can I make it that it'll just show up on the homepage only?
ReplyDeleteIts working!!!!
ReplyDeletebut when I place this jscript two times on different HTML Gadget then the first one is working good but the second one is just showing up the loading !!!
please help me !!!!
Well I have to say that this widget differs in working in various Templates, so when the Template is changed it might not worked sometimes. But anyway I'm happy to hear that It also worked on you. :)
DeleteHi, It's working but the change of images is delayed while the buttons keep on changing, plus the images load too slowly, not giving it smooth look. [-( So could you help me delay the time change for button or quicker loading for images. Thanks :)
ReplyDeleteHi,
ReplyDeleteLoving the addition of the sliding image widget on my homepage.
How am I able to change the transition effect between the images so that the next image will slide in from left to right?
Also, how do I change the transition time between the images a little longer?
Thanks in advance.
Sorry, so the new image comes from the right hand side of the screen, and moves left.
DeleteChange "float: left; " to "float: right;" and this will solve your Problem
DeleteYou are a lifesaver! I’ve been looking everywhere for this, and am I excited! It works
ReplyDeleteperfectly! Thank you so much for this awesome tutorial!
thanks! working perfectly!
ReplyDelete