Add Related Posts Side By Side With Adsense In Blogger AMP HTML

Actually this is the result of experiments in laying adsense ads in order to increase revenue. One of them tried a 600px high ad unit in the posting area on desktop and mobile.

Finding the right location to implement a 600px high ad, finally the right place is saved adjacent to the related posts. But for mobile viewing, ad units are under related posts, but still show a 600px high ad.

For the appearance can be seen below this post or on the thumbnail above.

If you want to try it too, please copy the code below.

Please save HTML code below post in HTML edit

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post'>
<h4>Related Posts:</h4>
<div class='underpost1'>
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/kompiajaib/kompi-html/master/relatedposts_light.html?url=https://wdbloggerina.blogspot.co.id/&amp;label=&quot; + data:label.name' frameborder='0' height='620' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
</amp-iframe>
   </b:if>
 </b:loop>
</b:if>
</div>
<div class='underpost2'>
<amp-ad data-ad-client='ca-pub-2124282593xxxxxx' data-ad-slot='xxxxxxxxxx' height='600' layout='fixed-height' type='adsense'>
</amp-ad>
</div>
<div class='clear'/>
</div>
</b:if>

Replace the code https://wdbloggerina.blogspot.co.id/ with your blog's domain. Then adjust the data-ad-client and data-ad-slot with your adsense.

Then please save the CSS below in the amp-custom style for the post page.

.related-post{margin:20px 20px 0;padding:0}
.related-post h4{font-size:20px;margin:0 0 10px;}
.related-post .underpost1,.related-post .underpost2{width:50%;display:inline-block;float:left;}
.related-post .underpost1{margin-bottom:10px;}
.related-post .underpost2{margin:20px 0;}
.clear{clear:both;}
@media screen and (max-width:414px){
.related-post .underpost1,.related-post .underpost2{width:100%;display:block;float:none;}
.related-post .underpost1{margin-bottom:0;}
.related-post .underpost2{margin:20px 0 0;}
}