Loading Ads: Membuat Tampilan Iklan AdSense Lebih Menarik

Teman Agan, jika website kamu sudah menampilkan iklan dan mulai menghasilkan uang, tak ada salahnya membuat tampilan iklan lebih menarik. Salah satu caranya adalah dengan menambahkan efek loading pada iklan AdSense, sehingga terlihat lebih profesional dan interaktif.

Menggunakan CSS

Efek loading untuk iklan AdSense bisa dibuat hanya dengan kode CSS, tanpa perlu tambahan script lainnya. Namun, sebagai langkah antisipasi, admin juga akan menyediakan script cadangan jika efek loading menggunakan CSS saja tidak berjalan dengan baik.

Catatan: Jika hanya mengandalkan CSS tanpa script tambahan, loading ads bisa berjalan terus-menerus tanpa berhenti, yang berarti gagal berfungsi dengan baik.

Memasang Script Tambahan

Seperti yang telah dijelaskan sebelumnya, jika efek loading iklan tidak muncul atau tidak berfungsi, admin telah menyediakan script tambahan yang bisa digunakan. Ikuti setiap langkah yang dijelaskan di bawah ini untuk memastikan efek loading bekerja dengan benar.

Contoh Tampilan

Penasaran bagaimana tampilan loading iklan yang akan diterapkan? Demonya seperti di blog ini.

Info: Gimana, keren kan efeknya?

Cara Pembuatan

Sekarang, saatnya admin menjelaskan langkah-langkah cara membuat dan menampilkan loading iklan pada AdSense terbaru. Jika kamu penasaran, baca artikel ini sampai selesai, ya!

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah meyalin kode CSS di bawah ini kemudian kamu bisa meletakkan nya di atas kode ]]</b:skin>

.adsbygoogle{background:transparent url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet'><path fill='rgba(221,221,221,1)' opacity='.5' d='M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z'></path><path fill='rgba(17, 154, 245, 1.0)' d='M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z'><animateTransform attributeName='transform' dur='0.3s' from='0 12 12' repeatCount='indefinite' to='360 12 12' type='rotate'/></path></svg>") center / 26px no-repeat;background-size:45px 45px}

Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas, jika audah silahka lihat hasilnya

Kode Javascript

Jika loading iklan adsense tersebut tidak muncul ataupun tidak berfungsi juga silahkan salin kode javascript di bawah ini kemudian letakkan di atas kode </body>

<script>/*<![CDATA[*/
// Egiagan.com
var _0xa887=["\x73\x63\x72\x6F\x6C\x6C","\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70","\x64\x6F\x63\x75\x6D\x65\x6E\x74\x45\x6C\x65\x6D\x65\x6E\x74","\x62\x6F\x64\x79","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74","\x61\x73\x79\x6E\x63","\x73\x72\x63","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x63\x64\x6E\x2E\x6A\x73\x64\x65\x6C\x69\x76\x72\x2E\x6E\x65\x74\x2F\x67\x68\x2F\x41\x72\x6C\x69\x6E\x61\x2D\x44\x65\x73\x69\x67\x6E\x2F\x70\x68\x61\x6E\x74\x6F\x6D\x40\x6D\x61\x73\x74\x65\x72\x2F\x6C\x61\x7A\x79\x73\x61\x72\x6C\x69\x6E\x65\x2E\x6A\x73","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72"];var lazysizer=!1;window[_0xa887[14]](_0xa887[0],function(){(0!= document[_0xa887[2]][_0xa887[1]]&& !1=== lazysizer|| 0!= document[_0xa887[3]][_0xa887[1]]&& !1=== lazysizer)&& (!function(){var _0xedfdx2=document[_0xa887[5]](_0xa887[4]);_0xedfdx2[_0xa887[6]]= _0xa887[7],_0xedfdx2[_0xa887[8]]=  !0,_0xedfdx2[_0xa887[9]]= _0xa887[10];var _0xedfdx3=document[_0xa887[11]](_0xa887[4])[0];_0xedfdx3[_0xa887[13]][_0xa887[12]](_0xedfdx2,_0xedfdx3)}(),lazysizer=  !0)},!0)
/*]]>*/ </script>

Info: Ingat kode di atas jangan di edit entar gak berfungsi lagi, kemudian Jika sudah silahkan simpan template dan lihat bagaimana hasilnya

Penjelasan

Agar tidak bingung, berikut panduan lengkap cara menerapkan kode loading iklan AdSense di Blogger dengan benar.

1. Salin kode CSS yang telah diberikan di atas, lalu letakkan sesuai dengan petunjuk yang sudah dijelaskan.
2. Simpan template Blogger dan lihat hasilnya.
3. Jika efek loading iklan tidak berfungsi, coba tambahkan script jQuery atau LazySizer yang sudah disediakan sebelumnya. Dengan cara ini, loading iklan di Blogger akan muncul dan bekerja dengan baik.

Semoga bermanfaat dan membantu mengoptimalkan tampilan iklan di blog kamu!