Membuat Kotak Iklan 300X250 Dan 125X125 Ala Kompi Ajaib

Dengan kotak iklan banner 300x250 dan 125x125 ala Kompi Ajaib ini maka kita dapat menambah sumber penghasilan dari blog. Untuk harga tiap slot iklan banner ini tentu saja dapat ditentukan oleh Anda sendiri sebagai Admin blog, dan dapat saja harga slot banner iklan ini dapat 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 instruksi 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 ibarat pola berikut ini -->
     <a href="#" target="_blank" rel="nofollow noopener" title="Membuat Kotak Iklan 300x250 Dan 125x125 Ala Kompi Ajaib">
     <img src="https://cdn.rawgit.com/KompiAjaib/webp/master/download_1_.webp" alt=" ala Kompi Ajaib ini maka kita dapat menambah sumber penghasilan dari blog Membuat Kotak Iklan 300x250 Dan 125x125 Ala Kompi Ajaib" title="Membuat Kotak Iklan 300x250 Dan 125x125 Ala Kompi Ajaib" 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 ibarat pola yang aku berikan.


Sumber https://www.kompiajaib.com/

Share this post