Beranda
CSS
HTML

Cara Membuat Related Post Valid AMP Seperti Kompiajaib

Cara Membuat Related Post Valid AMP Seperti Kompiajaib - Template AMP HTML sangat diminati bagi para developer blog yang mempunyai penargetan pengunjung dengan platfrom mobile. Karena template jenis ini mempunyai keunggulan yaitu akan sangat ringan bila dibuka melalui perangkat mobile.

Namun keunggulan tersebut akan mengorbankan beberapa widget yang dinilai sangat efektif untuk meningkatkan seo on page, misalnya related post. Di template AMP kita tidak bisa memasang related post karena di template amp mempunyai aturan tidak boleh menggunakan javascript selain yang disediakan oleh developer amp.

Namun dengan perkembangnya waktu, masalah tidak dapat membuat related post pada amp html tersebut dapat teratasi. Jika kita melihat website kompiajaib.com, di dalamnya terdapat related post, tapi setelah saya cek di ampvalidator, website tersebut dinyatakan valid amp. Ini cukup membingungkan.

Akhirnya setelah saya telusuri, saya menemukan cara agar related post dapat valid amp. Cara cukup mudah, yaitu tinggal membuat amp-iframe hmtl yang memuat konten javascript dari relatedpost tersebut. Lebih jelasnya seperti cara dibawah ini...

Cara Membuat Related Post Valid AMP

Copy dan paste kode css dibawah ini diatas kode </b:skin> atau </style> ...
Baca juga Edit CSS Lebih Mudah Dengan Mozila Firefox Color Picker. 

.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;
}

Lalu 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 == &quot;true&quot;"><amp-iframe expr:src="&quot;https://cdn.staticaly.com/gh/rokim5421/Blog/423b6c06/amprelatedpost.html?fontSize=16px&amp;color=333&amp;url=https://sab-blogger.blogspot.com/&amp;label=&quot; + 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 saya tandai warna kuning tersebut dengan alamat homepage blog sobat...
Bagaimana, mudah bukan...

Related post valid amp ini cocok bagi anda yang mempunyai blog dengan bidang content yang lebar, karena related post ini di design untuk blog yang mempunyai bagian main atau postingan lebar, sehingga gambar akan terlihat rapi. Sekian tutorial saya mengenai Cara Membuat Related Post Valid AMP Seperti Kompiajaib. Semoga bermanfaat...

Posting Komentar