Adsense

2 Cara Untuk Edit Tampilan Iklan Google Adsense

2 Cara Untuk Edit Tampilan Iklan Google Adsense

Greetings… Kali ini saya akan memberikan sebuah tutorial bagaimana cara Edit Tampilan Iklan Google Adsense.

Tapi sebelumnya, Kita tidak akan mengubah coding atau apapun yang disediakan oleh google adsense yang bisa merugikan pengiklan karena itu melanggar TOS.

Kali ini saya hanya akan membagikan bagaimana caranya Edit Tampilan Iklan Google Adsense dalam hal penempatan dan warp-nya (pembungkusnya).

Apa maksudnya?

Maksudnya adalah saya hanya memberikan coding untuk mengedit penempatan dari iklan dengan menggunakan CSS.

Kemarin saya juga sempat membuat sebuah artikel bagaimana caranya membuat iklan google adsense responsive menyesuaikan ukuran layout website Anda.

Yang dimana artikel tersebut bisa membuat iklan Anda responsive sesuai keinginan Anda dan menyesuaikan ukuran layar dari visitor Anda.

 

Jika Anda melihat iklan pada artikel yang terdapat pada bacaanku.com maka Anda akan menyadari bahwa terdapat beberapa iklan yang mempunyai warp (pembungkus) diluarnya.

Seperti gambar ini contohnya :

warp iklan

warp iklan

Apa Fungsinya?

Sekilas fungsinya hanya untuk memperindah saja, Tapi yang saya terapkan pada bacaanku.com lebih dari itu.

Dengan menggabungkannya dengan plugin Adblock Killer yang dulu pernah saya sampaikan, Maka Warp diatas berfungsi sebagai indikator untuk notifikasi adblock pada visitor.

Cara Membuatnya?

Cara membuatnya sangat sederhana, Yaitu kita hanya tinggal membuat style CSS pada class dari div yang kita gunakan untuk membungkus kode iklan google adsense.

Seperti ini contohnya :

<div class="cfmonitor wp-caption">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- linkads -->
<ins class="adsbygoogle"
     style="display:inline-block;width:200px;height:90px"
     data-ad-client=""
     data-ad-slot=""></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Jika Anda melihat kode diatas (yang saya beri warna merah) disitulah kita memberikan class pada tag div yang berfungsi sebagai pembungkusnya.

Class cfmoitor adalah class yang saya gunakan untuk adsense click fraud

Class wp-caption adalah class yang saya gunakan untuk desain kotak pada sisi luar iklan.

Jadi… Untuk class cfmoitor bisa kita lewati karena tidak ada hubungannya dengan artikel ini. Mari kita bahas tentang class wp-caption.

Berikut code CSS yang saya gunakan pada class wp-caption

.wp-caption {
    border: 1px solid #d8dde1;
    padding:5px;
    line-height: 18px;
    margin-bottom: 10px;
    max-width: 100% !important;
    text-align: center;
    font-style: italic;
    font-size:80%
}

Fungsi Kode Diatas?

  • Border adalah style untuk ukuran kotak pembungkus
  • Padding adalah jarak antara isi kotak dan garis luar kotak
  • line-height : Berfungsi untuk memberikan ukuran sebelum dan sesudah antara text didalam kotak.
    Ini bisa Anda lewatkan, Tapi karena saya menggunakan class ini tidak hanya untuk iklan maka saya tetap menggunakannya.
  • Margin-bottom : Jarak antara garis terluar (bagian bawah) dari kotak dan isi konten diluar kotak.
  • Max-width : Ukuran maximal dari lebar kotak (saya sarankan untuk menggunakan % daripada px karena dapat lebih responsive)
  • Text-align : Align dari text yang terdapat dalam kotak
  • font-style : desain element dari huruf yang terdapat dalam kotak
  • font-size : Ukuran font, Tetapi saya menggunakan ukuran % dari normalnya sebagai pembeda dari penjelasan gambar dan isi artikel
[box type=”info” align=”aligncenter” class=”” width=”100%”]
  • Jika Anda pengguna blogger maka paste kode diatas antara tag <style> dan (kode iklan disini) </style>
  • Jika Anda pengguna wordpress maka Anda bisa melakukan paste pada Menu Appearance > Editor > dan pastikan Anda pada menu style.css
[/box]

Jika Anda ingin Edit Tampilan Iklan Google Adsense untuk desain iklannya, Saya lebih menyarankan untuk melakukan edit langsung pada iklan adsensenya.

Selain meringankan load time website, Juga tidak ribet. Anda bisa edit iklan adsense pada tab Text Ad Style Pada iklan adsense Anda langsung.

Cuma Itu Saja?

Hmmm…. ada yang lain tentunya, Yaitu Edit Tampilan Iklan Google Adsense supaya bisa sejajar dengan iklan yang lainnya.

Contohnya adalah ketika kita ingin meyandingkan 2 iklan ukuran 300×250 px sebanyak 2 iklan dalam 1 baris.

