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 dapat disimpan di sidebar blog, baik AMP ataupun non AMP.

Selain di blog utama, kita dapat 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 isyarat 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 isyarat 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 menyerupai pada gambar berikut.


Untuk blog AMP silahkan tambahkan isyarat 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 bila recent post nya terpotong. Dan silahkan ganti isyarat yang ditandai dengan FeedBurner blog Anda menyerupai pada gambar di atas. Dan pastkan di blog Anda sudah terpasang js amp-iframe.


Sumber https://www.kompiajaib.com/

Share this post