Display Popular Post Image Slider with amp-carousel for Blogger Templates

AMP HTML integrations does not mean that your Blogger blog or website pages will look stripped down due to javascript/HTML limitations. AMP...

AMP HTML integrations does not mean that your Blogger blog or website pages will look stripped down due to javascript/HTML limitations. AMP project provides several useful components to use & enhance web pages which blog users can easily extend its application.

For Blogger blogs, there are still limitations (at the time of writing) as the platform itself does not support AMP for blog pages. But since that Blogger users have direct access to their blog template HTML, it is possible to integrate AMP HTML to their blog - without relying on 3rd party services or even editing earlier posts.

In this post we will show you how to create an auto display responsive image & text carousel using Blogger Popular Post widget & integrating with AMP HTML amp-carousel components.

Live working example HTML-2018 Homepage

Before going further, let's take a look on the amp-carousel Popular Post image slider characteristics when applying on Blogger templates:-

• Automatically displays a blog popular posts image(optional), title & caption (optional).
• Uses Blogger Popular Posts existing widget functionalities & settings at Blogger Layout.
• Slider size is explicit and using layout="responsive" to automatically expands ts width & height proportionately.
• amp-carousel auto slides from right to left with slider controls.
• Adjustable sliding timing controls.
• Image sizes extracted from Popular Post widget are explicit with a layout="responsive" pre-assigned & expands to amp-carousel width.
• Touch swipe enabled action on mobile devices.
• Sliding effects will stop upon user action.

Continue