Make Comment Default Blogger For AMP
Comments icon by Icons8

recently I learn AMP (Accelerated Mobile Pages), and I think blogger is the right place to learn the component

and this code below is how to make list default blogger and the comment box that support amp

<b:includable id='threadedComments-amp' var='post'>
    <section class='comments' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
        <ul>
            <b:loop values='data:post.comments' var='comment'>
            <li>
                <figure class='avatar'>
                    <amp-img alt='Avatar' expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='32' layout='responsive' width='32'/>
                </figure>
                <p>
                    <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><data:comment.author/></a> - <b:if cond='data:post.adminClass == data:comment.adminClass'>admin<b:else/>reader</b:if> <small><data:comment.timestamp/></small>
                </p>
                <p><small><b:if cond='data:comment.isDeleted'><span class='text-gray'>Comment Deleted</span><b:else/><data:comment.body/></b:if></small></p>
            </li>
            </b:loop>
        </ul>
        <b:if cond='data:post.allowNewComments '>
        <div id='threaded-comment-form'>
        <amp-iframe expr:src='data:post.commentFormIframeSrc' height='280' id='comment-editor' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-forms allow-top-navigation'>
            <amp-img layout='fill' placeholder='' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='/>
        </amp-iframe>
        </div>
        </b:if>
    </section>
</b:includable>

Important

You need import component amp-iframe inside head tag

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

How To Use

<b:include data='post' name='threadedComments-amp'/>