Membuat Kotak Iklan 300x250 Dan 125x125 Ala Mas Trigus

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

Seperti contoh;


Pertama tambahkan CSS berikut ini pada Style Blog sobat;
*{-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:#1c79c0;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:"IKLAN 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:"IKLAN 300x250";}
.clear{clear:both;}

Lalu tambahkan Widget berikut ini;
<div class="widget-content">
<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 -->
    
    </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>
</div>

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

0 Response to "Membuat Kotak Iklan 300x250 Dan 125x125 Ala Mas Trigus"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel