Cara Mudah Membuat Image Slider Dengan Java Script

Cara Mudah Membuat Image Slider Dengan Java Script - Sesuai judul postingan diatas, adalah cara mudah membuat image slider. Apa benar mudah ? tidak ribet ? Yup, benar sob, tips ini memang sangat mudah dipakai apabila sobat ingin membuat image slide di blog. Image slide ini sangat berguna apabila sobat ingin menampilkan banner, atau Hot promo, atau postingan blog sobat yang lagi terhangat. Lalu , apakah mempengaruhi loading blog ? kemungkinan sih berpengaruh, tapi semua itu bisa sobat pertimbangkan lagi apa keuntungan dan kerugianya apabila sobat memasang image slide. Untuk demo image slide nya silahkan lihat dibawah ini.

DEMO

Cara Membuatnya :

1. Login ke blogspot

2. Pilih Add Gadget

3. Add HTML

4. Masukan Kode nya dibawah ini :
_____________________________________________________________________________

<style type="text/css">
 /* JavaScript Image Slider By http://www.otowebsite.blogspot.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/AVvXsEikaT0LsXsdewT7vTTQKpmpomLJvHreHURLJag3KbIRdqC93ePlf5PcdZXnG9c2n5ZtWLWh_9P84ekSNbohAD3ywaSOyfZW5LCT84ybzY8UwR_tQvo1eaPxR4zHfujZkHMV2FisXzIt9w/s1600/otowebsite.blogspot.com--ribbon.png) no-repeat;
 z-index: 7;
}
#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgA4pHdaQTsSrWTSTwDHlg3IYt7z_3SDk8y4lLbZloLhJYeGof_H92BRW65LsNUoMRNjzPCOix4r4toxldcbHU-7AcF5xtQp3e-0ERabL_W1CZ5WvZJGv8JJgTpYBWmGYOlE3UnOxhyphenhyphenQ/s1600/otowebsite.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/AVvXsEhuR96Ktqm6HEHwSobdN4pXGImY0RAeX3qx5pFYDmIPZJk7ubiP3y-EKxmkP842VW7Nsnmwzjzi1raohGCYz_Kbr2KA3iYZEYCUw8ZOn5w5EY83WC-RY0FWqOX2LEgQK7f-6ZGFAO4dYA/s1600/otowebsite.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://otowebsite-blogspot.googlecode.com/svn/trunk/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhouzDawfAxGM9AbcVdBeIc8yhoTVNNtUoHb1j0qVfrYRyj6rFKwbFZUvZZNHl_7JXSAvMUPOscrlECicSN7qZdhu4JJiK81FpSjMtjqRzH43lbKQt2AyQpZ73RyHiMztfBB9uSiHZSA/s1600/otowebsite.blogspot.com-1.jpg" alt="Image Slider By otowebsite.blogspot.com"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgebaNoUlIJfxfJFy3CmCkTy5PtASDAeeAzJkqYL7Rtu6mfecC7rrj0AzYgFBPxamEDOy5X9urF9GcbKK2T1EXBUxy1G-GTWzjSxz-D4YqegDMCEMzTLqwOrMt0-e3Tw5_mVTHRhOPjcw/s1600/otowebsite.blogspot.com-2.jpg" alt="Oto Website"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKl5W_aFe3W5Hzkc7pJcWZBf3muCcJ07kdWZApGbodWkiWOAy8LLS2QW3XEyx9kuOIX0a6XNdL8eJ6DFJ-oTS-KbN4Eam7ut91ePoHcQEwFbtH6_RrhM_Ky7Pr8SzFJ_PR0Jl22UClxg/s1600/otowebsite.blogspot.com-3.jpg" alt="The slide is a linking image"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbiyPFb60lVdlGN8v-tvQ9NEN0lLcXeUGkPufl78JQ0Yk7mWZqVoNYK3bIy3m1qIGGWyHW5rOEwCNS1drdWR37U6wPZ-AKz0nu7WSF8OUaa0xWplcm4PHGq_fxKNB_7IUz42O80fENZA/s1600/otowebsite.blogspot.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UzBJRzxWJxk4X8GO7UBYXG8ScAI_Z0kf5RtmJsgCATC6RXi2Mih63I4jutCOTFIgA-RrSP1aOz3vU_fglVHjv00DOw106SkdzITRiXlmyy3Cv0Zjy66vL6E2PU1dstHG3BB_LLjikg/s1600/otowebsite.blogspot.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div>

_____________________________________________________________________________

Jika Anda ingin melakukan perubahan, Anda perhatikan kode-kode yang saya block di atas, dan berikut ini adalah keterangannya:

• Kode yang di block merah muda adalah lebar gambar.
• Kode yang di block oranye adalah lebar dan tinggi widget.
• Kode yang di block kuning adalah url gambar.
• Kode yang di block biru adalah tempat untuk menempatkan url tujuan.
• Kode yang di block hijau adalah title dari gambar.

Bagaimana Sob mudah kan cara membuatnya. Terima kasih telah membaca artikel Cara Mudah Membuat Image Slider Dengan Java Script.

Semoga bermanfaat

Script By : http://www.otowebsite.blogspot.com

Share this post