Cara Membuat Slot Iklan di Blog dengan Ukuran 300x250 dan 125x125

Halo sahabat Pena Info, apakah anda memiliki blog dan ingin menambah penghasilan juga? Lalu bagaimana caranya?

Yaa pada umumnya bagi anda yang seorang blogger pasti akan memonetisasi blog anda dengan memasang slot iklan yang bermitra pada Google Adsense.

Namun apabila penghasilan anda masih belum sesuai dengan yang diharapkan anda dapat menambah memasang slot iklan mandiri.

Nah tentunya iklan yang sesuai dengan kebijakan Google Adsense. Anda dapat memasang slot iklan pada bagian sidebar blog anda.

Sejatinya sidebar blog tidak hanya digunakan sebagai penunjang konten-konten yang ada di dalam blog anda, namun dapat dimanfaatkan juga untuk membuat slot iklan.

Nah slot iklan tersebut dapat anda isi dengan banner bisnis atau usaha-usaha anda maupun promosi yang lainnya.

Anda juga dapat menyewakan slot iklan tersebut kepada orang lain dengan kesepakatan harga yang anda ajukan. Slot iklan tersebut dapat menjadi alternatif penambah penghasilan selain dengan Google Adsense.

Biasanya agar tampilan blog tetap rapi dan cantik, anda dapat menyediakan slot iklan ukuran 300x250 dan 125x125 dengan CSS dan HTML yang sudah disesuaikan.

Keberadaan banner iklan pada sidebar tersebut harus dibuat semenarik dan serapi mungkin agar pengunjung lebih tertarik melihat segala ruang yang ada di blog anda.

Berikut ini Pena Info akan memberikan langkah-langkah untuk pemasangan slot iklan tersebut. 

Langkah 1. Menambahkan CSS 

Copy CSS di bawah ini dan Paste pada style blog anda, namun untuk versi AMP silahkan tambahkan pada 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;} 

Langkah 2. Menambahkan Kode HTML pada Widget HTML/JavaScript di Sidebar Blog

Copy kode HTML di bawah ini dan Paste pada sidebar blog anda dengan widget HTML/JavaScript.

<div class="kotak_iklan p0"> 

    <div class="kotak kotak-300"> 

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

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

    <img src="#" alt="Deskripsi" title="Judul" height="125" width="125"/> 

    </a>   

    </div> 

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

</div> 


 

<div class="kotak_iklan"> 

    <div class="kotak">

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

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

    <img src="#" alt="Deskripsi" title="Judul" height="125" width="125"/> 

    </a> 

    </div> 
 

   
    <div class="kotak"> 

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

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

    <img src="#" alt="Deskripsi" title="Judul" height="125" width="125"/>

    </a>   

    </div> 


   
    <div class="kotak"> 

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

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

    <img src="#" alt="Deskripsi" title="Judul" height="125" width="125"/> 

    </a>   
 
    </div> 


   
    <div class="kotak"> 

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

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

    <img src="#" alt="Deskripsi" title="Judul" height="125" width="125"/> 

    </a>   

    </div> 


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

</div> 

Catatan:
Ganti tanda judul dan deksripsi sesuai keinginan anda.
Ganti # pada a href dengan link tujuan anda.
Ganti # pada img src dengan link gambar iklan anda.
Anda dapat menambahkan slot iklan lagi sesuai kebutuhan anda dengan memperbanyak kode HTML nya.
Anda juga dapat mengatur posisi iklan, apakah iklan 300x250 yang di atas dan iklan 125x125 yang di bawahnya atau sebaliknya.

Jika pada slot iklan tersebut belum berisi banner iklan, maka slot atau kotak tersebut hanya akan menampilkan text yang akan menjelaskan bahwa slot tersebut tersedia untuk dipasangi iklan, baik itu dengan ukuran 300x250 atau 125x125.

Sekian tutorial kali ini, anda tinggal menyesuaikan dan mengisi slot tersebut dengan iklan. Semoga bermanfaat dan penghasilan anda menjadi bertambah.