Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript

Baru-baru ini aku mengikuti beberapa affiliate toko online, namun cukup repot juga dikala harus memasang lebih dari 1 buah banner atau widgetnya, hehehe...bisa-bisa blog penuh dengan banner iklan.

Untuk itu lalu aku mencari cara untuk menempatkan beberapa banner atau widget iklan affiliasi biar tidak memenuhi blog. Kemudian aku tertarik dengan sebuah widget dari Amazon yang menampilkan beberapa banner produk dengan tombol navigasi menyerupai pada gambar animasi gif di atas ini.

Untuk menciptakan widget menyerupai itu, balasannya aku menemukan image slider dengan navigasi yang lalu aku modifikasi biar tampilannya menjadi menyerupai widget Amazon menyerupai pada gambar animasi gif di atas. Dan widget ini sudah valid HTML5.

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

Kode CSS
Simpan di atas arahan </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="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2Hvdm99I2b8tZNgO-IYcAG0c-E8pgh3NCz6XQNGSm3HpdL3dQ9mkDqXV30vE7xmFUvb-B6byY2avet5bW5dKPB24u5aYBXGnnQE2IsJAs2K1TyAh9uNL5bTqoFaTTl9oB5vxXK7PRJn6/s1600/banner_1.jpg" alt="Widget Slide Image Untuk Pasang Beberapa Iklan Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" width="300" height="250" /></a>
   </div>
   <div class="che-slideshow-slide inactive">
   <a href="#" rel="nofollow" target="_blank" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5CdTIJMlyoorHAkCiz9IDJ86oMckZ3i9D-yZ1kgl3yvuNIZvS8SBHZdsFLmpzfj2ZqvxuSzr25n8yg_1KkIlvRSrewzaIY1H7S5woier7sXfVKRPeAwwLUT-rHJcERCFprKPhXSFBEKB/s1600/banner_1a.jpg" alt="Widget Slide Image Untuk Pasang Beberapa Iklan Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" width="300" height="250" /></a>
   </div>
   <div class="che-slideshow-slide inactive">
   <a href="#" rel="nofollow" target="_blank" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_-LwWMNgUuqEovCkAVUOOqoV4RvemEIKGoXFMhunIe54bYKC32YY5N3gaiuRhMoxdzjff2e_j7CJtLIfUgnsiX0witRhqwNaxSCUzphTJdx1Vy5mYz6bTMFy5QPAFUsPsfRVs_Deo7yW/s1600/banner_2.jpg" alt="Widget Slide Image Untuk Pasang Beberapa Iklan Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" width="300" height="250" /></a>
   </div>
   <div class="che-slideshow-slide inactive">
   <a href="#" rel="nofollow" target="_blank" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0voeaIVp1JVDAXwiiMHRa2OzidIO2cH0PR84o96hKgLZ9jW7tv2-gwC9DVdr3emRv-APUavtr7eD26eWFPWLQ-oDCF7hGmkftcOPo7l55Yupp7CL0TivsuWDNms_La9A5yZ2I2Fg5HBWw/s1600/banner_2a.jpg" alt="Widget Slide Image Untuk Pasang Beberapa Iklan Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" width="300" height="250" /></a>
   </div>
     <div class="che-slideshow-slide inactive">
   <a href="#" rel="nofollow" target="_blank" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieteIRlM73ezWBf9OoqWwwSRtpkHstgmLTZGO8qW9tWichbEALco1XiB_uU0gn-F8MJcSsf22hCiWdU8KnNz483cl0UESM_lulg7JbO8GdkhIq4HIygzAm7uyyebVbmHEldvJ3BIq6HQxP/s1600/banner_3.jpg" alt="Widget Slide Image Untuk Pasang Beberapa Iklan Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" width="300" height="250" /></a>
   </div>
     <div class="che-slideshow-slide inactive">
   <a href="#" rel="nofollow" target="_blank" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHmgkh9DNaT-2LD3cDFyc7B9y2ZMVjLsqgIML69F4Byp_JZQhLgF6xvhw7LP_9pT4ItQCJHzx3IClZu-sdu3icSvQ6GnJHZdVGB-acI6YARzrpGZPXLNzCv4FjJ3TGp4KS87kKoR1GNke6/s1600/banner_3a.jpg" alt="Widget Slide Image Untuk Pasang Beberapa Iklan Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" title="Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript" width="300" height="250" /></a>
   </div>
   </div>

Kode yang aku marking silahkan ganti dengan arahan banner iklan Anda, dapat gambar dengan link atau iframe, dapat 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 arahan javascript ini di atas arahan </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.

Live Demo


Namun alasannya widget ini memakai ikon Font Awesome, maka pastikan Anda sudah memasang CSS Font Awesome di blog Anda.
Sumber https://www.kompiajaib.com/

Share this post