Memasang slider pada blog

Memasang slider pada blog anda akan membantu blog anda kelihatan seperti web profesional. Tutorial ini akan membantu anda memasang slider dengan cara yang paling mudah.

Ikuti langkah mudah ini :
1) Pergi ke Dashboard
2) Klik pada tab Layout
3) Klik Add Gadget
4) Klik HTML/Javascript
5) Tampal kod berikut

<style type="text/css">
#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/AVvXsEhYPOvaajKNTa7iGXPxDQqxuuBBLtYcHD0rojn6yPCeJhVptIncfq7UshROunTdfzJYLlvUO06GKEWuf6WWPcVKYprMZJmXpjph2LU2hlN_9NpqhRd3SdlnIGHv3Pt5VQ3Q5SzwI6j6BqA/s1600/lordhtml.blogspot.com-ribbon.png) no-repeat;
 z-index: 7;
}
#slider {
 width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUH_fQvG-mtNhNb6AXvx0dpptOHNXRgKSXnSIV914SajSsHSTIsM13_4tW_QuYV-R1S2vrqLlVdlvwi4-4o8BSKmzA3Op9pG2KZAfw8lsX6VvkpdKe2Dlcq4IUYfCsoO6ykiS7t3NWtI8/s1600/lordhtml.blogspot.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/AVvXsEgb5Dnxw39aJtMJiRay5_39IwjZ4ZF6X5e2-zx68zugW-iWzXuF12tBrJP9QY288UlEtsY5O7lSDr4Y0o_17ZLGqzM8BJlUw6vMkPpjokcexJmTd29nvt_OpYO3r2kyqVA0I2dWMpPuD6k/s1600/lordhtml.blogspot.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="https://www.opendrive.com/files/MV8zMTIyMDE4X2FmeHVy/lordhtml-javascriptslider.js" type="text/javascript"></script>
<div id="sliderFrame">
     <div id="ribbon"></div>            <div id="slider">
<a href="www.yourlinkhere.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggEMo8FkvsMyFzU8Zaxt6ZTuaXW2VkBWKYBFG43QfJ_hEM5X1UWRwqm2hR_yWgqNTdmGJsFbMs9JuI83FeSpG882Moue3P0BIX5ZjKgWHAP78V8WNJIJYqTXLPIdOs2YbL8Cv6HaxYF54/s1600/lordhtml.blogspot.com-1.jpg" alt="Your Text Here"/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_t8ARS6CIoSCYzWWmTzqgr03ZE3xGLCvIskEkVraBzi283yYk1STR2-U3G37NUia_QzT8JQA4ByQzMBRvaaLfccMX8Qysh_lkxzddmcUqLsx30eyLZpll38paLTTJrpx0FcQOxpFsvBc/s1600/lordhtml.blogspot.com-2.jpg" alt=""/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2kGpI6Dv7lR4deN3P_x2Gp0JK_mInrxPRubowenae3uAQyZCCGk06GlsTrZuCmXv695wDCawT_JYPiVzUgB4lP8fpqZ92DtpVIFCGyin49f8J28iLtPZMT3HHRksUvmaqZkYS15FldI/s1600/lordhtml.blogspot.com-3.jpg" alt="The slide is a linking image"/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHvMjOvrsPl5H9CXML5WFTkdUJaXtnQz38K4ZI-wi86hDsNh6JHisw-_Bjf_0eTUk41IVolgQoB-QcBYgZtfkJqpVWhufm4HNV-3DSymkz5McJvMshIQ4i7FSiZLV5cTqLMZLwVqmhT70/s1600/lordhtml.blogspot.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguM9ji9heH5UrVrYdvN4RwkxqhiKtqQFV-Y5AIB1FP7wvpMyWtjP226nSRpgYBmQ8dv__ACsUwxoN34hKiWATFgLqpT-gSqWUGo6b2uToRbv8Qy86-ciBCBbs-Ljg0yltvf2c0EI4njRA/s1600/lordhtml.blogspot.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div>

6) Setelah tampal (paste) kod ini anda hanya perlu customize slider tersebut mengikut kehendak anda.

• Lebar - Sekiranya anda ingin mengubah kelebaran slider anda hanya tukarkan kod berwarna oren seperti di atas.
• Tinggi -Sekiranya anda ingin mengubah ketinggian slider anda hanya tukarkan kod berwarna oren seperti di atas.
• Riben -Sekiranya anda ingin membuang riben pada slider hanya padam kod berwarna merah
• Link - Sekiranya anda ingin meletak link pada gambar gantikan address www.yourlinkhere.com seperti kod di atas.
• Gambar - Tukarkan kod berwarna biru dengan pautan (link) gambar yang anda kehendaki.

7) Jangan lupa simpan (save) setelah anda selesai.

P/S : Tutorial ini telah diambil dari pautan berikut : http://www.placetodownload.com/2012/09/javascript-image-slider-for-blogger.html