Java Script Image Slider

H ari ini saya akan berbagi slider keren yang bekerja dengan JavaScript dan jQuery  dan flash slider needed. Java Script Image Slider ini berisi pita di sudut kiri atas slider dan itu disebut sebagai "What's Hot", juga mengandung efek slice irisan gambar indah yang menjadi 12 bagian, fitur utama peningkatan keindahan fitur besar slider. Slider ini sangat disesuaikan sehingga untuk mengeditnya sesuai keinginan dan yang sempurna akan sesuai untuk slider blog. Slider ini dibuat oleh menucool.com  dan Saya telah menciptakan sebuah versi Template slider pada kerja yang sempurna dengan blogger blog. Untuk melihat demo Java Script Image Slider silahkan klick tombol di bawah ini.

LIHAT DEMO

---

Cara membuat/memasang Java Script Image Slider

---

Untuk membuat Java Script Image Slider ini juga sangat mudah, ikuti instruksi berikut untuk mulai menerapkannya pada blog Anda.

1. Login ke akun blogger Anda.

2. Pada Dasbor klick Tata Letak ➨ Tambah Gadget.

3. Pilih elemen HTML/Java Script.

4. Lalu copy kode berikut dan letakkan di dalam  elemen HTML/Java Script tadi.

<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/AVvXsEj-egcAVEL2Lds5ykWKK_0BCV1KNGxq6XeUN6LUuSWgn5RD-mum8kEf5QRT3ZRQhMFLaMpKbGfwJIq-8rler0tcySL_dcSkiR_YPl4UgfO4VkRU2xwaJTEff6ErE7WaYLhHOyRc_KGh2g/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/AVvXsEhvChpE2kLRT0jbf1rlBh7Ke7G3sVdgd9eeSxzO-6KHrIaQJ6IL9EcPcp_ShxsrxARb_6xLQlVdoBJZAnK-NzXZEL0Bd9hqQLhoBBdEOPE1ZdGfuv48C6grJBb-0orhGj5tQYv4rPkTPg/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/AVvXsEgnrwXoVm0zYJTkd4FHCKzkMIJHw_ELJtZmB_9wdMMXn15lwzwshXQi3cJtkh0LC1SLX3M0hLIzymlibGG71VT3xRmh52SPkOOvCVFg4Tc4FKKH2xm9LZ5GWHHlQ5juGhW_7DlkRDdY-g/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/AVvXsEj5jn2Sx2OnPNy_7x0Qv-JBu-Qd_9rqAsferwNyc95lVK6bV6P5jxwFOeio_eSEPO-oHryzx6cjiPYfpXMziLxBVAPlIOdrFyILYFHagASQyxacmORInM350Xoae0SNL3ezq58Gnyea0g/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/AVvXsEg-82JL0jDNbE05qeNvtLxiF_QsKoms-QceWQY56GRD1yJA20iwsDYs94fodsbGgo6_5PGiJWJ2Qi5Rz8h9APKqosHOv57kPMuzD1S_y-zGgIbKfdREXFxuaEIQx6A8mBKDxgI_JuOwLA/s1600/otowebsite.blogspot.com-2.jpg" alt="Oto Website"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsiLjpjW9GVKoY2FvuXBk6_4LHY5ZMLniakHaWa4wJkPO4rfIt5-Yb8usHXxw6nkuJO931jjPAVknIyMm3dssP3R-OxGCTPxnQZRyuq1NfxtgldLK-4aTMBf263SWitgLFL5_z7xu_Q/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/AVvXsEg9SDZwKHee_Weru9TGZbskor-33KZbR69x5Whu0h9Qv9TxlPp1u_Je6mNrlYjSQpyUkJYfupXKtOzFSlOudNm9yAqi1AIi1p_r9az2SyALu5uGCdoXmIB8cN9H3ctrQQsG8EjGpDe1AA/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/AVvXsEhRc3KYvchmDkMXl4sUGOCtoSiRS1EyNb3jYiZ47YBGppwtX6TgSJZpRRZMDkCeYQybLsO6Y_P2zVF9WPmpy0uk9nGdewEciS4B5qskzmxEX4rdYcmSasHfL4x_lgV_8iYTlZIEhG0fWg/s1600/otowebsite.blogspot.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div>

5. Simpan.

---

Melakukan Perubahan

---

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.

---

Mengalami Kesulitan?

---

Jika Anda mengalami kesulitan dalam Cara membuat/memasang Java Script Image Slider, jangan sungkan untuk bertanya, saya akan dengan senang hati membatu Anda.