Cara Memasang Komentar Blogger Default di Template Blog Valid AMP

www.ndisaen.com - Cara Memasang Komentar Blogger Default di Template Blog Valid AMP. Seringkali kita menemui blog yang menggunakan template AMP pasti fitur komentarnya jika tidak menggunakan facebook comment pasti menggunakan disqus comment blogger. 

Nah bagi Anda yang ingin memasang komentar blog default di blog AMP, bisa dibuat dan diterapkan langsung di blog Anda. Simak langkah-langkahnya dibawah ini:

Langkah Pertama, tambahkan kode xml dibawah ini kedalam widget blog1, letakkan kode dibawah ini tepat setelah kode  </b:widget-settings>. 
<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>

Pada kode setiap postingan nanti yang ada dalam  <b:includable id='post' var='post'> panggil komentar blogger default valid AMP dengan kode b:include berikut 
<b:include data='post' name='threadedComments-amp'/>

Jangan lupa untuk meng-impor komponen AMP-iframe didalam tag <head> , letakkan kode dibawah ini tepat dibawah tag <head>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

Baiklah, cukup sekian dan terima kasih. Semoga bermanfaat.