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/AVvXsEjFMkEbpzMlOwji2pWdMHCAHXJG7qAu4uC3fIg9OngNrvF0-IuAuP4aZpeob9A9Wp-BBiRJ0OhVDF8s5a8v0bCGL58_llbnrAguJv3mia_TAZmJK5j3FYjIAuGLES4fptMMGNY3otbWTA/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/AVvXsEjKBWIE7zlgRENv3O8gvoJqNOsvKGyFJYwZu_w30NM7GVvEDjPJ_hUOVIAFNQHSZwJuXprGRTAzbagapMzmOZttjLIK1cIQ7fkIPizxKOXSRhAKKgI5DtVGqcwaU1ddaO43wfq03Imc7g/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/AVvXsEjmrZjkCiXxFYYsqtx2ZSpAADWIa8Lj10dgciuCUVQrw3KAT35M41ocOzDcztVgKOSZ5o28NltlB0oWHci5zhLSCFFkk8D9iptT2JEuiQsZDExRCnROgDSjBDxQiaaWBBKP0A4Of296Lw/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/AVvXsEj0mPXL2Qgq6aJFe07cLafplOoWFGmi7hLMwpNLaB6sIvCuPy9ldI7i-HE_NHldRK-6pf51TdoMzwMzUZ9ucFBVTsvSv99Q2Y07rAK61fvoB_ktG4_L1cqbAIMGrJtZYWwWYsw6pPr8Lw/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/AVvXsEjqLiFPs7tW_UCPIscDYko9YXTD6qfcHyHY_dxWlMSmgqMhqRXOyQZYc2oMyoTTj4TTYgF1h3njjrN3TD8nxejthUKGks5VVAd6XCWoSwyNfj6_a7ISkDT-WjUzZRmQfwEeJOLo8Labsw/s1600/otowebsite.blogspot.com-2.jpg" alt="Oto Website"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumCl721kzeFEhIp5YUePEyF4VQ1fL44TnRDFXZ_g_7m5BjPH53wBI9uwoY1eic8rQzOpNtMwjTvFxR6YFXScYaZEnuRhiF459nWYoAc5mMbtTTClyBX9nfMrLtlnueAnrgeEg2pt_iw/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/AVvXsEiiYQy2AIZBHIFdgK9Qq9ppE9AABLZAUYgkT4HMqkwSSBWWK6n7JfHzpPpGkNX8xqqlrJh8ljekLxhH9jd2U9G3Tra_j6i-n_NGQ0vi9CwtT5c_wSzUbf_rsmLZ5kwR1OsfXauuDt-jNg/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/AVvXsEgUjdRDGk6VldRpy0Q9wqR91flco5TNtEnHnOXrqMFGXsUhHLLrD1IS_zH_76VVzIzf3ehopYgKuoDQ7ipxOb2HgT12KkT9cagthtwgWW-KwRVhBhMT4_sW51yum1yC0hIncoYBjY7I_A/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.
Tidak ada komentar:
Posting Komentar