Tunggu Sebentar...

3/12/2017

Cara Membuat Recent Post Scroll Valid AMP

Baca Juga



Agar Website AA SCIENCES Rutin Update Artikel Terkait Dunia SHARING PENGALAMAN atau hal lainnya, Mohon Bantu Donasinya Akhy dan Ukhti, Caranya pun Mudah. Akhy dan Ukhti hanya cukup Meng-Klik Iklan Dibawah ini ataupun Iklan yang Berada Dimana Saja. Salam Ukhuwah dan Saling Peduli Sesama yaa Akhy dan Ukhti :)

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 
  • Artikel Terkait

    Seorang Pelajar yang Ingin Berbagi Ilmu Pengalaman yang diketahui nya kepada seluruh Umat Manusia, dan Semoga Ilmu yang ia bagikan tersebut bermanfaat. Amin

    ================================================================
    ~ Jika ingin men Copy Paste harap masuk kan sumber link artikel saya di postingan sobat
    ~Dilarang Berkomentar link aktif , jika ada yang memasuk kan link aktif maka kami akan Hapus dan kami anggap Spam
    ~ Komentar lah dengan Bahasa yang Baik dan Relevan dengan sesuai artikel terkait tersebut . Terimakasih
    ================================================================
    EmoticonEmoticon