ADS

Cara Menciptakan Artikel Terkait Keren Di Blog Amp

Membuat artikel terkait atau popular post valid Amp. Salasatu widget penting dalam blog yang sanggup membantu untuk mempermudah pembaca biar 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.

Membuat artikel terkait atau popular post valid Amp Cara Membuat Artikel Terkait Keren di Blog AMP

Nah, untuk anda yang kebetulan mempunyai sebuah blog dengan tema Amp dan ingin menampilkan widget popular post di bawah artikel blog, terus masih gundah mencari isyarat 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 isyarat 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 karakter dan warna sanggup di sesuaikan sendiri sajah yang di inginkan.

Terimakasih telah berkunjung mudah-mudahan sanggup membantu.

Subscribe to receive free email updates:

ADS