How to Create a Popular Posts Valid AMP

If you are experiencing Error when install widget popular posts it is a natural thing because widgets in blogger using the [external style] code is not valid AMP, because bloggers themselves do not provide valid AMP widgets, so to overcome the widget that error like popular posts widget, we must insert the html code in the template or edit the widget that Error in the AMP blog.

Step Create a Popular Posts Widget Valid AMP

As already shared by the kompi ajaib, to create popular posts widgets for AMP blog, you can edit the popular posts widget we have installed or we can add the new popular posts widget code in the blogg AMP template.

First, add widgets in the layout as usual, this will make it easier for us to put the code of popular posts that are valid AMP.

Second, Edit your template html and search for code Popularposts1 delete all code from <b:widget id='..... Up </b:widget> and replace with code below

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'> 
<b:includable id='main'> 
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if> 
<div class='widget-content popular-posts'>
 <ul> 
<b:loop values='data:posts' var='post'> <li> 
<b:if cond='!data:showThumbnails'> 
<b:if cond='!data:showSnippets'> 
<!-- (1) No snippet/thumbnail -->
 <a expr:href='data:post.href'><data:post.title/></a> 
<b:else/> 
<!-- (2) Show only snippets -->
 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> 
<div class='item-snippet'><data:post.snippet/></div> 
</b:if> 
<b:else/> 
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> 
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
 <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> 
<div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> 
<b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 700) : data:post.thumbnail' var='image'>
 <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='170' layout='responsive' width='280'/> </b:with> </a> 
</div> 
<b:else/> 
<div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'>
<amp-img expr:alt='data:post.title' expr:title='data:post.title' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWJxLN499_GwJlXaeVBrKIgsEvVQeXNPzRxjxQo6Ld4ZzzjOvf5g0FJRcHBEhntjLGmTvO3_BoLBNsmDPfXWN5238NavXzUOruQrXEQONfR-BjU5SqCFu8uIeiytKwPtmqdcyR899BnoE/s100/no-thumbnail.png' width='100'/> </a> </div> </b:if> 
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> 
<b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div>
 <div class='clear'/> </b:if> </li> 
</b:loop> 
</ul> 
</div> 
</b:includable> 
</b:widget>

Third, add the following css in the
<style amp-custom='amp-custom'> code or replace all popularposts css code if your template already exists.

/* popular post */ 
#PopularPosts1 ul{padding:10px 0;margin-top:-15px}.PopularPosts .item-thumbnail{margin:0}.PopularPosts .widget-content ul{padding:0;margin-top:-7px}.PopularPosts .item-title a{text-decoration:none;font-weight:700;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s}.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,
.PopularPosts .widget-content ul li a:hover{color:#e8554e}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0;padding:0 0 10px;line-height:1.3em;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li .item-thumbnail{margin:10px 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,
.PopularPosts li:first-child .item-snippet{display:block}

Done save template.
By using html code above then widget popularposts not error back.

For test AMP validation can be checked in amptest

Tags:

Amp