Memasang Floating Ads Versi Terbaru di Blogger

Memasang Iklan Floating Terbaru di Blogger ― Salah satu media promosi yang cukup banyak digunakan saat ini adalah media promosi secara online. Makin banyak pihak yang memanfaatkan internet untuk memasarkan atau mempromosikan produk atau jasa mereka, hal itu jadi kesempatan yang cukup bagus untuk para publisher dan konten kreator.

Salah satu tempat di mana pengguna internet biasanya paling sering menemukan iklan adalah pada sebuah halaman situs, termasuk blog. Blog menjadi tempat yang cukup strategis untuk menampilkan iklan pasalnya sebuah blog bisa dibuat dengan tema yang lebih bebas dan tidak terlalu terikat. Selain itu blog juga merupakan sebuah halaman situs yang proses pembuatan dan pengelolaannya terbilang cukup mudah.

Iklan di Blogger

Blogger merupakan salah satu blog engine yang cukup populer dengan perkembangannya yang kian pesat. Saat ini sudah banyak orang yang menggunakan Blogger sebagai sarana untuk mencari penghasilan secara online. Sebagai salah satu aplikasi yang ditangani oleh Google, sudah sewajarnya jika Blogger mempunyai dukungan yang cukup mudah terkait pemasangan iklan di blog, khususnya iklan dari Google Adsense.

Berbagai macam posisi penempatan dan penampilan iklan pada halaman situs khususnya blog dibuat dan dikembangkan untuk menciptakan kondisi yang seefisien mungkin bagi pengunjung blog tersebut, dan salah satu posisi atau penempatan iklan yang cukup banyak digunakan adalah iklan pada posisi floating atau melayang pada salah satu sisi jendela halaman blog.

Sebelumnya di blog ini sudah pernah dibahas tentang floating ads atau iklan melayang di Blogger. Dan dalam tulisan kali ini akan dibahas hampir sama seperti penempatan iklan tersebut, tetapi merupakan pembaruan atau update dari versi sebelumnya, tampilannya kurang lebih seperti berikut ini.

Memasang Floating Ads di Blogger

Juga sama seperti versi sebelumnya, iklan floating yang dipasang di sini mempunyai tombol close yang dapat digunakan untuk menghilangkan tampilan iklan tersebut. Bedanya, tombol yang digunakan tampak lebih modern untuk sebuah blog dan tidak lagi menggunakan gambar, tetapi menggunakan link SVG. Kamu bisa melihat contohnya pada halaman demo. Dan untuk memasangnya di blog kamu, silakan ikuti langkah-langkah berikut ini.

# Mendapatkan kode iklan

Terlebih dahulu kamu perlu mendapatkan kode iklan yang sesuai yang akan kamu pasang, jika menggunakan kode iklan dari pihak ketiga. Tetapi jika kamu memasang iklan sendiri, langkah ini bisa kamu lewati. Kamu harus memastikan kode iklan yang kamu peroleh adalah iklan dengan ukuran 728 x 90 px. Silakan ikuti langkah-langkah berikut ini.

1. Buka situs Google Adsense dan masuk sesuai dengan akun kamu.
2. Klik pada bagian Iklan kemudian pilih Menurut unit iklan lalu buat unit iklan baru dengan jenis Iklan Display.

3. Kemudian beri nama untuk unit iklan yang kamu buat, agar mudah dikenali beri nama semisal "iklan floating horizontal". Lalu pastikan ukuran iklan kamu atur menjadi ukuran tetap dengan nilai 728 x 90, setelah itu klik tombol Buat.

4. Setelah itu kamu akan mendapatkan kode iklan yang siap dipasang, simpan dulu kode tersebut atau tetap biarkan halaman adsense tetap terbuka untuk sementara.

# Memasang Floating Ads di Blogger (Update)

Untuk memasang floating ads atau iklan melayang di Blogger untuk versi terbaru caranya juga cukup mudah, setelah mendapatkan kode iklan yang akan kamu pasang, seperti langkah di atas jika menggunakan adsense, selanjutnya ikuti langkah-langkah berikut ini.

