Skip to main content

Cara Membuat Komentar Blogger Default Valid AMP ( Komentar Bawaan )

Pada umumnya komentar blogger yang biasa di gunakan dalam template blog valid amp adalah komentar diqus atau komentar facebook.
Karna kedua platforms komentar tersebut sudah mendukung valid amp yang sudah di jelaskan di situs remi amp dev.
Seperti yang kita tau blogger bawaan komentar ini membutuhkan script yang bukan dari amp, sehingga penerapannya pun sangat mustahil buat blog amp.

Tapi tauhkah anda blogger amp semakin hari semakin berkembang banyak sekali developer yang terus berinovasi tentang amp blogger.
Pada dasarnya komentar disqus ataupun komentar facebook ini menggunakan amp-iframe jadi halaman di muat dari pihak ekternal
Dengan menggunakan teknik tersebut kita bisa membuat komentar blogger default tanpa harus menyertakan scrpit yang tidak valid di template blogger amp.
Pada dasarnya template blogger yang bukan amp bisa menggunakan threadedComments ( jika memakai beberpa opsi komentar )
Sebagai contoh seperti ini
<b:include data='post' name='threadedComments'/>


Agar komentar valid amp , maka panggilan komentar amp dengan kode berikut ini
<b:include data='post' name='threadedComments-amp'/>


Selanjutnya Tambahkan kode xml
<b:includable.......</b:widget-settings>
di bagian komentar blogger yang telah anda pasang sebelumnya misalnya di bawah tag komentar disqus atau komentar facebook atau juga anda bisa mengganti salah satu kementar disqus atau facebook dengan komentar blogger defaut.
Menjadi seperti ini

<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>


( jika belum menambahkannya )

Kelebihan komentar default blogger ini walaupun menggunakan amp-iframe tapi tidak memberatkan loading blog agar lebih maksimal kita juga bisa menambahkan show-hide

Sekian dari saya, semoga bermanfaat dan selamat mencoba,oh iya bantu di share yah.

Sumber :


https://anasrar.github.io/blog/post/make-comment-default-blogger-for-amp

Baca juga

Follow us on Instagram
@encepnurdin.id

More from Instagram...

Follow us on Facebook
@encepnurdin.id

Find us on Google Maps
@encepnurdin

Reaksi:

Berbagi Itu Peduli :

  • Widodo - Reader 4/23/2020 12:36 PM

    Bagus penjelasannya

  • Encep Nurdin ID - Admin 4/23/2020 11:10 PM

    Masih belajar pak 😀

Aplikasi: Tambahkan aplikasi encepnurdin. id di smartphone tanpa install, buka encepnurdin. id dengan browser Chrome di smartphone lalu klik ikon 3 titikdi browser kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi encepnurdin. id dari layar utama smartphone Anda.