Iklan Mandiri Responsive Enak Dipandang, Sudah Tahu Caranya?

Djangkaru Bumi

Tutorial

24 Komentar

Sudah tanggal muda, tapi kok semangat menulis sangatlah rendah sekali. Niat ada, godaannya itu yang tidak nguatin. Godaan ingin tidur, ingin bermalas-malas. Tahu sendiri kan, keadaan seperti ini untuk bergerak rasanya itu ogah-ogahan. Habis bagaimana lagi, mau kerja belum tentu ada hasilnya. Bisa jadi kerugian yang diperolehnya. Tapi jika tidak kerja, apa yang mau dimakan. Sedangkan persediaan di rumah juga ikut memprihatikan. Sudah hampir tiga bulan, wabah ini melanda.

Biasanya job online yang begitu ramai. Eh tiba-tiba tiarap. Sepi banget. Market place besar kayaknya juga enggan untuk bakar-bakar uang. Atau mungkin market place besar justru sudah merasa diuntungkan dengan keadaa ini. Ramai pembeli, yang diakibatkan oleh toko offline pada disuruh tutup. Seandainya toko offline buka, banyak aturan protokol yang harus diterapkan. Dari jaga jarak, pengunjung harus menggenakan masker, pengecekan suhu. Wis pokoknya ribet.

Pendapatan terbesar saya menulis adalah dari artikel placement Sosiago, RajaBacklink, Vira Id. Kadang juga dari partner yang langsung menghubungi saya lewat email. Atau bahkan kadang teman media sosila yang mengingkan pasang iklan berupa banner atau gambar. Nah, soal gambar ini yang perlu diperhatikan. Agar penampilan saat dilihat dengan perangakt PC maupun lewat perangkat mobile tetap enak dilihat. Bahasa gaulnya, responsive gitu deh.

Yang saya maksud disini adalah iklan banner yang letaknya dibawah header. Bukan yang terletak di widget kanan maupun kiri, kalau wikdget model ini mah sudah otomatis responsive. Bagaimana caranya membuat iklan mandiri responsive?

Yang petama adalah memasang kode CSS yang menempatannya diatas kode ]]></b:skin> atau </style>. Dan untuk nomor HTML9 silakan ganti dengan nomor gadget HTML/JavaScript Tata Letak milik Anda. Atau deretan kode tersebut bisa dihapus, jika rasa tidak perlu.

/* -- Iklan Mandiri Responsive Bawah Header djb --*/
#HTML9 {margin-bottom:3px;0px padding:0;background:#fff;}
.mobile-banner{display:none;}
@media screen and (max-width:640px){
.mobile-banner{display:block;text-align:center}.desktop-banner{display:none}}

Langkah kedua adalah copy-paste kode HTML dibawah ini pada Tambahkan Gadget HMTL pada Tata Letak

<center>
<div class="desktop-banner">
<a href="https://www.djangkarubumi.com/2020/03/mesin-roll-pipa-produksi-ceper-klaten-terjamin-kualitasnya-jadi-tak-perlu-ragu.html" target="_blank" title="Menjual Mesin Roll Pipa" alt="Menjual Mesin Roll Pipa"><img src="https://1.bp.blogspot.com/-mUMHvI6NcjU/Xl_HiVSBIJI/AAAAAAAAZ8E/2qjEMzw1iuU2nL7cMkkYgt0i4wvfgv9AgCLcBGAsYHQ/s1600/Mesin%2BRoll%2BPipa.jpg"/></a>
</div>
<div class="mobile-banner">
<a href="https://www.djangkarubumi.com/2020/03/mesin-roll-pipa-produksi-ceper-klaten-terjamin-kualitasnya-jadi-tak-perlu-ragu.html" target="_blank" title="Menjual Mesin Roll Pipa" alt="Menjual Mesin Roll Pipa"><img src="https://1.bp.blogspot.com/-dKmqbWSjjJw/XmEfkmBzbVI/AAAAAAAAZ8o/pKiv4ZRLXBEyiHOWwOYcCZB-ORJz-yFYgCLcBGAsYHQ/s1600/Mesin%2BRoll%2BPipa%2BCeper%2BKlaten.jpg"/></a>
</div>
</center>

Tahap terakhir sebelum  Klik simpan, silahkan ganti kode yang berwarna merah, sesuai dengan yang ada inginkan. Sesuai iklan yang mau dipasang.

Untuk mengetahui nomor Gadget HTML/JavaScript caranya mudah kok. Saat dibuka, letakan kursor dan geser sampai keujung. Lebih jelasnya perhatikan gambar dibawah ini:

Sebenarnya dalam hal ini, yang perlu disiapkan adalah membuat model gambar dua iklan. Yang tampil untuk komputer dan yang tampil untuk perangakat hape. Sehingga kita yang memainkan displya none atau displya yes. Kode ini pemberian dari kang Adhy Suryadi selaku pemilik kompiajaib.com. Dan artikel ini sudah terbit juga di blog Om Koodok, dengan sedikit gaya bahasa yang berbeda.

Untuk model gambar banner  bawah header, Anda bisa melihat contoh yang ada di link tersebut. Silahkan unduh dan edit dengan aplikasi photoshop. Dengan model iklan mandiri seperti ini, iklan akan tetap jelas dan nyaman dilihat lewat hape. Pemasang iklan juga akan puas pastinya.

Tidak hanya pemasang iklan saja yang puas. Pemilik blog juga akan gembira, karena mendapatkan pendapatan yang lumayan hasilnya. Cara ini juga menjadi pengobat hati bagi yang blognya tidak bisa menampilkan iklan Google Adsense. Seribu jalan menuju Roma, seribu jalan untuk mencari rezeki. Jadi jangan putus asa jika blognya sering ditolak GA.