Tutorial : Image Slider For Blogger I

Hello, everyone. I got a good thing for you!
I'm now trying to update my blogshop into more interesting this lately.
For hours, I've searched for the best slider for my blogshop. Then, EUREKA! I found it!!

And now I would like to share with you guys!^^

It will look like this~~

Or, you want to look at it live, go to my blogshop HERE
or HERE


Isn't it exciting?! =D

Now, let's get start it!!


FIRST!

Go to your Blogger

Then to Design Tab (the red circle)

Then to Layout

Click on Add a Gadget

Choose HTML/Javascript

Then Copy And PASTE the Code Below!

COPY START HERE

------------------------------------------------------

<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/AVvXsEgVknrJTyHPfhRWenVpvOhpXxEM2aBZnddFeBk3b0sxICKcT9KDPF94L1qoocRxhs0L1VeUVoUCIysRc0_WJwZ0WiEqK_IfDyzTpULjb0uPyhlhdgWNQAEs5I33wT6gm5cgjrA6eWx2Npc/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/AVvXsEjUN92mPKWgTx3rtHVqrWius7N-WBdjSV-NXwDNj-VPVZBuLFIr-Rj2pA0OCy3NXnXFQprUyLBC26-ideA2HkrGGKD27wyF6K_ewsoV3oZ2wi5r6rdoq8Rj7HfzskMkDXxD-rA3tstAQUU/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/AVvXsEiNz77wS3IdqL68uf2TrAT2lnzZfu-JNHNKtzhKDd4ZJ9nqeRWop72VDth4CzxwQzKNNdZBMUzl_kbniC003N5BII96xwyMZSkqt5ZIgzfrnx_ylAdJ11IRBdjvRv1me3vdEK6T2eVddIg/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="Caption Here"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="Here"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></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="Insert Caption"/></a>
</div></div>

------------------------------------------------------
ENDS HERE

I know you're curious about the highlight words.

Let me explain for ya! ;)

IMPORTANT : Before adding images to slider, resize all of them to same size. HOW?

#slider {

width: 500px;

height: 218px;

 As you look at the size of the slider [LIKE THIS part of code ABOVE], Make the picture this SIZE!



RECOMMENDATION: I suggest you didn't change the slider width & height, or it'll turn UGLY!
Trust me, I'VE BEEN THAT =.=


Color code info:

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

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

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

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

Image Caption
 Here you can add your image caption.


Make sure you
Grab your HTML/Javascript widget and put it under your Header

SAVE, THAT'S IT!

=)


If you want to add more pictures in your slider, just copy and paste this code

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Caption Here"/></a>


Don't worry with the bullet button below slider, it will automatically available as you add on.
Ok? =)


Yeah!
Thank you for your time to read my blog^^
Good Luck~

My next post is on how to change the slider color! =)

cr : Helper For Blogger