Assalamu’alaikum Warahmatullahi Wabarakaatuh,
Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan berbagi Cara Membuat Related Post Valid AMP Seperti Kang Ismet.
Membuat related post yang valid AMP (Accelerated Mobile Pages) bisa menjadi tantangan, tetapi jika dilakukan dengan benar, dapat meningkatkan pengalaman pengguna dan kecepatan situs web Anda.
Berikut adalah langkah-langkah untuk membuat related post yang valid AMP:
Template AMPHTML Blogger sangat diminati para developer blog yang mempunyai penargetan pengunjung dengan platfrom versi mobile. Karena template jenis ini tentunya mempunyai keunggulan yaitu akan sangat ringan bila dibuka melalui perangkat mobile/handpone.
Namun keunggulan juga akan mengorbankan beberapa widget yang dinilai sangat efektif untuk meningkatkan seo on page (halaman teratas pada pencarian googel), misalnya seperti related post. Di template AMPHTML ini kita tidak bisa memasang related post karena di template amp mempunyai aturan tidak boleh menggunakan javascript selain yang disediakan oleh developer AMPHTMLny sendiri.
Namun dengan perkembangnya zaman, masalah ini tentunya tidak dapat membuat related post pada amphtml tersebut dapat teratasi ya sob. Jika sobat melihat website Kang Ismet, di dalamnya terdapat related post, namun setelah saya cek di amphtml validator, website tersebut dinyatakan valid amphtml. Ini cukup membingungkan.
Akhirnya setelah mimin telusuri, mimin menemukan cara agar related post dapat valid amphtml. Cara ini tentunya sangat mudah sekali, yakni tinggal sobat membuat amp-iframe hmtl yang memuat konten javascript dari fiktur relatedpost tersebut. Lebih jelasnya seperti cara dibawah ini ya…
Cara Membuat Related Post Valid AMPHTML
Silahkan Copy dan Paste kode css dibawah ini diatas kode </b:skin> atau </style> …
.share-this-pleaseeeee {
display: inline-block;
margin: 0;
color: #afafaf;
text-transform: uppercase;
font-size: 14px;
background: #fff;
z-index: 1;
position: relative;
padding: 0 10px;
font-weight: 500;
}
.label-line-c {
position:relative;
}
.label-line-c {
text-align: center;
margin-top: 20px;
margin-bottom: 6px;
}
.label-line-c:before {
z-index: 1;
content: "";
width: 100%;
height: 1px;
background: #dddddd;
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
}Kemudian copy dan paste kode html dibawah ini sesuai dengan letak yang kamu inginkan, atau bisa juga dibawah kode <data:post.body/>…
<div class='label-line-c'>
<p class='share-this-pleaseeeee'>Related Post</p>
</div><b:loop values="data:post.labels" var="label"><b:if cond="data:label.isLast == "true""><amp-iframe expr:src=""https://cdn.staticaly.com/gh/rokim5421/Blog/423b6c06/amprelatedpost.html?fontSize=16px&color=333&url=https://masrizky.web.id&label=" + data:label.name" frameborder="0" height="532.84" layout="fixed-height" sandbox="allow-scripts allow-same-origin allow-modals allow-popups">
<amp-img height="532.84" layout="fixed-height" noloading="" placeholder="" src="https://cdn.staticaly.com/img/1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/s1600/back-iframe.png" width="auto">
</amp-img></amp-iframe></b:if></b:loop>
Ganti bagian yang mimin beri tanda warna kuning tersebut dengan alamat homepage blog kamu…
Bagaimana, mudah bukan hehehe…
Related post valid amphtml ini cocok bagi kamu yang mempunyai blog dengan bidang content yang lebar, karena related post ini di design untuk blog yang mempunyai bagian main atau postingan lebar, sehingga picture/gambar akan terlihat rapi.
