Cara Menciptakan Artikel Terkait Keren Di Blog Amp

Baca Juga

Membuat artikel terkait atau popular post valid Amp. Salasatu widget penting dalam blog yang sanggup membantu untuk mempermudah pembaca semoga sanggup dengan gampang untuk mengetahui artikel lainya yang terkait dengan artikel yang sedang di bacanya.

Pastinya anda sudah mengenal dengan yang namanya template Amp (akselerated mobile page), yang sanggup menciptakan halaman situs atau blog memuat lebih cepat walaupun dalam keadaaan jaringan yang lembek.

Namun dalam penggunaan template blog yang berbasis AMP ini, pastinya akan sedikit berbeda dengan template blog yang non amp.

Nah, untuk anda yang kebetulan mempunyai sebuah blog dengan tema Amp dan ingin menampilkan widget popular post di bawah artikel blog, terus masih galau mencari arahan untuk menciptakan widget artikel terkait yang benar-benar sudah valid AMP, dan dibawah ini anda sanggup mencobanya mungkin sajah tampilanya cocok ibarat yang anda inginkan.

Karena berdasarkan aku tampilan dari artikel terkait yang aku bagikan ini sudah sangat keren untuk blog yang memakai template AMP, selain itu arahan di bawah ini sudah mendukung untuk halaman blog AMP.

Tinggal copy kemudian sisipkan di template blog amp milik anda.

Pasang di bawah tag artikel postingan. jangan lupa ganti yang dikasih warna tanda merah dengan nama alamat blog anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond="data:post.labels">
<b:loop index="x" values="data:post.labels" var="label"> <b:if cond="data:x==0">
<div id="related-posts">
<h3>
Artikel Terkait</h3>
<amp-iframe expr:src="&quot;https://cdn.rawgit.com/MuhAkram/Blog/master/related-post.html?url= Alamat blog anda &amp;colortitle=000000&amp;colordesc=000000&amp;back=ffffff&amp;item=both&amp;style=thumbnail&amp;label=&quot; + data:label.name" frameborder="0" height="420" layout="fixed-height" sandbox="allow-scripts allow-same-origin allow-modals allow-popups"> </amp-iframe> </div>
</b:if></b:loop>
<div class="clear">
</div>
</b:if></b:if>

Jangan lupa CSS nya copy juga.

/* CSS ARTIKEL TERKAIT */
#related-posts {background:#fff;font-size:20px;margin:0;padding:20px;}
#related-posts h3 {text-align:left;font-size:140%;color:#666;margin:0;padding:0}

Untuk ukuran abjad dan warna sanggup di sesuaikan sendiri sajah yang di inginkan.

Terimakasih telah berkunjung mudah-mudahan sanggup membantu.