Modifikasi BuzzBoost FeedBurner Untuk Widget Recent Posts Blog AMP Dan Non AMP

Kali ini kita akan memodifikasi BuzzBoost dari FeedBurner untuk dijadikan widget recent posts untuk blog AMP dan blog Non AMP.

Recent posts ini bisa disimpan di sidebar blog, baik AMP ataupun non AMP.

Selain di blog utama, kita bisa menyimpan widget recent post ini di blog lain yang Anda kelola sebagai promosi link dari blog yang kita kelola.

Sebagai demonya silahkan lihat penampakannya pasa jsfiddle berikut ini.

Demo untuk blog non AMP:

Demo untuk blog AMP:

Bagaimana, tertarik untuk mencobanya? Silahkan ikuti langkahnya berikut ini.

Untuk blog non AMP:
Silahkan simpan kode CSS berikut

.feedburnerFeedBlock li,.feedburnerFeedBlock ul{list-style:none;margin:0;padding:0}

.feedburnerFeedBlock a{text-decoration:none;color:#555;line-height:1.4}

.feedburnerFeedBlock #creditfooter,.feedburnerFeedBlock .fbsubscribelink,.feedburnerFeedBlock .feedItemAuthor{display:none}

.feedburnerFeedBlock li{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='20' height='20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") -5px 0 no-repeat;padding-left:15px}

Kemudian simpan kode berikut di widget HTML/JavaScript di sidebar.

<script type="text/javascript">

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://feeds.feedburner.com/bloggue/NdCO?format=sigpro&nItems=10&displayTitle=false&displayExcerpts=false&displayDate=false&displayEnclosures=false\"></scr" + "ipt>");

</script>

Kode yang ditandai silahkan ganti dengan FeedBurner blog Anda seperti pada gambar berikut.

Untuk blog AMP silahkan tambahkan kode berikut di widget HTML/JavaScript di sidebar.

<amp-iframe height="550"

    layout="fixed-height"

    sandbox="allow-scripts allow-forms allow-same-origin"

    frameborder="0"

    scrolling="no"

    src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/feedburner.html?feed=bloggue/NdCO">

</amp-iframe>

Silahkan atur angka untuk height nya jika recent post nya terpotong. Dan silahkan ganti kode yang ditandai dengan FeedBurner blog Anda seperti pada gambar di atas. Dan pastkan di blog Anda sudah terpasang js amp-iframe.