Cara Membuat Recent Post Scroll Valid AMP

Recent post scroll amp, recent post scroll amp blogger, Cara Membuat Recent Post Scroll Valid AMP, Recent Post Kompi Ajaib - Sebuah Recent Post Sudah lah tidak asing lagi digunakan untuk para user website yang dimana akan nya mempermudah para pengunjung agar lebih mempermudah mengakses nya sebuah website terutama dalam artikel artikel terkait tertentu.

Baca : Recent Post Valid AMP V1

Recent post pun pada umumnya diberikan agar lebih mempermudah mengakses nya para pengunjung agar lebih senang mengakses sebuah situs kita sehingga sebagian besar SERP on Google akan meningkat atau tayangan per klik artikel jadi lebih bertambah.

Pada umumnya sebuah website yang dimana sudah dijelaskan seperti diatas yakni seperti Agar lebih untuk para kaum non AMP lebih banyak digunakan dikarenakan fitur website non AMP banyak nya support tag tag tertentu terutama tag yang sering digunakan dalam pembuatan recent post yakni seperti Javascript/Jquery terutama.

Namun tenang bagi kalian para user website yang dimana sudah nya support akan valid nya struktur AMP pada website tertentu kalian, maka cara nya pun tidak lah usah ragu, melainkan kalian hanya tenang saja, dan AA Sciences akan memberikan turor nya di bawah ini.

Sebelum nya membahas tutor nya lebih baik terlebih dahulu kita mengetahui latar dan kelebihan dalam fitur recent post ini jika kita ingin menerapkan nya.

Recent Post ini di berikan oleh kang Adhy Suryadi tentunya yang dimana AA Sciences hanya ingin membagikan nya agar kalian khususnya para penambah widget recent post scrolls valid AMP lebih leluasa menggunakan nya, (Thanks To Kang Adhy).

Widget Recent Post ini pun tidak kalah, yakni memiliki fitur keuntungan lainnya, seperti :

Terdapat Scrolls Otomatis

Fast Loading

Responsive Featured

Support Thumbnail

Support posting artikel berbeda

Support posting banyak artikel

Dan masih banyak fitur lengkap lainnya

Jika kalian sudah mengetahui nya, maka langsung saja bagaimana cara pembuatan recent post scroll valid AMP kali ini, berikut tutorial nya :

Cara Membuat Recent Post Scroll Valid AMP Blogger

Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode <style amp-custom=.....> atau tag bagian postingan/item desktop or mobile .

Jika sudah ditemukan kode <style amp-custom=.....> atau tag bagian postingan/item desktop or mobile nya tadi, langsung saja kalian Salin kan Script CSS dan Responsive Recent Post Scroll Valid AMP nya di bawah ini tepat pada tag <style amp-custom="tag posting an nya">, berikut script nya :

/* CSS Related Post */
.related-post{margin:20px 20px 0;padding:0}
.related-post h4{font-size:20px;margin:0 0 10px;}
.related-post .underpost1,.related-post .underpost2{width:50%;display:inline-block;float:left;}
.related-post .underpost1{margin-bottom:10px;}
.related-post .underpost2{margin:20px 0;}
.clear{clear:both;}
@media screen and (max-width:414px){
.related-post .underpost1,.related-post .underpost2{width:100%;display:block;float:none;}
.related-post .underpost1{margin-bottom:0;}
.related-post .underpost2{margin:20px 0 0;}
}

Masih dalam mode Template - > Edit HTML , lalu CTRL+F untuk memudahkan pencarian dan cari tag <data:post.body> lalu letakkan script recent post scroll AMP nya tepat sesudah tag <data:post.body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post'>
<h4>You Might Also Like:</h4>
<div class='underpost1'>
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/relatedposts_light.html?url= www.aldiandreansyah.com &amp;label=&quot; + data:label.name' frameborder='0' height='620' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
</amp-iframe>
   </b:if>
 </b:loop>
</b:if>
</div>

Ubah URL www.aldiandreansyah.com dengan URL sesuka kalian

Terakhir, Langsung saja Simpan Theme dan lihat hasilnya 

Share this post