Widget Gambar/ Banner Dengan Efek Slide

Widget gambar/ image slider untuk pasang beberapa iklan dengan navigasi valid HTML5.

Yang ingin mencobanya, silahkan gunakan kode-kode di bawah ini.

Kode CSS
Simpan di atas kode </style> atau ]]></b:skin>

.che-slideshow{overflow:hidden;position:relative;margin:0 auto;width:300px;height:250px!important}
.che-slideshow-slide,.che-slideshow-slide img{width:100%;height:100%}
.che-slideshow-slide{top:0;position:absolute}
.che-slideshow-slide.inactive{display:none}
.che-slideshow-slide.position-left{top:0;left:-100%}
.che-slideshow-slide.position-right{top:0;right:-100%;position:absolute}
.slideshow-control{height:25px;cursor:pointer;position:absolute;bottom:0;width:25%;background:rgba(255,255,255,.6);z-index:1;color:#000}
.slideshow-control.slideshow-left-control{left:0}
.slideshow-control.slideshow-right-control{right:0}
.slideshow-control:hover .slideshow-arrow{opacity:1}
.slideshow-control .slideshow-left-arrow{left:50px;height:25px;margin-top:0;opacity:.6;position:absolute;top:5px}
.slideshow-control .slideshow-right-arrow{right:50px;height:25px;margin-top:0;opacity:.6;position:absolute;top:5px}
.slideshow-indicator-container{left:50%;list-style:none;margin-left:-30%;padding-left:0;position:absolute;text-align:center;bottom:-10px;width:60%;z-index:15}
.slideshow-indicator-container .slideshow-indicator{background-color:rgba(255,255,255,1);border-radius:5px;display:inline-block;height:8px;width:8px;padding:0!important;line-height:1em}
.slideshow-indicator-container .slideshow-indicator.inactive-indicator{background-color:rgba(255,255,255,.5)}

.slideshow-control untuk mengatur background dan warna tombol next dan prev.
.slideshow-indicator-container .slideshow-indicator untuk mengatur navigasi (titik) dan menandai banner yang aktif.
.slideshow-indicator-container .slideshow-indicator.inactive-indicator untuk mengatur navigasi (titik) untuk menandai banner yang tidak aktif.

Kode HTML
Simpan pada gadget HTML/JavaScript di sidebar

<div class="che-slideshow">
    <ol class="slideshow-indicator-container">
     <li class="slideshow-indicator">
     </li>
     <li class="slideshow-indicator inactive-indicator" >
     </li>
     <li class="slideshow-indicator inactive-indicator" >
     </li>
     <li class="slideshow-indicator inactive-indicator" >
     </li>
      <li class="slideshow-indicator inactive-indicator" >
     </li>
      <li class="slideshow-indicator inactive-indicator" >
     </li>
    </ol>
      <div class="slideshow-left-control slideshow-control">
           <i class="fa fa-chevron-left slideshow-left-arrow slideshow-arrow"></i>
      </div>
      <div class="slideshow-right-control slideshow-control">
          <i class="fa fa-chevron-right slideshow-right-arrow slideshow-arrow"></i>
      </div>
    <div class="che-slideshow-slide">
     <a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxymvu40EI8ph0rEwxus-o9CwT96wzszw9h_ghqZApKPCgD-2vdq7xC7YGSkpYA2dRbaZd5tRnKJ-ofccQC0UhsQau_PLrSXdP_ZWdObL2WWufb7gO4KxhGptu2Yq_V8jqoTJbDTXO0DkV/s1600/banner_1.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
     </div>
    <div class="che-slideshow-slide inactive">
     <a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHSy1fAN6SCyw9BIwGgF5fWoxltKA-D09G2aFMSjL1MglFvnAhQc5DZWr77dpUP8gwciflcl7iK0GqcKWZawvRSabbrezBxZr5NY_f66_3VRsX-6wpi3B6eWMCVDw69nQ7RnE36nTL_TUj/s1600/banner_1a.jpg" alt="kamera" title="kamera" width="300" height="250" /></a>
     </div>
    <div class="che-slideshow-slide inactive">
     <a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zrc5poMrLuuoC_SLUElDKLSWBODTMdVUSILxdIbzJgtBdVSbYW1jTj3Vf5tzRyV0TqbMQGr72dfHbrwU8nzOEdsv5ONl1baYZ_EABgqowHIM3LYyYuCBgXrVeLfVF_35Mjny5TDn7Xg0/s1600/banner_2.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
     </div>
    <div class="che-slideshow-slide inactive">
     <a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0jeOgEsUq0-ucoq4tzEKoL79Vir6IvPOVT0viGQd-dii5Zhe_5YzkgDwoYvn1qqmL9AngCvdzBwabHJnUsWTq82KJzBYcwBX-VVGqNT4r3R2hxtl3w6LXbsvxIxvHNWpGAVCj-CMI-bv/s1600/banner_2a.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
     </div>
    <div class="che-slideshow-slide inactive">
     <a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBZbfOInyxlbFPe-jnSI5suTzMM4jrNBnvDnv9NfArU3akpJB8QmuD8pZ5R5Cdv_rZLHBLvrBFXXJCdioctAQGFd1zqttxWVWCA2UfnE2igrnSIZYJzoie8eikrxbQqt6wK1SlgJcU6Ax/s1600/banner_3.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
     </div>
    <div class="che-slideshow-slide inactive">
     <a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhSQjiLtCEEV7I1jHBbGSFEK0n4HyqsBB-gLLHBh-YRdMWonrpn8hqSuLEhE0Cn8isht0CNc7Fm-iY9fs7HpLKelvXiYVfc1YN9AVZmO-AOdSUZ-WNic9ns8F2cuSu4bW9JnBXsq4QhHGO/s1600/banner_3a.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
     </div>
   </div>

Kode yang saya marking silahkan ganti dengan kode banner iklan Anda, bisa gambar dengan link atau iframe, bisa ditambah atau dikurangi jumlahnya sesuai dengan banyaknya banner yang ingin Anda pasang.

Dan untuk jumlah <li class="slideshow-indicator inactive-indicator" ></li> silahkan sesuaikan dengan banyaknya banner yang Anda pasang.

Kode Javascript
Simpan kode javascript ini di atas kode </body>
 

<script type="text/javascript">
//<![CDATA[
var CHESLIDESHOW=function(){function e(e){return c?!1:(c=!0,d=e,t(e),v[a].classList.add("inactive-indicator"),v[newSlideIndex].classList.remove("inactive-indicator"),s.style.left="prev"===d?"-100%":"100%",l.style.left="0%",s.classList.remove("inactive"),n(s),void n(l))}function t(){"prev"===d?newSlideIndex=void 0===r[a-1]?o-1:a-1:newSlideIndex=void 0===r[a+1]?0:a+1,l=r[a],s=r[newSlideIndex]}function n(e){function t(){l.classList.add("inactive"),s.style.left="0%",clearInterval(i),a=newSlideIndex,c=!1}var n=0,i=setInterval(function(){e.style.left="prev"===d?parseInt(e.style.left)+2+"%":parseInt(e.style.left)-2+"%",n++,n>=50&&t()},7)}function i(){var e=document.getElementsByClassName("che-slideshow")[0];e.style.height=getComputedStyle(r[a]).height}var l,s,d,o=6,a=0,c=!1,r=document.getElementsByClassName("che-slideshow-slide"),v=document.getElementsByClassName("slideshow-indicator");return window.onload=i,window.onresize=i,{nextSlide:function(){e("next")},prevSlide:function(){e("prev")}}}();!function(){var e=document.getElementsByClassName("slideshow-left-control")[0],t=document.getElementsByClassName("slideshow-right-control")[0];e.addEventListener("click",CHESLIDESHOW.prevSlide),t.addEventListener("click",CHESLIDESHOW.nextSlide)}();
//]]>
</script>

Kode o=6 untuk mengatur banyaknya banner yang dipasang.

LIHAT DEMO

Namun karena widget ini menggunakan ikon Font Awesome, maka pastikan Anda sudah memasang CSS Font Awesome di blog Anda.