1. Buka Blogger kemudian pada bagian Tata Letak klik Tambah Gadget.
2. Setelah itu pilih widget berjenis HTML/JavaScript lalu tambahkan kode berikut ini di dalamnya.

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
  <style>.sticky-ad{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:fixed;text-align:center;bottom:0;left:50%;width:736px;z-index:995;max-height:104px;background-image:none;background-color:rgba(255,255,255,.7);box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;display:none;margin-left:-368px}.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:13px 13px;background-position:center;background-color:rgba(255,255,255,.7);background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:12px 12px 0 0;cursor:pointer}</style>
  <div class='sticky-ad' id='sticky-ad'>
    <div class="sticky-ad-content">
      <!-- kode iklan di sini -->
    </div>
    <button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;'/>
  </div>
  <script>function stickyAd(){var e=document.getElementById("sticky-ad");300<window.pageYOffset&&(e.style.display="block",window.removeEventListener("scroll",stickyAd))}window.addEventListener("scroll",stickyAd);</script>
</b:if>

3. Ganti bagian yang ditandai dengan kode iklan yang akan kamu pasang, atau kode iklan yang kamu dapatkan pada langkah di atas sebelumnya, lalu klik tombol Simpan dan lihat hasilnya di halaman blog kamu.

# Hanya untuk halaman non-mobile

Satu-satunya masalah yang mungkin timbul jika memasang iklan menggunakan widget HTML/Javascript adalah iklan tidak dapat diatur akan tampil di halaman mana saja, dengan kata lain, iklan tersebut akan tampil di semua halaman termasuk di halaman mobile atau saat dibuka menggunakan perangkat mobile (smartphone/tablet) yang mengakibatkan tampilan iklan terlalu besar dan melewati frame width. Selain itu iklan ukuran 728 x 90 bukanlah ukuran iklan mobile.

Untuk mengatasi hal tersebut, kamu perlu menggunakan conditional tag pada widget floating ads melalui menu Edit HTML di Blogger. Terlebih dahulu kamu harus mengetahui ID widget floating ads tersebut, silakan baca di sini untuk mengetahuinya. Setelah itu silakan ikuti langkah-langkah berikut ini.

1. Pada halaman Blogger buka bagian Tema lalu pilih Edit HTML.

2. Setelah itu pada tombol lompat ke widget, pilih widget dari floating ads sebelumnya, misalnya ID widget tersebut adalah HTML1, maka kamu akan melihat kode widget seperti berikut ini.

<b:widget id='HTML1' locked='false' title='Halo' type='HTML' visible='true'>

3. Tambahkan atribut conditional cond='data:blog.isMobileRequest == "true"' pada tag widget tersebut, sehingga hasilnya seperti berikut ini.

<b:widget cond='data:blog.isMobileRequest == "true"' id='HTML1' locked='false' title='Halo' type='HTML' visible='true'>

4. Kemudian tekan tombol Simpan dan coba lihat hasilnya saat blog dibuka melalui perangkat mobile.

Penutup

Langkah yang dijelaskan di atas mungkin berbeda dengan cara yang digunakan oleh berbagai blog lain karena hanya dipasang menggunakan widget HTML/JavaScript. Cara ini tergolong lebih mudah, sederhana, dan paling aman menurut saya, karena selain tidak perlu mengutak atik bagian Edit HTML di blog, juga karena mudah apabila kamu ingin menghapus widget tersebut. Disamping itu kamu juga tidak perlu merlakukan parse script kode iklan karena dipasang langsung melalui widget.

Semoga pembahasan dalam tulisan ini bisa bermanfaat untuk kamu, serta memberikan pengetahuan dan wawasan baru. Semoga iklan melayang atau floating ads yang punya tombol close bisa berhasil terpasang. Apabila ada hal yang kurang jelas, jangan sungkan untuk bertanya baik melalui kolom komentar di bawah atau melalui contact blog ini. Terima kasih dan sampai jumpa!