Fandri`s Blog

Manfaat kita memasang slide show di blog adalah untuk menarik pengunjung untuk membaca artikel yang paling populer di blog kita dan untuk memudahkan pengunjung menjelajah kedalam blog kita dan dia tidak mudah bosan dengan isi blog kita karena yang kita kaikan dengan slide show adalah the best artikel dan yang paling banyak di cari oleh orang.

Nah, Kali ini saya akan share Pasang Slideshow Keren Dengan Javascript, Jika Sobat berminat langsung aja Ikuti langkah berikut:

1. Login ke Blog sobat

2. Pilih Tata Letak

3. Pilih HTML Javascript

4. Pastekan script berikut ke dalam HTML Sobat

<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/AVvXsEioqUVHZUoeeoklE-sHS8dTzE-DyeZu8AD3JX-QIyN8Ls4bFisOUQaJFkg4XtWvBFcXqi_396d8gNWLBf5spEiyFKxgHT3D1tax_QuMLJz7LC8eE5hhZm6jYJLj8uMKKUa9LwFw2Knf79A/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/AVvXsEiHBmiRWUkrPwy_7BaBGYRDZLkF0b51dkg-M8FXTOjac5QXcUxiCC0YAsvMbO32UhpZj9Vyoc-Gd7fcGIYU6hAGG2H6Kbvf4Y-7CCCAIFy1n6aqWm0bRrBJ1x0wR05QEcSimcC0BpbnctA/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/AVvXsEids9TsTMjLIw5o-BeFAbSh4H3FLAF4X0y13R5VZdxg1tnM46T_Qys_4jEtOiABbhgc8NcBGt4JJUVw2wFG81Q0zNZ2KEIg5otQTiTGcoMiJUkl9qYMSZYoEDKmg9lLsYkE4Ry_3ioB1L4/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="tips menulis artikel yang baik"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="tips agar tidak mudah bosan potingan"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="tips agar bisa naik page rank google"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="tips copy paste yang baik dan di sukai orang"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="tips geblog pakai blogger"/></a>

                </div></div>

Catatan:

Warna Biru: Ganti dengan URL Gambar sobat

Warna Pink: URL Link yang dituju

Warna Merah: Ukuran Slideshow

5. Simpan dan lihat hasilnya

>>DEMO<<

Sekian yang dapat saya share kali ini, Semoga bermanfaat dan Keep Blogging