2 Cara Untuk Edit Tampilan Iklan Google Adsense
Greetings… Kali ini aku akan menawarkan sebuah tutorial bagaimana cara Edit Tampilan Iklan Google Adsense.
Tapi sebelumnya, Kita tidak akan mengubah coding atau apapun yang disediakan oleh google adsense yang sanggup merugikan pengiklan lantaran itu melanggar TOS.
Kali ini aku hanya akan membagikan bagaimana caranya Edit Tampilan Iklan Google Adsense dalam hal penempatan dan warp-nya (pembungkusnya).
Apa maksudnya?
Maksudnya yakni aku hanya menawarkan coding untuk mengedit penempatan dari iklan dengan memakai CSS.
Kemarin aku juga sempat menciptakan sebuah artikel bagaimana caranya membuat iklan google adsense responsive menyesuaikan ukuran layout website Anda.
Yang dimana artikel tersebut sanggup menciptakan iklan Anda responsive sesuai impian 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 memiliki warp (pembungkus) diluarnya.
Seperti gambar ini misalnya :
Apa Fungsinya?
Sekilas fungsinya hanya untuk memperindah saja, Tapi yang aku terapkan pada bacaanku.com lebih dari itu.
Dengan menggabungkannya dengan plugin Adblock Killer yang dulu pernah aku sampaikan, Maka Warp diatas berfungsi sebagai indikator untuk notifikasi adblock pada visitor.
Cara Membuatnya?
Cara membuatnya sangat sederhana, Yaitu kita hanya tinggal menciptakan style CSS pada class dari div yang kita gunakan untuk membungkus isyarat iklan google adsense.
Seperti ini misalnya :
<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 isyarat diatas (yang aku beri warna merah) disitulah kita menawarkan class pada tag div yang berfungsi sebagai pembungkusnya.
Class cfmoitor yakni class yang aku gunakan untuk adsense click fraud
Class wp-caption yakni class yang aku gunakan untuk desain kotak pada sisi luar iklan.
Jadi… Untuk class cfmoitor sanggup kita lewati lantaran tidak ada hubungannya dengan artikel ini. Mari kita bahas ihwal class wp-caption.
Berikut code CSS yang aku 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 yakni style untuk ukuran kotak pembungkus
- Padding yakni jarak antara isi kotak dan garis luar kotak
- line-height : Berfungsi untuk menawarkan ukuran sebelum dan sehabis antara text didalam kotak.
Ini sanggup Anda lewatkan, Tapi lantaran aku memakai class ini tidak hanya untuk iklan maka aku 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 memakai % daripada px lantaran sanggup lebih responsive)
- Text-align : Align dari text yang terdapat dalam kotak
- font-style : desain element dari aksara yang terdapat dalam kotak
- font-size : Ukuran font, Tetapi aku memakai ukuran % dari normalnya sebagai pembeda dari klarifikasi gambar dan isi artikel
[box type=”info” align=”aligncenter” class=”” width=”100%”]
- Jika Anda pengguna blogger maka paste isyarat diatas antara tag <style> dan (kode iklan disini) </style>
- Jika Anda pengguna wordpress maka Anda sanggup melaksanakan paste pada Menu Appearance > Editor > dan pastikan Anda pada hidangan style.css
[/box]
Jika Anda ingin Edit Tampilan Iklan Google Adsense untuk desain iklannya, Saya lebih menyarankan untuk melaksanakan edit pribadi pada iklan adsensenya.
Selain meringankan load time website, Juga tidak ribet. Anda sanggup 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 biar sanggup sejajar dengan iklan yang lainnya.
Contohnya yakni dikala 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 menciptakan iklan besar yakni dengan menggabungkan 2 iklan.
Untuk efektif atau tidak, Saya sendiri tidak sanggup membuktikannya lantaran aku hanya pernah menggunakannya untuk beberapa hari sekedar test script saja.
Seperti ini misalnya :
Gimana? Anda tertarik untuk menggunakannya?
Sebelumnya, Jika Anda ingin menggunakannya maka ada beberapa hal yang perlu diperhitungkan antara lain :
- Iklan yang tampil terkadang sanggup 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 aku ambil dari w3 school.
Script diatas yakni script yang harus Anda pasang pada CSS dari website Anda, Pemasangannya sama ibarat pada langkah pertama.
[box type=”info” align=”aligncenter” class=”” width=”100%”]
- Jika Anda pengguna blogger maka paste isyarat diatas antara tag <style> dan (kode iklan disini) </style>
- Jika Anda pengguna wordpress maka Anda sanggup melaksanakan paste pada Menu Appearance > Editor > dan pastikan Anda pada hidangan style.css
[/box]
Cara Menggunakannya
Setelah anda menyimpan script diatas, Maka Anda sanggup memakai class yang sudah diatur pada CSS tersebut.
Untuk penggunaan dalam website sanggup 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 isyarat 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 aku bantu sebisa saya…
Sumber https://bacaanku.com/
0 Response to "2 Cara Untuk Edit Tampilan Iklan Google Adsense"
Posting Komentar