Blogger platform has provided the Popular Posts widget feature. But, this feature does not support AMP pages. Causes of AMP validation errors in widgets Popular Posts are img tags and quickedit features. Need a little change, so that the Popular Posts widget is valid AMP.
Here's how to create Blogger popular post widget valid AMP
1. Remove the HTML code in the Popular Posts widget, then replace it with the following code to make Blogger Popular Posts valid AMP.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>5</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><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 ? "item-content" : "item-thumbnail-only"'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 320, "2:1") : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' height='160' layout='responsive' width='320'/>
</b:with>
<b:else/>
<amp-img expr:alt='data:post.title' height='160' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsj-wk-IhtwPI0AxMsHliR2ghE4m7pJIpdj1oHI2h2HITqHOgseP8UxXIvmkI7AODrScEoDgO35jmTablsm8CTvgo_-uaxQLPPv5men0tVQcM30OQAFssn2HP2k5tTGwj3RKcD884RLsM/s320/amphtml-thumbnail2.jpg' width='320'/>
</b:if>
</a>
</div>
<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 style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
<!--<b:include name='quickedit'/>-->
</div>
</b:includable>
</b:widget>2. Add this Popular Posts CSS code into your AMP template.
/* Popular Posts */
.PopularPosts .widget-content ul{width:103%;margin:0 auto;padding:0;list-style-type:none;counter-reset:popcount}
.PopularPosts .widget-content ul li{width:47%;float:left;margin:0 20px 20px 0;padding:0;overflow:hidden;position:relative;box-shadow:0 1px 0 rgba(0,0,0,0.05),0 3px 3px rgba(0,0,0,0.05)}
.PopularPosts .widget-content ul li:last-child{margin:0;}
.PopularPosts .widget-content ul li a{color:#fff;text-decoration:none;font-size:16px;font-weight:500}
.PopularPosts .widget-content ul li img{width:100%;padding-right:0;transition:all .6s ease-in-out;}
.PopularPosts .item-thumbnail{float:none;margin:0}
.PopularPosts .item-title a{padding:10px;position:absolute;bottom:0;left:0;right:0;text-align:left;background:rgba(0,0,0,.5);transition:all .3s ease-in-out}
.PopularPosts .item-title a:hover{color:yellow}
.PopularPosts .item-snippet{display:none}
@media screen and (max-width:768px) {
.PopularPosts .widget-content ul li{width:46.5%}
}
@media screen and (max-width:640px) {
.PopularPosts .widget-content ul li{width:46.2%}
}
@media screen and (max-width:414px) {
.PopularPosts .widget-content ul li{width:100%;float:none;}.PopularPosts .widget-content ul{width:100%}
}3. Save Theme, and then check your page with AMP Test.
Tambahkan Komentar