April 27, 2020

Home » , , » How to Make Recent Post Widget for AMP Blogger Template

How to Make Recent Post Widget for AMP Blogger Template

By 

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

Table of Contents:
Recent Post for AMP Blogger
Demo

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.
          <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaqa7Q5P7TfDt_FvpkQV-X0rBPfCqVKzY5G2QpL9kYXBs8acUvZevkFgAa9yNcqfrtUMOBWGi1O0dOprbWCShQh2R9KR5QE9RnNkijoRNuH5sc44YMf_QY2Fq-FGT1-ht8iOz_UlS2rdo/s1600/back-iframe.png' width='auto'>
    </amp-img>
  </amp-iframe>
  </b:if>
  </div>
</b:includable>
          </b:widget>

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.

 
<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>

Paste the code below, then replace the yellow mark with the address of your blog.