Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


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

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

amp-carousel Popular Post widget image slider Blogger template

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


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



Slider Title 1

Slider Caption 1

Slider Title 2

Slider Caption 2

Slider Title 3

Slider Caption 3

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 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.
Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsCreate & manage auto image slider Popular Post widget/gadget on Blogger blogs use amp-carousel responsive image/text slider with touch swipe action on mobile example codes, instructions, customization & live working preview provided.Blogr-AMP: Display Popular Post Image Slider with amp-carousel for Blogger Templates
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support AMP HTML integrations does not mean that your Blogger blog or website pages will look stripped down due to javascript/HTML limitations. AMP ....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.


Working...

Ooops! We're having trouble connecting...