Memasang Random Post 3 style untuk AMP HTML

Unknown, 16 Oktober 2016

TIPS CODE SHARE - Random post, ialah widget yang menampilkan postingan-postingan secara acak ( menurut saya sendiri ). Kali ini random post sudah valid AMP HTML, selain itu juga di desain secara rapi dan ringan oleh +Kang Ismet.

Akan saya bagikan 2 style dan ditambah request dari seorang teman facebook.

1. Random Post Droidpluss style.

EXAMPLE

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/kangismet/ki-html/master/random-posts2.html?url=&quot; + data:blog.homepageUrl' frameborder='0' height='320' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
</amp-iframe>
</b:if>

2. Random Post KompiDesign style

EXAMPLE

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/amp/master/random-posts.html?url=&quot; + data:blog.homepageUrl' frameborder='0' height='320' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
</amp-iframe>
</b:if>

3. Terakhir

Untuk style yang ini mirip dengan Droidpluss style, yang berbeda hanya tidak ada animasi gerak seperti punya +Kang Ismet dan +Adhy Suryadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/ErvanKusnaidi/AMPku/master/random-posts2.html?url=&quot; + data:blog.homepageUrl' frameborder='0' height='320' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
</amp-iframe>
</b:if>

INFO : Untuk penempatan kode, letakan di atas </article> atau dibawah <data:post.body/>.
Source : http://blog.kangismet.net/2016/10/membuat-random-post-pada-amp-html.html.