Topics

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


AMP HTML Featured Post Widget/Gadget for Blogger Template

AMP HTML Featured Post Widget/Gadget for Blogger Template
One of the newest widgets/gadgets introduced by Blogger team after years of requests by Blog users, the featured post gadget is made available as a default select able widget under the blog widget selection.

This widget provides blog users to custom select any posts within their blog and display it anywhere at their blog layout by drag & drop widget to its location. Users have the option to display a featured post by with its title, description & image either from their recent published posts or a posts published earlier in their blog by using the useful post search tool.

However for AMP HTML enabled Blogger templates, javascript is included with widget & by including it (from Blogger widget selection) will generate error as a non valid AMP blog page & further editing is required in template HTML.

AMP HTML Featured Post Gadget Improvements for Blogger Blog

Below is the updated Blogger Featured Post widget/gadget that is valid AMP & can be used on any Blogger template with AMP HTML integration. All tags have been converted to use AMP HTML tags which makes it easy to place it anywhere within your blog template section tags,


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 Featured Post Gadget
If you have a unique PassCode from earlier datas, please re-enter your PassCode. Thank You.


How to Use


Adding new widget in Blogger's Template HTML:-

  • At Blogger Dashboard > go to Template
  • Backup template before proceeding
  • Click Edit Template
  • At template <body> find any <b:section> ... </b:section> Blogger template layout tags.
  • Copy above codes inside any <b:section> tag
  • At id='FeaturePost**', replace ** with 1 the unique integer/number.
  • Click Save Template

Note: Blogger only enables only 1 Featured Post widget per blog. You might need to deleted your exisiting Featured Posts widget or replace the existing widget with the AMP enabled widget.

Editing in Blogger dashboard > Layout:

  • Edit gadget title at dashboard > Layout
  • Save widget
  • Drag & drop widget anywhere in template Layout.
  • Save Arrangements.
  • Preview your changes.

Behavior


  • Only 1 Featured Posts widget per blog enabled.
  • No changes on widget/gadget application at Blogger > Layout.
  • Edit widget title to display as the widget title.
  • Select/unselect to display title, description or image.
  • By default, the featured post image display is using AMP HTML layout='responsive'.

Improvements


  • Removed all javascript codes used on existing Featured Post gadget/widget.
  • Updated description tag to use paragraphs tags.
  • Updated <img/> tags to use <amp-img> tags with auto alt, width & height attributes pre-assigned.

Common Styles


Common name references to use for Featured Post widget/gadget for styling. Add CSS within <style amp-custom="amp-custom"/> tag in Blogger's > Template HTML.

#FeaturedPost1 {

}

#FeaturedPost1 h2 {

}

#FeaturedPost1 amp-img {

}

#FeaturedPost1 p {

}

Where * is the unique widget/gadget id assigned for the Featured Post widget/gadget.

If you find any issues, please do not hesitate to leave a comment below or contact us here.

Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsAll new AMP HTML Featured Post gadget for Blogger blog template with Accelerated Mobile Pages enabled, uses heading & paragraphs tags and replaced img tags with amp-img with auto attributes pre-assigned. Removed all javascripts includes and improved widget display with proper tags for easy styling.Blogr-AMP: AMP HTML Featured Post Widget/Gadget for Blogger Template
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support One of the newest widgets/gadgets introduced by Blogger team after years of requests by Blog users, the featured post gadget is made availab....

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