Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript

Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript

Bola Hero Gawai

Widget Slide Image Untuk Pasang Beberapa Iklan Dengan Javascript

Widget Slide Image Untuk Pasang Beberapa Iklan
Baru-baru ini saya mengikuti beberapa affiliate toko online, namun cukup repot juga ketika harus memasang lebih dari 1 buah banner atau widgetnya, hehehe...bisa-bisa blog penuh dengan banner iklan.

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

Untuk membuat widget seperti itu, akhirnya saya menemukan image slider dengan navigasi yang kemudian saya modifikasi agar tampilannya menjadi seperti widget Amazon seperti 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 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="http://4.bp.blogspot.com/-rh9aaoRW-B8/VWZ7hk5AJ7I/AAAAAAAAhLs/aLpSp71XjrY/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="http://3.bp.blogspot.com/-QxWagIqokOw/VWZ7hobq00I/AAAAAAAAhLw/3yZx1N_QWZc/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="http://4.bp.blogspot.com/-rcpI9-5zTjA/VWZ7hoCt0nI/AAAAAAAAhLo/eKQAIVGzHmM/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="http://2.bp.blogspot.com/-C8HNg0eC4a0/VWZ7iUm9B7I/AAAAAAAAhL8/_fz5VRwx5OE/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="http://3.bp.blogspot.com/-mlxLhfPHWFc/VWZ7iv-OvUI/AAAAAAAAhMA/ounpgJlqQa4/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="http://2.bp.blogspot.com/-cTskT32cm6A/VWZ7i4gu0NI/AAAAAAAAhME/hdct2Vykyps/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.

Live Demo


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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×