cara memasang slide show di blog terbaru 2013

Oleh Chairil Kaka

Monday, 31 December 2012

Bagikan :

Tweet

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE2U4pv6fzeswqF6MDOQeUYaTPeac7_89FQSsKdewkSvv2Z0Ow7XBRPCOV4O5oMy8EUqJY9NnuvvVibcdhKNrbpvGP5ywa3Us2VWssnxvms4YU_5Ke_9Ml_gzEnCCoKP1fxhq38fAq6UY/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/AVvXsEgGPgV_oA4U9SgPKC2Z6mYVuUqf_0ggQ-QQXgZpGTFFQX94NTkoP7Nl2JtEX8PPhVeCiKpJyTmF4G7TJSFU6Oxhbk3Gf6U0e52UX5FVxqwCVSVpnguDHBijQ9KWypX-alvbCvEBQXqTTIs/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/AVvXsEhNrm3hYk0ju9mDNKr5JTN9_4-3TiaFwhHTQlKUP6YIaZ5bMyHdiBpd8YG2iNnlv4uLnGgml0AvY8JPhjh_lpRgTB8ptoFAMDP3dBGEO5eGS8gexUsOFQfef7rIY-w-p7Cjh_Mf8Dk-YpU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYO0Uuh6bQaDtnLqQlX5vb-X3_9k0dyXoo2hwTSnhKFFb2TmdzaqQswjqodv2RUc3JPd7c2GXy2F3r1S0TB6ZFpKQiqestTQUeW_gMhyL-CVhjbWdQvdgDGQJAM3NIYOAm6_1rhHd9wXM/s1600/promo+vektor.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.

Tag : Tutorial Blogger