How to Make Recent Post Widget for AMP Blogger Template
Tutorial how to make Widget Recent Post for Blogger Template valid AMP HTML. Read this article. Recent Post widget developed by Kompi Ajaib, valid Google AMP HTML for Blogger/Blogspot
Tutorial how to make Widget Recent Post for AMP Blogger Template
Blogger widgets become one of the important components in a blog. A widget function to beautify the appearance of the template and aim to make navigating a Website easy.
Even widgets like Popular Post Widget and Recent Post can reduce the bounce rate of a Blog. This is usually what will improve the performance of the Website and ad revenue.
This time, I will share the tutorial on making Recent Post Widget that can display the latest articles on a Blogger blog. This widget is valid AMP HTML, so it fits you apply to AMP Blogger Template.
Recent Post for AMP Blogger
This widget was developed by Kompi Ajaib, a famous blog that discusses a lot of Blogging Tutorial contents. This Recent Post widget uses the amp-iframe component, so make sure you have placed the amp-iframe component on <head>.
<script async='' custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Kompi Ajaib has prepared Javascript and HTML that has been hosted on Github, so you can simply embed using amp-iframe. I have prepared it.
Copy this following code in Sidebar, please Edit your template, and paste this following code.
If you are confused about how to place the code, you can use the manual method. Click Layout on the Blogger.com dashboard, then Add Gadget, and choose HTML / JavaScript.
<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 != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> <b:if cond='data:blog.pageType == "item"'> <amp-iframe expr:src='"https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/recentpost-amp.html?fontSize=16px&color=333&url=" + 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/AVvXsEhomCwLpxd3-ZYb5bU5UdOircxOcx-xakPin_xZtV9BIgVPUFbBmy3fIRzXLLyicg0RHMv8sgF0CoQki65sjddgWXrvwAxO2W8vK1O79FUge8ihDazHXbaNMEK21AaUkYAQHo0d7XtFQlU/s1600/back-iframe.png' width='auto'> </amp-img> </amp-iframe> </b:if> </div> </b:includable> </b:widget>
<amp-iframe frameborder="0"
height="500"
layout="fixed-height"
sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups'
src="https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/recentpost-amp.html?url=https://www.amp-blogger.com/">
</amp-iframe>
Demo
See Demo for Live result.
Thanks for read Article Widget Recent Post for AMP Blogger Template. Good luck :)