Cara Membuat Iklan Melayang di Blog - KodeRian

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Cara Membuat iklan Melayang Di Samping Kiri Dan Kanan Blog" seperti yang kita ketahui bahwa iklan sangat diperlukan disebuah web/blog untuk mendapatkan penghasilan untuk sang creator (admin) dan tentu ada beberapa space kosong yang bisa kita tambahkan dengan sedikit hiasan. Sepeti di pembahasan kali ini saya akan bagikan cara untuk membuat Floating Ads diblog.

Floating Ads ini akan berada pada posisi kiri dan kanan blog, sehingga tidak akan mengganggu atau menghalangi isi konten pada blog Kita dan slot iklan hanya akan tampil pada tampilan mode Dekstop saja sedangkan untuk mode Mobile dihilangkan sebab tidak responsive dan berakibat menghalangi konten. Dengan menambahkan Floating Ads ini dapat memaksimalkan pendapatan kita khususnya untuk blog yang sudah menambahkan iklan Adsense kecuali admin blog ini blm ada iklanya sob 😭

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

1. Buka Blogger

2. Klik menu Tata Letak > Klik "Tambahkan Gadget"

3. Kemudian tambahkan kode berikut pada widget yang baru saja dibuat

<style scoped='' type='text/css'>
.fixed-leftSd,.fixed-rightSd{position:fixed;top:60px;width:160px;height:600px;z-index:9999;transform:translateZ(0)}
.fixed-leftSd{left:0}
.fixed-rightSd{right:0}
.close-fixedSd{position:absolute;width:160px;height:15px;line-height:15px;font-size:11px;font-weight:400;top:-15px;left:0;text-align:center;background:#e0e0e0;color:#666;padding:5px 0;cursor:pointer}
@media screen and (max-width:800px){.fixed-leftSd,.fixed-rightSd{display:none;visibility:hidden;}}
</style>
<div class="fixed-leftSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
CLOSE ADS
</div>
<!-- Simpan kode iklan di sini -->
</div>
<div class="fixed-rightSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
CLOSE ADS
</div>
<!-- Simpan kode iklan di sini -->
</div>

4. Klik Simpan

5. Selesai dan lihat hasilnya

Note: Gunakan unit iklan dinamis 160x600 px atau unit iklan vertikal pada AdSense. Jangan lupa tambahkan kode iklanya pada kode yang ditandai merah.

Hasilnya akan terlihat seperti berikut, supaya lebih jelas ganti ke ukuran 0.25x

See the Pen Create Floating Ads Left and Right in Blog by Koderian (@koderian) on CodePen.

Bagaimana hasilnya ? pastinya sama dengan yang di "Artikel" ini yahh :3

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#