Letak Slider Dalam Blogger Tutorial

ramai gak yang mintak aku buatkan satu tutorial untuk slider macam dalam blog aku ni. slider yang aku maksudkan ada kat bawah header blog aku ni. slider ni sebenarnya image slide show je.

senang, mula-mula korang tengok dulu script kat bawah ni:

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

<style type="text/css">

#mcis {
 display: none;
}

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



#slider {
 width: 500px;
 height: 150px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvK9NMOj_t80N6DYHcxXkMb5U9VP7WIEcVss77q6ahqCR60JvLKby768b4FLC23sGl8bwHvcHC0WfShFlntNCjT63CJ47EfyOcsD1hr0J0sjReH2-AbkT4cymXYkOEJpxEyQdCPx-3nLs/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: 160px;
 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/AVvXsEgdvDbFxVT7-pPyB2WSTit5dmEPYYpeGAOJrPNFUBPur64NBn3WmFkiCo2-FPV3FEm4omVU0q8ynwSDlUThwR2J4xu9-pGQNFzo_3u0t1NmTQ8cxhwnLa4QQF6G3t4dHW446G4vkHin_ZU/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="URL" target="_blank"><img src="IMAGE URL" alt="CAPTION"/></a>

<a href="URL" target="_blank"><img src="IMAGE URL" alt="CAPTION"/></a>

<a href="URL" target="_blank"><img src="IMAGE URL" alt="CAPTION"/></a>

<a href="URL" target="_blank"><img src="IMAGE URL" alt="CAPTION"/></a>

<a href="URL" target="_blank"><img src="IMAGE URL" alt="CAPTION"/></a>

                </div></div>

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

URL
kat sini korang letak URL satu-satu website atau blog.

IMAGE URL
kat sini pulak korang letakkan URL gambar yang korang nak guna.

CAPTION
kat sini caption untuk banner tersebut.

Width
adjust mengikut width banner yang diguna.

Height
adjust mengikut height banner yang diguna.

div.navBulletsWrapper
kat sini korang edit yang aku highlight tu. saiz korang tambah 10px dari saiz height. contoh aku punye height 150px, so kat BulletsWrapper tu aku buat la 160px. paham?

PENTING!
Width dan Height tu mesti la sama dengan saiz banner yang korang nak letak. pape hal, edit dulu gambar tu mengikut width dan height yang korang nak guna.

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

kat slider korang boleh letak seberapa banyak banner yang korang nak. tapi jangan la banyak sangat, kang jadi ape tah. nak kurang pun boleh. script yang aku bagi ni ada lima banner, pandai-pandai la korang adjust.

sebarang pertanyaan tinggalkan kat ruangan comment. aku reply kat sini jugak, so kerap-kerap la singgah kalau nak check reply aku tu.