Cara Pasang Beberapa Iklan Dengan JavaScript Menggunakan Widget Slide Image

Saat iseng browsing untuk cari ide postingan berikutnya tiba-tiba saya tertarik dengan postingan yang memberikan tutorial modifikasi kode javascript ada yang membuat saya sangat penasaran dan tertarik untuk mencobanya, didalam artikel tersebut ada tampilan iklan menggunakan widget slide image saya coba telusuri kode tersebut dan akhirnya saya coba modofikasi kode javascriptnya.

Nah di postingan kali ini akan dibahas yaitu Cara Pasang Beberapa Iklan Dengan JavaScript Menggunakan Widget Slide Image. Mungkin sobat pernah juga memasang model iklan slide image biasanya seperti tampilan kode iklan seperti affiliate toko online seperti Lazada, Amazone dan sebagainya, mereka biasanya memberikan kode iklan untuk Publisher dipasang di Widget blog yang tampilannya Slide image, termasuk saya juga pernah menggunakannya dan alhasil blog saya penuh dengan hiasan iklan yang pastinya membuat loading blog menjadi lambat dan secara otomatis juga menurunkan nilai SEO pada blog kita.

Bagi sobat yang ingin mencobanya silahkan simak Cara Pasang Beberapa Iklan Dengan JavaScript Menggunakan Widget Slide Image namun sebelum mencobanya pastikan di blog sobat sudah terpasang CSS FontAwesome karena icon di kode ini menggunakan ikon Awesome.

Penerapan Kode CSS

Silahkan sobat salin kode CSS ini dan letakkan di atas kode </style> atau di ]]></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)}

Perhatikan kode yang di tandai itu berfungsi sebagai berikut :
.slidshow-control  untuk pengaturan background dan pengaturan warna pada tombol prev next
.slideshow-indicator-container  .slideshow-indicator pengaturan navigasi dan banner aktif
.slideshow-indicator-container  .slideshow-indicator.inactive-indicator pengaturan navigasi dan banner tidak aktif.


Penerapan Kode HTML
Silahkan salin dan simpan kode HTML di gadget HTML/Javascript pada sidebar blog sobat

<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/AVvXsEgLAx_YcbSq-DPWj1jTUYWZ9vNll9KyQ3-CPPL1yGKd0zKBY0gVRw-896AZ3w3b7bvfAyxe5g3WZP5iOayeVnICa_4i1g52de-DwFlnzcerQJzBWgrbVgAo_tdsGE3qG_fbsvQbKpwTtKNI/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/AVvXsEiUQdZAdiksFQ22AndSWb7FKZU29KISbazqrh4Xl5BFRkB0tvau4UhrkGsug4ZjHZ_dfwCqp_gJH7SFhMbTRi-8l_Dh8pieJm4_QW2CxB_wgO0RMpSCL9G6oyFEy7YwxVuo5YK20rbFf0qO/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/AVvXsEicpBkSkJLJwDv1fsh5Ov7AGk39mYuOhqyM08zsJH6uv9glVjCigXHj6_76uIPqdbHmlDgCsD_v9JkPz9KxEuS_Dug_NAuMcndKXNf0H5FbS62kNafhCU99zGkyM3rlnxWHSl67_H5BIiJC/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/AVvXsEiVV0VWwJoFR0vb2ADNDq2ufvLCM-sLL5ZcYLKJ7cTrUx2zJC9CiNtzbOB0XqKU2_Q7A_djPKTfeCEQo4AVhahA4Vv0wGfEguKdohaEmzZv7Lwe5h7OUThETxCRB-M-0-fwv5vHHw5RGaqm/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/AVvXsEjSIiSOVtMUxh0Ylt6hK0b_2TdgUVFxSKMzUgp-EsereaTWRu_VsNzhR8yHSod0yi01W9bgKRSwKh5lgDQzJBiAM3FnlVHF5k-1ESUYmuvc7xa_U_coXApcw6KfzzJUUEL7f4MauGVZAXzd/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/AVvXsEjTeFGIcZ-e86yhxvc0sCs5lDQbYUm2l9-LS42FMhuSuVxmhG7VJaLShjs9pjjKU5yoXnP7Qt05g_xN1UndOWmVmlWQVKEoHsKh8y1aVxA6AKvS0mtlEfydu_FxllAojT5ApolxwICWVUjs/s1600/banner_3a.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
  </div>
  </div>

Perhatikan kembali kode yang ditandai silahkan sobat ganti dengan kode link banner sobat atau bisa juga kode Iframe silahkan modif jumlah yang ingin ditampilkan. Untuk kode <li class="slideshow-indicator inactive-indicator" ></li> silahkan sobat atur dan sesuaikan banyaknya banner yang akan dipasang.



Penerapan kode Javascript
Silahkan sobat salin kode dibawah ini dan letakkan diatas 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>

Perhatikan kembali kode yang ditandai o=6 itu fungsinya untuk mengatur berapa banyak banner yang akan ditampilkan atau dipasang. Dan Selesai selamat mencoba.