Skip to main content
KOMPI AJAIB

follow us

Mau memiliki tema blog seperti tema blog Kompi Ajaib ini? Silahkan baca postingan ini Template Kompi Ajaib AMP V3.

×

Widget Recent Post Untuk AMP Dengan Next Prev

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://1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/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.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar