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 Blogr-AMP 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-carouselauto 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 toamp-carouselwidth. - 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 HTMLFind
</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:-Get Your Unique PassCode
1 PassCode used on All exclusive datas in this AMP Blogger Blog!
PassCode Delivered by Google's FeedBurner | Privacy Policy | Terms
Show & Copy AMP HTML Popular Posts Image Slider Carousel/Gadget
If you have a unique PassCode from earlier datas, please re-enter your PassCode. Thank You.
Add CSS for amp-carousel
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.
The Results
Live working example Blogr-AMP Homepage
You May Consider
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 delayWhat 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.
Working to get connected...
Ooops! We're having trouble connecting. Please refresh your page or contact us...