Create a Blog Sitemap on a Blogger AMP HTML Static Page

A sitemap is one part of a blog that is quite important and is one of the SEO elements of a blog. A sitemap here is a page that displays site maps or table of contents for blog visitors so that it will make it easier for visitors to view or search for blog content.

One way to display a blog sitemap is to use a script, for that the sitemap cannot be stored directly on the HTML AMP Blogger page because it will cause an AMP error on the page.

For this reason, one way to display a sitemap on a Blogger AMP HTML static page is to use an amp-iframe by first hosting the sitemap in a third party so that it can be loaded with an amp-iframe.

But as we know that to display the amp-iframe must be stored 70% of the top edge of the screen, otherwise the amp-iframe will not appear on the blog.

For this reason, I've been searching for a safe way to be able to display amp-iframes without having to have a high limit for storing amp-iframes. So that way we can display the sitemap on the Blogger AMP HTML static page by using an amp-iframe that is stored above the Blogger AMP static page post.

And finally I found a safe way to display an amp-iframe without having to save 70% of the top edge of the screen. That is, we can use the image as a placeholder which presses the iframe further down.

Now if you also want to try to create a blog sitemap on a Blogger AMP HTML static page, please use the following code and paste it in the static page HTML mode for a Sitemap.

<amp-iframe title="Sitemap"
              src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemaps-amp.html?url=https://bloggerdyah.blogspot.com/ "
              height="750"
              layout="fixed-height"
              frameborder="0"
              sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2HJ_LeMn9BvW6nHcyiPVzN_NR21mEtUshId4b6QdVrDBfBkJYQd2G7h-YMmFwSH_sGgEO42UcDwkHVK_YaqflMdQK_RnBIEaNAVvoR8JY0zyQ16HgMvPpLEfHMDevcBzGhQP1SftIjBI/s1600/placeholder.png"
             layout="fixed-height"
             height="360"
             width="auto"
             placeholder>
    </amp-img>
  </amp-iframe>

Please change the URL https://bloggerdyah.blogspot.com/ with the URL of your blog and the blog must already be using HTTPS .

This trick can also display anything on the page with amp-iframe. Good luck and hopefully useful.