Cara Pasang Beberapa Iklan Dengan JavaScript Menggunakan Widget Slide Image

Saat iseng browsing untuk cari wangsit postingan berikutnya tiba-tiba aku tertarik dengan postingan yang memperlihatkan tutorial modifikasi instruksi javascript ada yang membuat aku sangat penasaran dan tertarik untuk mencobanya, didalam artikel tersebut ada tampilan iklan menggunakan widget slide image aku coba telusuri instruksi tersebut dan kesudahannya aku coba modofikasi instruksi javascriptnya.

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

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

Penerapan Kode CSS

Silahkan teman salin instruksi CSS ini dan letakkan di atas instruksi </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 instruksi 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 instruksi 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/AVvXsEijDdiDOzJNJKYriJFIx5ifpRuvZ84XlFMMIMmvHAaFluIGh68sWtEXMzjFBOUyP4a3kDuMe3u3bjh0ycTpAh8y4XjoEOwvt_MnSnWn8G0IiCJeS1E2ty99QIw-HBMVzCJVrywvaT0F2lgZ/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/AVvXsEhP4faD65YcvBocJ1B0HVd2xdsH1DwXc3ZyTf3m360DIhG22nkRG7id4Yaf_nO85eioRUt56zp7yc8bIMZw9d5a7M0LHtUt4-s6Ku3hK0SF8_xc53jyiMnnvKphe2Ts8BqGZxxoV8bAPSww/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/AVvXsEjMTQDd4t-3wmxBuAtyClFVjWHxGLXtCql2GxSAjoeHOad4mw-lSnTuRaNCPUACxyKsBaZJrHVFRj50gFrxPD1dIThhW8vmrjUaEuGBOWH8bx2bSjA9_n5TN5O9th-ewbAP181nc8w5lIsc/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/AVvXsEjQQtNSKHNb2i3OPurluLfmgCM_Wdl0PTlfGii-X6_IcB0IzGFKUovaFWkI4pYLXnoVeEJ6Bd9eSMdA9U_jaSYEVxUgwwin2Otf_zqqMGbngvlg0Npw6taL3344ZjIWwT5xx0dHZF2xtWrk/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/AVvXsEiUmJzAtiUAKjNYCR7KNh-oKkTkrAUr4SLvAWHiRkPKULaQZhMNH0l7p5BW28r_9gilubogqxP7O0ZSkrvTBob4a9KASVtorttMsgnIPWnJlsDP1n65MJXR67ubY_eRflivLcw5eFslfAwa/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/AVvXsEjLE-solODoCQMzeCKvKukJfWnEERq1ZYUFg3pUtm6GLi-GsVNnQLFrk7WPF7yxzyE4FGMRnQ0oeeOC6E2gMAJzUYbvGFuWq2o3LFoO3v-2cw2bG-Fd4SVyj5PXiYYhmwUJSQG6c19sZRbs/s1600/banner_3a.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>   </div>   </div>

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



Penerapan instruksi Javascript
Silahkan teman salin instruksi dibawah ini dan letakkan diatas instruksi </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 instruksi yang ditandai o=6 itu fungsinya untuk mengatur berapa banyak banner yang akan ditampilkan atau dipasang. Dan Selesai selamat mencoba.