Cara Menciptakan Kotak Iklan Ibarat Kompi Ajaib

Cara Membuat Kotak Iklan Seperti Kompi Ajaib - Adanya sidebar di blog bukan hanya dipergunakan untuk menciptakan pengunjung membuka kontent kau yang lain, sidebar juga dapat dipakai untuk lokasi menempatkan iklan baik itu adsense atau iklan dari orang lain atau juga dapat sebagai kotak iklan alternative adsense.

kali ini aku akan bahas menciptakan kotak iklan menyerupai ala kompi ajaib, kotak iklan ini terlihat rapi tidak awut-awutan yang juga pengunjung tidak akan merasa terganggu dengan adanya kotak iklan ini, kotak iklan ini berukuran 125x125 dan 300x250 yang akan di rapihkan oleh CSS. Kotak iklan ini sangat terlihat sederhana dimana kalau ada slot yang kosong pengunjungpun akan tau dan mungkin saja ada yang mau beriklan di blog kamu.

Kotak Iklan di Sidebar yang Rapih

1. Copy CSS berikut di sebelum ]]></b:skin> atau </style>, kalau kalian memakai template valid AMP masukan di bagian <style amp-custom='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;}

2. Silahkan copy dan simpan code html berikut pada sidebar blog kalian untuk menampilkan iklannya.

 <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 menyerupai tumpuan berikut ini -->     <a href="#" target="_blank" rel="nofollow noopener" title="Cara Membuat Kotak Iklan Seperti Kompi Ajaib">     <img src="https://cdn.rawgit.com/KompiAjaib/webp/master/download_1_.webp" alt="Cara Membuat Kotak Iklan Seperti Kompi Ajaib Cara Membuat Kotak Iklan Seperti Kompi Ajaib" title="Cara Membuat Kotak Iklan Seperti 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>

3. Silahkan masukan iklan kalian di bawah <!-- simpan banner 125x125 di bawah ini -->.

Dengan adanya kotak iklan di sidebar kalian dapat menambahkan banyak sekali jenis iklan dari mana saja.