AMP- Kebetulan ada sahabat blogger yang Request Tulisan Tentang Bagaimana Caranya Membuat Iklan Banner Link di Blog saya ini, Jadi Hari ini kita bahas Iklan Banner Link ini ya masbrur. sebenarnya saya juga belum mahir, tapi mudah-mudahan sedikit pengalaman saya ini bisa bermanfaat buat yang membutuhkan.
Susah gak sih Membuat Sekaligus Memasang Iklan Link Bannernya? asal masbrur mau belajar InsyaAlloh bisa. yang susah itu buat tutorialnya buanyak gambar jadi ribet settingnya di AMP, curcol nih critanya kikiki. Jadi jangan khuatir ya? lagian saya yang awam dan cuma pakai hp bisa kok, masa masbrur enggak... ? so don't worry :).
Kalau sudah muncul pilih Unit Iklan Baru,
Singkatnya ada 2 tahapan yang mesti masbrur lakukan, apa saja ris? tahapannya seperti di bawah ini:
"1. Membuat Iklan Adsense Link/tautan Responsif" "2. Memasang Iklan Link Responsif Di Template AMP"
Bagaimana mudah kan, cuman 2 tahapan aja kok? mudah apaan kan belom di jelasin gimana bikinnya? eeeh belom ya?. maaf maaf kikiki. oke kita bahas satu-satu ya masbrur, senyum dong.. tar jelek loh kalau cemberut terus :p .
#1. Membuat Iklan Adsense Link Responsif, kenapa pilih yang responsif? ya karna nanti dia akan menyesuaikan sendiri berapa banyak link yang akan di tampilkan, jadi kita cuma setting panjang dan tinggi nya saja. Bagaimana Membuatnya?
Login Adsense masbrur, mohon maaf gambarnya dari hp, adanya ini soalnya :) Pada Menu Beranda Adsense pilih Iklan, Unit Iklan, gambarnya dibawah ini ya,
Kalau sudah muncul pilih Unit Iklan Baru,
Jika sudah akan muncul tampilan seperti ini,
Pilih Iklan Teks dan Bergambar, nanti akan di minta memberi nama unit iklannya, isi saja, Selanjutnya pilih Iklan Link, dan sampai sini ada beberapa pilihan ukuran, pilih aja yang Tautan Responsif,
Terakhir, Simpan dan Dapatkan Kode. nah sampai sini sudah beres langkah 1 nya. masbrur sudah punya iklan tautan responsif.
#2. Memasang Iklan Link Responsif Di Template AMP, Setelah dapet iklan linknya sekarang tinggal pasang di template AMP, bagaimana langkahnya?
Buka Template Blog, Edit Html, kalau saya pakai hp, templatenya saya download dulu baru di buka di quickedit.
Pastekan Kode ini di bawah /nav pada template, jangan lupa mengganti ad client dan ad slot dengan kode iklan yang kita buat di langkah pertama, tampilannya seperti di bawah ini,
"<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'><amp-ad data-ad-client='ca-pub-12345678910' data-ad-slot='12345678910' height='200' layout='fixed-height' type='adsense'/><button id='close_topbanner' on='tap:topbanner.hide, close_topbanner.hide, open_topbanner.show' role='button' tabindex='0' title='Close'>Close Ad</button><button hidden='' id='open_topbanner' on='tap:topbanner.show, close_topbanner.show, open_topbanner.hide' role='button' tabindex='0' title='Open'>Open Ad</button></b:if>"
Kok di gambar gak pas di bawah /nav? karna template ini ada search box nya, jadi saya paste di bawah itu, kalau template masbrur sesuaikan saja ya. height='200' itu untuk ukuran tinggi nya iklan nanti, kalau 100 biasanya cuma 3 link yang muncul di versi mobile, makanya saya buat 200.
Selanjutnya, Pastekan Kode ini diatas /*blabla*/ kalau saya paste di atas /*responsive*/
"/* Top Banner */
.top_banner{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:728px;height:auto}
#close_topbanner,#open_topbanner{font-family:Roboto,sans-serif;position:absolute;padding:0;bottom:0;background:0 0;border:none;cursor:pointer;color:#888;font-size:15px;font-weight:500;height:20px;line-height:20px;}
#close_topbanner{right:10px}
#open_topbanner{width:100px;text-align:center;right:50%;margin-right:-50px}
#close_topbanner:focus,#open_topbanner:focus{outline:0}"
Kalau sudah simpan template dan beres deh kikiki. gak sulit kan masbrur? oya width:728px itu boleh di ganti, ya... terserah mau di buat berapa, sesuaikan saja dengan template blognya, cuman biasanya ukuran banner itu segitu.
Bagaimana masbrur? sudah muncul belum Iklannya? selamat mencoba ya? semoga cara Membuat Iklan Banner Link sekaligus memasangnya di BLog AMP ini bermanfaat. see ya... :)