Abangbloger.Blogspot.Com

Membuat image slider pada bloger dengan JavaScript. Denga metode ini slider dapat berjalan tanpa jQuery dan flash. Slider ini berisi sebuah ribbon di pojok atas slide yang di beri nama "What's Hot" juga effek slide yang cantik berupa irisan gambar menjadi 12 bagian, ini yang membat slider terlihat menarik. Slider ini di buat oleh  menucool.com. Dan berkerja dengan baik pada blogger.

1. Login ke  Blogger > Dashboard > Layout
2. Klick tambahkan Gadget
3. Pilih HTML/JavaScript 
4. Paste code dibawah ini

<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/AVvXsEiIYBfr5BohBQaLpu-ddWr1jsQ4jI86GKm_Lq_mpSew2WGDiNyb88OROxcfm5fQCcZQaqUgqE6jBiKtxjDXrdZSLldPj8q15XdWlYm3OWV6WZtm5XoYJ8z1bKFQYVVUZ-FolhYaUmGKCiQ/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/AVvXsEhHj4rFgl4YwZBirt43uNvl2oxEToaGOMqObYIiHXKeqdd-yyXF8yYoXLLbwYe7nYMh6pVC1qDLGnZ4RJUIJ2TyXU-94T00YULjai_ftpzpBPAnLhyYacNwXBrQZP00yEIFBl592gSavEo/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/AVvXsEiyy5B53WSfuehENUOB7HcxNQQMoXbMrKxyCWB884HWsLEkwFJ_ADTjZ-LppUUlIjF3PE4iVFqgt7JQmDcjVkaNDlR7sR6UPPECRjPXk7YDo7fha5F7aBiAd2f-Rk1CvuTJoYZBrcwP-RU/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>

Keterangan 

Tweet

Kode HTML:

<a href="http://abangbloger.blogspot.com/2012/07/membuat-image-slider-pada-blogger.html">Membuat Image Slider pada Blogger : JavaScript</a>