Cara Membuat Slot Kotak Iklan Ukuran 300x250 dan 125x125 di Sidebar Blogger

Selain untuk menulis artikel yang bermanfaat bagi orang lain, tujuan sebagian para blogger dengan membuat sebuah blog bukan hanya sekedar untuk menyalurkan hobi saja, namun juga sebagai sumber penghasil uang.

Umumnya para Blogger mendapatkan penghasilan dengan cara menjadi Publisher iklan Google Adsense, namun perlu Anda ketahui bahwa untuk menjadi publisher adsense tidaklah mudah. Maka dari itu solusi terbaik adalah dengan membuat slot iklan sendiri di web atau blog anda.

Baca juga : Cara Terbaru Meletakan Iklan Adsense di Tengah Artikel Blog

Hal tersebut untuk memberi tahu kepada calon pelanggan bahwa blog yang anda kelola masih memiliki ruang atau space dan menawarkan jasa untuk pemasangan iklan Banner di blog anda.

Seperti yang ada pada blog Kompiajaib milik kang Adhy Suryadi, beliau menawarkan jasa pemasangan iklan dengan harga dan kontrak yang telah disepakati dengan tujuan untuk meningkatkan usaha online yang sedang dijalankan calon pengiklan.

Nah untuk itu Pada kesempatan kali ini saya kembali ingin berbagi Cara membuat slot iklan kotak di sidebar blogspot dengan mudah, sebelumnya saya juga membuat slot iklan link mirip google adsense di blogger.

Banner slot iklan yang akan kita buat nanti berukuran 125x125 dan 300x250 pixel yang ditempatkan di sidebar blog. Apakah anda juga tertarik untuk membuatnya di blog anda? Jika tertarik untuk memasangnya Anda bisa ikuti toturialnya dibawah ini.

Demo Banner Slot Iklan Kotak di Blogspot, silahkan klik Codepen dibawah untuk melihat demonya.

View on Codepen

1. Login ke akun Blogger - Tema - Edit HTML
2. Letakan kode CSS dibawah ini tepat sebelum kode ]]></b:skin> atau </style>

*{-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;}

3. Simpan Tema
4. Pilih menu Tata Letak - Tambahkan Gadget pilih HTML/Javascript dan masukan kode dibawah ini

<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>

5. Selesai

Baca juga : Baru, Cara membuat sitemap responsive di Blogger

Sekian toturial Cara membuat slot iklan kotak responsive di sidebar blogger dengan mudah. Semoga bermanfaat dan sampai jumpa di artikel selanjutnya.

Share this post