Tutorial Memasang JavaScript Content Slider Untuk Blogger

As-salam,

Saya nak kongsikan dengan pengunjung blog saya yang mahukan kelainan dalam berblog. Tak faham maksud saya kan? Sebab intro macam blurr...sebabnya saya pun baru pulih dari blur yang panjang. Sebabnya, saya nak pasang content slider di blog tetapi menghadapi masalah semua tutorial tak menjadi, ada yang susah nak adjust, ada slider yang terlalu besar. Saya nak yang simple tetapi menarik. Akhirnya, introduce...WHAT'S HOT! kat atas tu. Nampak tak? Okey ke?

Lagi satu kelebihan JavaScript Content Slider ini adalah tak perlu susah payah cari </head>, </body> ataupun ]]skin dan sebagainya. Hanya pergi kat Layout, dah siap.

Jadi, bagi yang berminat pasang slider content macam saya, hanyalah salin kod di bawah dan kemudian SAVE! Senang, kan?

Cara-caranya macam biasa, pergi ke DASHBOARD >>  LAYOUT >> ADD GADGET >> HTML/JAVASCRIPT >> MASUKKAN KOD JAVA SCRIPT DI BAWAH.

<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/AVvXsEjf-AdDGdz4YC8T0SYlhGTCUagtNLO-RGrKTA5tSmzLqZoEglsUXOnTJrBoBIBUfpo1bYU9TsTjlYcKhJDYYYRvYeav0PVYk6vaK3VZ4tm2C__Jvs4VeeJflCMqdk-BkPyMRzLMrWkj7lc/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/AVvXsEj6IqrbeH9kEVY_FIxhZDXi7y3dVAGNMQMY0llHF-tam1jlxZpRV5g6Mn2jjJkHlqNjTEkpCETLPpxj3zu_hpU4mEVwTMkeeQlXgmoBiJLkYaZEfmlxIg1IPlOPAmtzhuJN6ZJNcK0x56Q/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/AVvXsEi6Omsv-O0CP92LpC7GZcfNXefKtUNykACndjgaoP0YVweI4aw2fWIw0KA2Ul8R6vCgDmDkG2geUD36EQflNIBoSAhBcWA2V3kTHOKOCj3RDPC1ugRadRUKbOu0KOFkEfayNcdvZAe_XZY/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 helperblogger.com"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></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="#htmlcaption"/></a>
                </div></div>
Kemudian SAVE dan lihat hasilnya. 

Terimakasih kepada blogger ini yang tolong menghilangkan blur saya..hihi




NOTA:


Tukar kod java berwarna hijau di atas dengan kod anda sendiri. 

# = alamat url entri anda
img src = alamat url imej/gambar anda
alt = tajuk artikel anda  

p/s: Semoga berjaya!

Read More ....