Membuat Kotak Iklan 300x250 Dan 125x125 Ala Kompi Ajaib

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/06/2018

Keberadaan sidebar di blog bukan hanya digunakan untuk kepentingan penunjang konten blog, namun juga bisa digunakan untuk ruang iklan mandiri yang biasanya menampilkan banner iklan 300x250 atau banner iklan 125x125. Sehingga ini bisa menjadi alternative monitize blog selain dari iklan Adsense atau lainnya.

Namun keberadaan banner iklan 300x250 dan iklan 125x125 ini harus kita tata dengan rapih agar tampilannya tidak merusak pemandangan. Apalagi jika space iklan belum terisi banner, maka tampilannya harus rapih agar orang mengetahui bahwa kita menyediakan slot iklan banner 300x250 dan iklan banner 125x125.

Untuk itu kini kita akan membuat kotak iklan 300x250 dan 125x125 di blog ala Kompi Ajaib dengan CSS dan HTML yang sederhana namun tampilannya rapih dan memberikan informasi yang jelas kepada orang lain bahwa tersedia slot iklan banner di blog.

Dengan kotak iklan banner 300x250 dan 125x125 ala Kompi Ajaib ini maka kita bisa menambah sumber penghasilan dari blog. Untuk harga tiap slot iklan banner ini tentu saja bisa ditentukan oleh Anda sendiri sebagai Admin blog, dan bisa saja harga slot banner iklan ini bisa berbeda-beda.

Jika slot iklan belum terisi banner iklan, maka slot akan menampilkan text yang menjelaskan bahwa slot tersebut tersedia untuk iklan banner, baik iklan banner 300x250 dan banner iklan 125x125.

Untuk penampakannya silahkan lihat pada JsFiddle berikut ini.


Jika Anda ingin mencoba menggunakannya, silahkan ikuti langkah-langkahnya berikut ini.

Silahkan tambahkan CSS ini pada style blog Anda, untuk AMP silahkan tambahkan style amp-custom.

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

.kotak_iklan{background:#efefef;width:300px;margin:0 auto;text-align:center;padding:16.6666666667px}

.kotak{background:grey;height:125px;width:125px;display:inline;margin:0;padding:0;float:left;position:relative;}

.kotak:nth-child(1),.kotak:nth-child(3){margin-right:16.6666666667px}

.kotak:nth-child(1),.kotak:nth-child(2){margin-bottom:16.6666666667px}

.kotak a{position:relative;display:block;z-index:2}

.kotak:before{content:"Your Space 125x125";line-height:1.2;position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;font-size:20px;display:flex;flex-direction:column;justify-content:center;z-index:1;}

.kotak-300{width:300px;height:250px;}

.kotak.kotak-300:nth-child(1){margin-right:0;margin-bottom:0;}

.kotak_iklan.p0{padding:0;}

.kotak-300:before{content:"Your Space 300x250";}

.clear{clear:both;}

Kemudian silahkan simpan kode HTML berikut pada widget HTML/JavaScript di sidebar.

<div class="kotak_iklan p0">

    <div class="kotak kotak-300">

    <!-- simpan banner 300x250 di bawah ini -->

   

    </div>

    <div class="clear"></div>

</div>

<br />

<div class="kotak_iklan">

    <div class="kotak">

    <!-- simpan banner 125x125 di bawah ini seperti contoh berikut ini -->

    <a href="#" target="_blank" rel="nofollow noopener" title="Bitcoin">

    <img src="https://cdn.rawgit.com/KompiAjaib/webp/master/download_1_.webp" alt="Bitcoin" title="Bitcoin" height="125" width="125"/>

    </a>

    </div>

   

    <div class="kotak">

    <!-- simpan banner 125x125 di bawah ini -->

   

    </div>

   

    <div class="kotak">

    <!-- simpan banner 125x125 di bawah ini -->

   

    </div>

   

    <div class="kotak">

    <!-- simpan banner 125x125 di bawah ini -->

   

    </div>

   

    <div class="clear"></div>

</div>

Tinggal simpan banner-banner iklan pada slot-slot tersebut sesuai keterangannya dan seperti contoh yang saya berikan.