Dul Bjn Seorang Blogger dan Mahasiswa yang tak lulus-lulus kuliahnya yang kini tinggal di Bojonegoro. Ingin bermanfaat untuk orang lain dengan cara berbagi pengalaman lewat tulisan yang masih acak kadul.

Cara Membuat Related Post Dan Adsense Di Tengah Artikel Valid AMP

2 min read

Cara Manual Membuat Related Post Dan Adsense Di Tengah Artikel Valid AMPKenapa saya kasih judul di atas Dengan cara Manual,Karena kita meletakan kode related post dan Kode adsense secara manual, kenapa Manual? Karena Template Blog yang Valid AMP tidak boleh sembarangan Menaruh script maupun jquery,Karena jika taruh sembarangsn akan mengakibatkan error pada AMP HTML. Cara ini mungkin tidak instan seperti halnya kita memakai Template non AMP yang hanya menaruh script related post yang di modif dan iklan yang di parse dan tinggal di pasang di Bagian body otomatis related dan iklan akan tayang dengan sendirinya, Tapi sayangnya cara itu tidak bisa di gunakan karena akan membuat Blog kita error pada AMP HTML nya. Jadi itulah alasan saya membuat judul di atas dengan judul cara membuat Related dan adsense ditengah artikel dengan cara manual dan lebih tepatnya related post berdampingan dengan adsense di tengah artikel valid Amp .untuk keuntungan memasang adsense di tengah iklan yang tampil Kemungkinan di klik akan lebih besar apalagi jika jenis iklan yang di tampilkan adalah jenis tautan atau link.Untuk Demonya silahkan anda lihat di di tengah Artikel saya ini,Mungkin ini tidaklah sempurna layakanya buatan Mastah-Mastah Blogger karena saya juga masih seorang Newbee dalam dunia css jadi mohon di maklumi jika kurang sempurna . Oke langsung saja jika anda berminat membuatnya silahkan anda simak tutorialnya,

Cara Manual Membuat Related Post Dan Adsense Di Tengah Artikel Valid AMP:

Pertama

silahkan anda masuk ke edit HTML Template terus silahkan copy kode css di bawah ini dan taruh di bawah kode <style amp-custom=’amp-custom’> Di Css bagian postingan.


.related-ads{margin:20px;padding:20px}
.related-ads h4{font-size:15px;text-align:center;color:#00c2ff}
.related-ads .note-dul{width:50%;height:250px;display:inline-block;float:left;}
.related-ads .adstengah{width:50%;display:inline-block;float:right;}
.related-ads .note-dul{border-radius:2px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);background-color:#fff;color:#eee;margin-bottom:15px;}
.clear{clear:both;}
/* Mobile */
@media screen and (max-width: 480px){
.related-ads .note-dul{width:100%;height:250px;display:block;float:none;}
.related-ads .adstengah{width:100%;display:block;float:none;}
}

jika sudah ditambahkan sekarang silahkan klik simpan Template,

Kedua

untuk Kode pemanggilnya silahkan anda gunakan kode HTML di bawah ini,


<div class='related-ads'>
<div class='note-dul'>
<h4>
Baca Juga</h4>
<ul>
<li><a href="link_related">Judul</a></li>
<li><a href="link_related">Judul</a></li>
<li><a href="link_related>Judul</a></li>
</ul>
</div>
<div class='adstengah'>
<amp-ad data-ad-client='ca-pub-28196xxxxxxx' data-ad-slot='780xxxxxx' height='250' layout='fixed-height' type='adsense'>
</amp-ad>
</div>
</div>

Keterangan:

silahkan anda ganti link_related dengan link yang ingin anda tambahkan di list dan judulnya <li><a href="link_related">Judul</a></li>
dan silahkan anda ganti ‘ca-pub-28196xxxxxxx’ data-ad-slot=’780xxxxxx’ dengan kode iklan adsense anda.

Cara Memasang:

untuk Cara memasangnya secara manual ya, silahkan anda copy kode HTML di atas,dan tempel satu persatu ditengah artikel yang ingin di tambahkan related dan ads.
Cara menaruhnya Kodenya jangan gunakan mode compose ya, melainkan menggunakan Mode HTML dalam penaruhan di artikelnya,

Mungkin hanya itu saja, jika tampilannya kurang sempurna silahkan anda kreasikan css nya menurut selera anda, selamat Berkreasi dan Bervalidasi ria,..

Dul Bjn Seorang Blogger dan Mahasiswa yang tak lulus-lulus kuliahnya yang kini tinggal di Bojonegoro. Ingin bermanfaat untuk orang lain dengan cara berbagi pengalaman lewat tulisan yang masih acak kadul.

Cara Membuat Sitemap di Halaman Static Blogger AMP HTML

BLOGS GOBLOG | Cara Membuat Daftar Isi Pada Halaman Static Blogger Valid AMP HTML – Sitemap ialah salah satu pada bagian blog yang berguna...
Dul Bjn
1 min read

Cara Menyisipkan Gambar Slide Valid AMP di Blogger

BLOGS GOBLOG | Bagi kalian pengguna AMP HTML Blogger tidak perlu khawatir dengan tampilan yang terlalu sederhana atau fitur yang kurang lengkap. dikarenakan bagi...
Dul Bjn
2 min read

Cara Memasang Google Maps di Blog AMP HTML

BLOGS GOBLOG| Cara Memasang Google Maps Di Blog AMP HTML – Seperti yang sudah diketahui sendiri bahwa blog yang menggunakan AMP HTML terdapat beberapa...
Dul Bjn
1 min read

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *