cara memasang slide show di blog terbaru 2013

Salam sukses semua buat pengunjung paling tokcer blog.
setelah saya sekian lama berselancar didunia maya dan sudah bosan rasanya untuk mencari cara memasang slide show yang keren dan gak berat loadingnya. tapi kerja keras saya terbayar dengan penemuan kode java scrib yang mudah tinggal tambah gedget doang dan yang tentunya gak perlu lage Edit HTML. seperti yang di publis di blog-blog yang lain. Sedikit muji diri hehe

mangfaat 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.

untuk melihat DEMO hasilnya silahkan klik DISINI

baik tampe menperpanjang lansung saja kita memasuki tutorial bagaimana cara memasang silde show di blog.


  • langkah 1. masuk ke blogger home
  • langkah 2, klik Tata Letak
  • langakh 3, klik Tambah Gadged atau Add Gadged
  • langkah 4, piliih HTML/JavaSript
  • langkah 5, pastekan kode dibawah ini kedalam kolom kolom tersebut:
<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(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/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(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/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>


liat contoh dibawah yang sudah saya edit:

<a href="http://palingtokcer.blogspot.com/2012/12/cara-menhubungkan-blog-dengan-twitter.html"><img src="http://2.bp.blogspot.com/-_MJ3GK_z0xw/UL4U4Pl9DRI/AAAAAAAAAdU/W9FlFU3HA7s/s1600/promo%2Bvektor.jpg" alt="Cara Menghubungkan blog dengan Twitter"/></a>
                </div></div>
  • langkah 6, olah slide: 
        • Warna kode warna merah adalah untuk menyesuaikan besar atau kecil slide show (jangan edit kalau belum terlalu paham)
        • kode warna ungu untuk menganti link sobat.
        • kode warna hijau untuk mengganti link gambar sobat liat penjelasan di bwh
        • kode warna biru untuk mengganti judul pstingan
        • DIBAWAH INI CONTOH EDIT SLIDENYA:
        • langkah 7, simpan dan liat hasilnya


        CATATAN:
        CARA MENDAPATKAN LINK GAMBAR SILAHKAN BUKA SEBUAH GAMBAR YANG BERBENTUK PERSEGI PANJANG ATAU UPLOAD GAMBAR YANG SUDAH SOBAT EDIT DALAM BENTUK PERSEGI PANJANG KE ENTRI BARU PADA BLOGGER.
        KEMUDIAN LIAT GAMBAT TERSEBUT DAN KLIK KANAN DI ATAS GAMBAR TERSEBUT, PILIH COPY IMAGE URL pada google croom) atau COPY IMAGE LOCATION (pada mozila firefox) DAN PASTE KAN LANGUNG KE TEMPAT TADI.
20 Komentar untuk "cara memasang slide show di blog terbaru 2013"

info bagus gan.. :D

izin coba gan buat iseng.. :D

This comment has been removed by the author. - Hapus

wah mantab...izin copas gan...

terima kasih infonya .. salam sukses selalu utk anda
http://168onlineshop.blogspot.com

Thx :)
http://frenzyyakuza.blogspot.com

maksudnya loading di blog you gan,,,?

tapi jgn setarus persen gan tu sya cpek translite dri blog inggris

wah keren artikelnya gan.... mantap dah...

terima kasih atas tutorial memasang slideshow ini, nanti akan saya pasang di blogspot milik saya

mkseh nie gan, lanjutkan posting nyh y.
visit : https://duniaku-belajar.blogspot.com/

Ya Tp itu bisa di ganti2 sesuai dengan keinginan para blogger sendiri

sama2 gan...
saya doakan blog bapak toni menjadi lebih merik lagi
dan banyak pengunjungnya

Iya gan...
asalkan tidak di copas aja
hahaha

Keren gan slide shownya,Kunjungi blog saya juga yah.. indonesianterrific.blogspot.com

Biasakan diri kita untuk berterimakasih kepada orang yang telah mengajari kita walaupun itu hanya satu ayat
SPAMING AKN DIHAPUS OTOMATIS OLEH ROBOT BLOG INI

Back To Top