Sekedar Info : Karena google tidak memperbolehkan iklan ukuran besar (300×600) untuk diatmpilkan dalam mobile maka cara satu-satunya untuk membuat iklan besar adalah dengan menggabungkan 2 iklan.

Untuk efektif atau tidak, Saya sendiri tidak bisa membuktikannya sebab saya hanya pernah menggunakannya untuk beberapa hari sekedar test script saja.

Seperti ini contohnya :

double iklan

double iklan

Gimana? Anda tertarik untuk menggunakannya?

Sebelumnya, Jika Anda ingin menggunakannya maka ada beberapa hal yang perlu diperhitungkan antara lain :

  • Iklan yang tampil terkadang bisa sama
  • Karena slot iklan terbatas, Jika visitor melewati iklan tersebut berarti 2 iklan yang terlewati untuk terkena click

Setelah menimbang 2 poin diatas, Jika Anda tetap ingin menggunakannya silahkan melanjutkan lihat script dibawah ini…

.w3-container:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after{content:"";display:table;clear:both}
 .w3-col,.w3-half,.w3-third,.w3-twothird,.w3-quarter{float:left;width:100%}
 .w3-col.s1{width:8.33333%}
 .w3-col.s2{width:16.66666%}
 .w3-col.s3{width:24.99999%}
 .w3-col.s4{width:33.33333%}
 .w3-col.s5{width:41.66666%}
 .w3-col.s6{width:49.99999%}
 .w3-col.s7{width:58.33333%}
 .w3-col.s8{width:66.66666%}
 .w3-col.s9{width:74.99999%}
 .w3-col.s10{width:83.33333%}
 .w3-col.s11{width:91.66666%}
 .w3-col.s12,.w3-half,.w3-third,.w3-twothird,.w3-quarter{width:99.99999%}
 @media only screen and (min-width:601px){
 .w3-col.m1{width:8.33333%}
 .w3-col.m2{width:16.66666%}
 .w3-col.m3,.w3-quarter{width:24.99999%}
 .w3-col.m4,.w3-third{width:33.33333%}
 .w3-col.m5{width:41.66666%}
 .w3-col.m6,.w3-half{width:49.99999%}
 .w3-col.m7{width:58.33333%}
 .w3-col.m8,.w3-twothird{width:66.66666%}
 .w3-col.m9{width:74.99999%}
 .w3-col.m10{width:83.33333%}
 .w3-col.m11{width:91.66666%}
 .w3-col.m12{width:99.99999%}}
 @media only screen and (min-width:993px){
 .w3-col.l1{width:8.33333%}
 .w3-col.l2{width:16.66666%}
 .w3-col.l3,.w3-quarter{width:24.99999%}
 .w3-col.l4,.w3-third{width:33.33333%}
 .w3-col.l5{width:41.66666%}
 .w3-col.l6,.w3-half{width:49.99999%}
 .w3-col.l7{width:58.33333%}
 .w3-col.l8,.w3-twothird{width:66.66666%}
 .w3-col.l9{width:74.99999%}
 .w3-col.l10{width:83.33333%}
 .w3-col.l11{width:91.66666%}
 .w3-col.l12{width:99.99999%}}
 .w3-content{max-width:980px;margin:auto}
 .w3-rest{overflow:hidden}
 @media (max-width:601px){.w3-modal-content{margin:50px 10px 10px 10px;width:auto !important}}
 @media (max-width:768px){.w3-modal-content{width:500px}}
 @media (min-width:992px){.w3-modal-content{width:900px}}
 @media screen and (max-width:601px){.w3-topnav a{display:block}.w3-navbar li {float:none !important;}.w3-navbar ul.w3-right{float:none !important;margin:0;padding:0;}}
 @media screen and (max-width:601px){.w3-topnav .w3-dropdown-hover .w3-dropdown-content,.w3-navbar .w3-dropdown-click .w3-dropdown-content,.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}}
 @media screen and (max-width:601px){.w3-topnav,.w3-navbar{text-align:center}}
 @media (max-width:601px){.w3-hide-small{display:none !important}}
 @media (max-width:991px) and (min-width:601px){.w3-hide-medium{display:none !important}}
 @media (min-width:992px){.w3-hide-large{display:none !important}}
 .w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
 .w3-left{float:left !important}.w3-right{float:right !important}
 .w3-hide{display:none !important}.w3-show{display:block !important}
 .w3-tiny{font-size:10px !important}.w3-small{font-size:12px !important}
 .w3-medium{font-size:15px !important}
 .w3-large{font-size:18px !important}
 .w3-xlarge{font-size:24px !important}
 .w3-xxlarge{font-size:36px !important}
 .w3-xxxlarge{font-size:48px !important}
 .w3-jumbo{font-size:64px !important}
 .w3-vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}
 .w3-slim{font-family:"Segoe UI",Arial,sans-serif !important}
 .w3-wide{font-family:"Segoe UI",Arial,sans-serif !important;letter-spacing:4px}
 .w3-left-align{text-align:left !important}.w3-right-align{text-align:right !important}
 .w3-justify{text-align:justify !important}
 .w3-center{text-align:center !important}
 .w3-circle{border-radius:50% !important}
 .w3-round-small{border-radius:2px !important}.w3-round,.w3-round-medium{border-radius:4px !important}
 .w3-round-large{border-radius:8px !important}.w3-round-xlarge{border-radius:16px !important}
 .w3-round-xxlarge{border-radius:32px !important}.w3-round-jumbo{border-radius:64px !important}
 .w3-border-0{border:0 !important}
 .w3-border{border:1px solid #ccc !important}
 .w3-border-top{border-top:1px solid #ccc !important}.w3-border-bottom{border-bottom:1px solid #ccc !important}
 .w3-border-left{border-left:1px solid #ccc !important}.w3-border-right{border-right:1px solid #ccc !important}
 .w3-margin-0{margin:0 !important}
 .w3-margin-2{margin:2px !important}
 .w3-margin-4{margin:4px !important}
 .w3-margin-8{margin:8px !important}
 .w3-margin-12{margin:12px !important}
 .w3-margin-16{margin:16px !important}
 .w3-margin-24{margin:24px !important}
 .w3-margin-32{margin:32px !important}
 .w3-margin-64{margin:64px !important}
 .w3-margin{margin:16px !important}
 .w3-margin-top{margin-top:16px !important}.w3-margin-bottom{margin-bottom:16px !important}
 .w3-margin-left{margin-left:16px !important}.w3-margin-right{margin-right:16px !important}
 .w3-padding-tiny{padding:2px 4px !important}
 .w3-padding-small{padding:4px 8px !important}
 .w3-padding-medium,.w3-padding,.w3-form{padding:8px 16px !important}
 .w3-padding-large{padding:12px 24px !important}
 .w3-padding-xlarge{padding:16px 32px !important}
 .w3-padding-xxlarge{padding:24px 48px !important}
 .w3-padding-jumbo{padding:32px 64px !important}
 .w3-padding-0{padding:0 !important}
 .w3-padding-4{padding-top:4px !important;padding-bottom:4px !important}
 .w3-padding-8{padding-top:8px !important;padding-bottom:8px !important}
 .w3-padding-16{padding-top:16px !important;padding-bottom:16px !important}
 .w3-padding-24{padding-top:24px !important;padding-bottom:24px !important}
 .w3-padding-32{padding-top:32px !important;padding-bottom:32px !important}
 .w3-padding-48{padding-top:48px !important;padding-bottom:48px !important}
 .w3-padding-64{padding-top:64px !important;padding-bottom:64px !important}
 .w3-padding-top{padding-top:8px !important}.w3-padding-bottom{padding-bottom:8px !important}
 .w3-padding-left{padding-left:16px !important}.w3-padding-right{padding-right:16px !important}
 .w3-topbar{border-top:6px solid #ccc !important}.w3-bottombar{border-bottom:6px solid #ccc !important}
 .w3-leftbar{border-left:6px solid #ccc !important}.w3-rightbar{border-right:6px solid #ccc !important}
 .w3-border-red{border-color:#ff6060 !important}.w3-border-yellow{border-color:#daa520 !important}
 .w3-border-green{border-color:#66aa66 !important}.w3-border-blue{border-color:#1E90FF !important}
 .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 0px}

Note : Script saya ambil dari w3 school.

Script diatas adalah script yang harus Anda pasang pada CSS dari website Anda, Pemasangannya sama seperti pada langkah pertama.

[box type=”info” align=”aligncenter” class=”” width=”100%”]
  • Jika Anda pengguna blogger maka paste kode diatas antara tag <style> dan (kode iklan disini) </style>
  • Jika Anda pengguna wordpress maka Anda bisa melakukan paste pada Menu Appearance > Editor > dan pastikan Anda pada menu style.css
[/box]

Cara Menggunakannya

Setelah anda menyimpan script diatas, Maka Anda bisa menggunakan class yang sudah diatur pada CSS tersebut.

Untuk penggunaan dalam website bisa dengan code sebagai berikut…

<div class=""w3-container><div class="w3-half">Kode iklan</div><div class="w3-half">kode iklan</div></div>

Contoh script diatas akan berfungsi untuk membagi 1 baris dengan 2 kolom.

Tenang saja, Jika Anda memasang kode diatas dengan benar maka iklan Anda akan responsive menyesuaikan max-width dari layar visitor Anda.

Jika Anda ingin merubahnya menjadi 3 atau 4 kolom maka Anda tinggal mengganti class w3-half dengan class w3-third untuk 3 kolom, dan w3-quarter untuk 4 kolom.

Sekian artikel Edit Tampilan Iklan Google Adsense kali ini, Jika masih ada yang belum dipahami silahkan mengisi kolom komentar dan akan saya bantu sebisa saya…

REAKSI KAMU?
Bagikan Votingmu!!
0
0
0
0
0
0
0
0
0

Artikel Terkait :

Click to comment

Facebook Comment

Your email address will not be published. Required fields are marked *

To Top