Popular posts white slide image

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.


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.


We assume you already have some knowledge of AMP HTML implementation & restrictions and a good knowledge on Blogger dashboard functionalities.

Add amp-carousel AMP HTML component


Go to dashboard > Template > click HTML
Find </head> tag > copy & paste below amp-carousel component above </head>

<script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>

Create a new Blogger Layout Section


Anywhere in your template <body> ... </body> tag, copy below Blogger layout tag/section that will "hold" your new AMP HTML Popular Post widget.

<b:section class='featured-posts' id='featured-posts' maxwidgets='1'>

</b:section>

Add AMP HTML Enabled Popular Post Gadget


Since that existing Blogger Popular Post gadget is not AMP valid, add below AMP HTML enabled Popular Post gadget/widget in between the <b:section /> you have created earlier. It will look like so:-


Since that we have assigned featured-posts as the classname reference for this new AMP HTML Popular Post widget/gadget, we will use this to assign the carousel styling.

Still at template HTML find </style> & paste below CSS directives to assign for your carousel.

.featured-posts {
  background-color: #f9f9f9; /* background color for slider section */
}

.featured-posts .widget h2 {
  color: inherit; /* widget title color */
}

.featured-posts a {
  color: #ffffff; /* links color */
}

.featured-posts .slide {
  position: relative;
}

.featured-posts .caption {
  text-align : center;
  position : absolute;
  top : 50%;
  z-index: 99;
  width : 100%;
  padding: 20px 0;
  background-color: rgba(0,0,0,.25);
  color: #ffffff; /* text color */
}

.featured-posts h4 {
  font-size: 23px; /* post title font size */
}

.featured-posts p {
  font-size: 18px; /* caption text font size */
  color: inherit;
}

Click Save Template.

Activate Popular Post Gadget


Go to your dashboard Layout find the new AMP HTML enabled Popular Post widget & click Edit to update the widget/gadget settings. Once applied click Save to register the widget with your blog.

Do take note that on newly created blogs, the popluar post data will take sometime to display until Blogger servers has fully propogate your blog posts/pages users visits.


You can use multiple image carousels on your blog pages. Copy & paste AMP HTML Popular post widget codes & assign a unique id for the new widget.

amp-carousel component/script only requires to be included once on any AMP HTML web page.

amp-carousel requires a specific width & height size. Current settings displays carousel at 4 by 3 ratio at 640px in width and 480px in height but expands to its parent container width due to AMP layout="responsive" attribute assigned.

amp-img requires a specific width & height size. Current settings displays images at 4 by 3 image ration at 640px in width and 480px in height but expands to amp-corousel width due to AMP layout="responsive" attribute assigned.

Custom set amp-carousel sliding/effect settings at attribute delay

What do yout think? Need a custom Blogger widget/gadget for your Accelerated Mobile Pages (AMP) powered Blogger blog(s)? Shoot a comment below or contact us for inquiries.

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×