Widget Recent Post Untuk AMP Dengan Next Prev

Ditulis oleh: Adhy Suryadi

Ditulis pada: 12/24/2018

Widget Recent Post Untuk AMP Dengan Next Prev - Sebenarnya widget recent post adalah salah satu widget yang tidak wajib ada di blog. Karena untuk melihat postingan terbaru, pengunjung bisa pergi ke homepage.

Namun beberapa blogger tetap memasang widget recent post dengan tujuan untuk memberikan kemudahan kepada pengunjung untuk mengetahui postingan terbaru di blog tersebut.

Karena homepage menampilkan postingan terbaru, maka widget recent post seperti ini sebaiknya tidak ditampilkan di homepage, tetapi hanya ditampilkan di halaman postingan saja.

Widget Recent Post Untuk AMP Dengan Next Prev yang dimaksud adalah seperti pada demo berikut:


Untuk menyimpan widget recent post ini di sidebar blog AMP, silahkan copy kode berikut ini dan simpan di antara widget di sidebar melalui EDIT HTML.

          <b:widget id='HTML97' locked='false' title='' type='HTML' version='1'>

            <b:widget-settings>

              <b:widget-setting name='content'><![CDATA[<!--recentpost-->]]></b:widget-setting>

            </b:widget-settings>

            <b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <data:content/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/recentpost-amp.html?fontSize=16px&amp;color=333&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='488' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' title='Recent Posts'>

    <amp-img height='488' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYm78sfM6DtxFmvJ7e2sMtEt4jY5TruItGRqluFFCHROU5I0Q8qgjZgpvs8qN7mMkTWuZfxOITAGwl-4_VZ5nKUce3LDWKgCL-oUPW7rxF9YjQ1z5Hi4sCBiv8gCD3AHGsRBqZkIpato/s1600/back-iframe.png' width='auto'>

    </amp-img>

  </amp-iframe>

  </b:if>

  </div>

</b:includable>

          </b:widget>

Kode 16px yang saya tandai untuk mengatur ukuran font title post, kode 333 yang ditandai itu untuk mengatur warna title post (kode hex warna tanpa #).

Semoga bermanfaat.