Cara Memasang Komentar Bawaan Blogger Amp

Cara Memasang Komentar Bawaan Blogger Amp

Cara Memasang Komentar Bawaan Blogger Amp Biasanya komentar pada blog AMP memanfaatkan Disqus ataupun Facebook comment. Mulanya versi mobile blog ini pun memanfaatkan komentar Facebook, tetapi kini menggunakan Threaded Comment Blogger yang pastinya telah di custom valid AMP. Untuk tipe dekstop pun ditambahkan fitur komentar Disqus (buat diskusi). Sama kayak di posting sebelumnya komentar blogger ini memakai schema.org dan juga anti backlink untuk SEO.

Baca juga Bagian Komponen Halaman blog dan penjelasannya

Blogger telah memanfaatkan tag nofollow untuk tiap anchor link yang terlihat pada komemtar seperti yang telah dijelaskan di blog resminya puluh tahun lalu. Namun menurut saya itu tidak cukup, sehingga dengan Anti Backlink link apapun yang tampak pada komentar akan dihapus, sehingga menjadi hanya berbentuk teks saja.

Komentar ini valid AMP, cuman memiliki keterbatasan dalam fiturnya (tidak seperti pada non-AMP ataupun versi dekstop). Yakni tidak dapat untuk menanggapi komentar, bisa jadi sebetulnya bisa diakali dengan amp-bind, yaa… lantaran cukup rumit malas otak-atik. Untuk kotak form memakai amp-iframe, meskipun masih terdapat kesalahan ketika memuatnya, lihat di log consol. namun tidak berpengarus validasi amp, dan juga tetap dapat digunakan.

* Penting apabila mau memakai komentar ini – kode komentar blogger seo ini memakai “post.numberOfComments“. Dan Juga kode tersebut hanya support “Gadget Versi 2” dan juga “layout Versi 3“. Intinya sarat menggunakannya, template wajib sudah versi terbaru. bila tidak, nanti justru akan error. Namun ada kok

Cara menanganinya ganti kode “data:post.numberOfComments” menjadi “data:post.comments.length“. agar dapat digunakan untuk template lama. silahkan lanjutkan sendiri.

Cara Memasang Komentar Bawaan Blogger Amp

Tambahkan kode b:includable ke dalam widget blog1.Agar Lebih mudah letakkan setelah kode </b:widget-settings> yang terdapat didalam widget blog1. di dalam widget blog1 biasanya terdapat banyak kode.


<b:includable id='commentblock' var='cb'>
 <div class='comment-block' itemprop='comment' itemscope='' itemtype='https://schema.org/Comment'>
 <div class='avatar-image-container'>
 <b:if cond='data:cb.level.authorAvatarSrc != &quot;//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35&quot;'>
 <img class='author-avatar' expr:alt='data:cb.level.author' expr:src='data:cb.level.authorAvatarSrc' expr:title='data:cb.level.author' height='35' width='35' />
 </b:if>
 </div>
 <div class='comment-header'><b:if cond='data:cb.level.author != &quot;Unknown&quot;'><a expr:href='data:cb.level.authorUrl' rel='noopener external nofollow' target='_blank' class='user' itemprop='author' itemscope='' itemtype='https://schema.org/Person'><span itemprop='name'><data:cb.level.author/></span></a><b:else/><span class='user'>Unknown</span></b:if><span class='datetime secondary-text' itemprop='datePublished'><a expr:href='&quot;#c&quot; + data:cb.level.id' itemprop='url'><data:cb.level.timestamp/></a></span></div>
 <div class='comment-content' itemprop='text'>
 <p>
 <b:if cond='data:cb.level.authorUrl != data:post.author.profileUrl'><b:eval expr='data:cb.level.body snippet { links: false }' /><b:else/>
 <data:cb.level.body/>
 </b:if>
 </p>
 </div>
 <b:if cond='data:cb.d'><span expr:class='&quot;item-control &quot; + data:cb.level.adminClass'><a expr:href='data:cb.level.deleteUrl' rel='noopener external nofollow' target='_blank'/></span></b:if>
 </div>
</b:includable><b:includable id='threadedComments-amp' var='post'>
 <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
 <h4><data:messages.postAComment/>:</h4>
 <b:if cond='data:post.numberOfComments &gt; 0'>
 <div class='comments-content'>
 <meta expr:content='data:post.numberOfComments' itemprop='commentCount' />
 <ol id='comment-holder'>
  <b:loop values='data:post.comments where (c =&gt; not c.inReplyTo)' var='commentLevel1'>
  <li class='comment' expr:id='&quot;c&quot; + data:commentLevel1.id'><b:include data='{level: data:commentLevel1,d: false}' name='commentblock' />
  <b:with value='data:post.comments where (c =&gt; c.inReplyTo == data:commentLevel1.id)' var='commentL2'>
  <b:if cond='data:commentL2.size != &quot;0&quot;'>
   <div class='comment-replies'>
   <ul class='thread-chrome thread-expanded'>
   <b:loop values='data:commentL2' var='commentLevel2'>
   <li class='comment-reply' expr:id='&quot;c&quot; + data:commentLevel2.id'><b:include data='{level: data:commentLevel2,d: false}' name='commentblock' /></li>
   </b:loop>
   </ul>
   </div>
  </b:if>
  </b:with>
  </li>
  </b:loop>
 </ol>
 </div>&lt;div class=&#39;comment-form&#39;&gt;<b:else/>
 <meta content='0' itemprop='commentCount' />&lt;div class=&#39;comment-form&#39;&gt;</b:if>
 <div id='threaded-comment-form'>
 <p>Berkomentar sopan dan baik. Ada kata buruk atau berisi tautan url/link aktif, komentar tidak akan disetujui atau disetujui dengan link mati! | Berdiskusi gunakan <b>Disqus</b>!</p>
 <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' />
 </div>&lt;/div&gt;</section>
</b:includable>

Pada kode postingan <b:includable id='post' var='post'> panggil juga komentar amp dengan menggunakan kode b:include berikut:


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

Jika sebelumnya telah memakai komentar blogger, maka ganti lah kode dibawah ini dengan kode komentar amp diatas.


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

Jangan lupa menambahkan kode css berikut agar komentar tertata lebih rapi

*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#comment-holder,.thread-chrome{margin:0;padding:0;position:relative;z-index:1;}
b{font-weight:700;}
cite,i{font-style:italic;}
a,a:link{color:#2962ff;}
a:link,a:visited{text-decoration:none;}
p{margin-top:20px;margin-bottom:20px;}
:focus{outline:0;}
h4{line-height:normal;font-weight:700;margin-bottom:10px;}
h4{font-size:110%;}
li,ul{margin:5em 0;}
ul{list-style:disc;}
a:focus,a:hover,a:link:hover,a:visited:hover{color:#2962ff;}
:target:before{content:””;display:block;height:40px;margin-top:-40px;visibility:hidden;}
#comments h4{margin-top:0;font-size:22px;}
#threaded-comment-form p,.comment-form p{line-height:24px;padding:10px;margin-top:0;border-radius:2px;position:relative;background-color:#eee;color:#444;font-size:16px;margin-bottom:10px;font-weight:500;}
#threaded-comment-form p:before,.comment-form p:before{content:””;width:0;height:0;position:absolute;top:100%;left:30px;border:10px solid transparent;border-top-color:#eee;display:block;}
.comment-replies{padding-left:10px;border-left:1px solid #ccc;margin-top:15px;}
#comments .comment{list-style-type:none;padding:15px 10px;box-shadow:inset 0 -1px 0 0 rgba(100,121,143,.122);margin:0;}
#comments .comment-reply{padding:10px 10px 5px;list-style-type:none;background-color:#fafafa;margin-bottom:0;}
.avatar-image-container{width:35px;height:35px;float:left;background-image:url(“data:image/svg+xml;charset=utf8,%3csvg viewBox=’0 0 24 24′ width=’35’ height=’35’ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3e%3cg%3e%3cpath style=’fill:%234374e0′ d=’M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z’%3e%3c/path%3e%3c/g%3e%3c/svg%3e”);background-repeat:no-repeat;}
.comment-block:hover .item-control{opacity:1;}
.comment-header a.user{font-size:15px;font-style:normal;font-weight:700;color:#202124;}
.reply-to{cursor:pointer;}
.comment-header .datetime a{bottom:0;color:rgba(0,0,0,.54);display:inline-block;font-size:13px;font-style:italic;}
.datetime a{color:rgba(0,0,0,.54);}
.comment-content p{margin:7px 0 10px;font-size:16px;}
#comment-editor{border:0;width:100%;height:250px;}
.comments .continue{display:inline-block;margin-top:10px;}
#addcomment+#threaded-comment-form{margin-top:-55px;}
#addcomment{color:#fff;margin:20px 10px;text-align:center;padding:6px;cursor:pointer;font-weight:700;font-size:17px;border-radius:2px;}
#addcomment{background-color:#31a954;}
#comments .comment:hover{box-shadow:0 1px 3px 1px rgba(60,64,67,.15);}
.comment-reply:hover{box-shadow:0 1px 2px 0 rgba(60,64,67,.3);}
.item-control{background-color:transparent;opacity:0;}
.item-control,.item-control:hover{position:absolute;top:0;right:0;padding:5px;border-radius:17px;}
.comment-block{position:relative;}
.item-control a:before{content:”;border-radius:50%;background-color:rgba(32,33,36,.059);line-height:0;width:24px;height:24px;display:none;}
.item-control a:after,.reply-to:before{content:”;width:24px;height:24px;background-repeat:no-repeat;vertical-align:middle;}
.item-control a:after{opacity:54;background-image:url(“data:image/svg+xml;charset=utf8,%3csvg viewBox=’0 0 24 24′ width=’24’ height=’24’ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3e%3cg%3e%3cpath style=’fill:%23000000′ d=’M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z’%3e%3c/path%3e%3c/g%3e%3c/svg%3e”);background-size:24px 24px;display:block;}
.comment-header{margin-left:45px;line-height:17px;}
.reply-to{color:#5f6368;padding:3px 8px 5px 5px;box-shadow:inset 0 0 0 1px #dadce0;border-radius:4px;}
.comment-actions{margin:10px 0 0;}
.comment-reply:hover .item-control,.item-control:hover a::after{opacity:1;}
.reply-to:before{background-image:url(“data:image/svg+xml;charset=utf8,%3csvg viewBox=’0 0 24 24′ width=’24’ height=’24’ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3e%3cg%3e%3cpath style=’fill:%23757575′ d=’M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z’%3e%3c/path%3e%3c/g%3e%3c/svg%3e”);background-size:20px 20px;display:inline-block;}
.item-control:hover,.reply-to:hover{background-color:rgba(32,33,36,.059);}
.comment-replies .author-avatar{background-color:#fafafa;}
.user{display:block;}

Kemudian coba lihat terdapat kesalahan tidak pada tampilan dan juga validasi AMP. Demikian dari saya, dan juga bantu share ya

Cara Memasang Komentar Bawaan Blogger Amp

Biasanya komentar pada blog AMP memanfaatkan Disqus ataupun Facebook comment. Mulanya versi mobile blog ini pun memanfaatkan komentar Facebook, tetapi kini menggunakan Threaded Comment Blogger yang pastinya telah di custom valid AMP. Untuk tipe dekstop pun ditambahkan fitur komentar Disqus (buat diskusi). Sama kayak di posting sebelumnya komentar blogger ini memakai schema.org dan juga anti backlink untuk SEO.

Baca juga Apa Itu Blog Zombie dan Bagaimana Cara Mencari Blog Zombie

Blogger telah memanfaatkan tag nofollow untuk tiap anchor link yang terlihat pada komemtar seperti yang telah dijelaskan di blog resminya puluh tahun lalu. Namun menurut saya itu tidak cukup, sehingga dengan Anti Backlink link apapun yang tampak pada komentar akan dihapus, sehingga menjadi hanya berbentuk teks saja.

Komentar ini valid AMP, cuman memiliki keterbatasan dalam fiturnya (tidak seperti pada non-AMP ataupun versi dekstop). Yakni tidak dapat untuk menanggapi komentar, bisa jadi sebetulnya bisa diakali dengan amp-bind, yaa… lantaran cukup rumit malas otak-atik. Untuk kotak form memakai amp-iframe, meskipun masih terdapat kesalahan ketika memuatnya, lihat di log consol. namun tidak berpengarus validasi amp, dan juga tetap dapat digunakan.

* Penting apabila mau memakai komentar ini – kode komentar blogger seo ini memakai “post.numberOfComments“. Dan Juga kode tersebut hanya support “Gadget Versi 2” dan juga “layout Versi 3“. Intinya sarat menggunakannya, template wajib sudah versi terbaru. bila tidak, nanti justru akan error. Namun ada kok

Cara menanganinya ganti kode “data:post.numberOfComments” menjadi “data:post.comments.length“. agar dapat digunakan untuk template lama. silahkan lanjutkan sendiri.

Cara Memasang Komentar Bawaan Blogger Amp

Tambahkan kode b:includable ke dalam widget blog1.Agar Lebih mudah letakkan setelah kode </b:widget-settings> yang terdapat didalam widget blog1. di dalam widget blog1 biasanya terdapat banyak kode.


<b:includable id='commentblock' var='cb'>
 <div class='comment-block' itemprop='comment' itemscope='' itemtype='https://schema.org/Comment'>
 <div class='avatar-image-container'>
 <b:if cond='data:cb.level.authorAvatarSrc != &quot;//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35&quot;'>
 <img class='author-avatar' expr:alt='data:cb.level.author' expr:src='data:cb.level.authorAvatarSrc' expr:title='data:cb.level.author' height='35' width='35' />
 </b:if>
 </div>
 <div class='comment-header'><b:if cond='data:cb.level.author != &quot;Unknown&quot;'><a expr:href='data:cb.level.authorUrl' rel='noopener external nofollow' target='_blank' class='user' itemprop='author' itemscope='' itemtype='https://schema.org/Person'><span itemprop='name'><data:cb.level.author/></span></a><b:else/><span class='user'>Unknown</span></b:if><span class='datetime secondary-text' itemprop='datePublished'><a expr:href='&quot;#c&quot; + data:cb.level.id' itemprop='url'><data:cb.level.timestamp/></a></span></div>
 <div class='comment-content' itemprop='text'>
 <p>
 <b:if cond='data:cb.level.authorUrl != data:post.author.profileUrl'><b:eval expr='data:cb.level.body snippet { links: false }' /><b:else/>
 <data:cb.level.body/>
 </b:if>
 </p>
 </div>
 <b:if cond='data:cb.d'><span expr:class='&quot;item-control &quot; + data:cb.level.adminClass'><a expr:href='data:cb.level.deleteUrl' rel='noopener external nofollow' target='_blank'/></span></b:if>
 </div>
</b:includable><b:includable id='threadedComments-amp' var='post'>
 <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
 <h4><data:messages.postAComment/>:</h4>
 <b:if cond='data:post.numberOfComments &gt; 0'>
 <div class='comments-content'>
 <meta expr:content='data:post.numberOfComments' itemprop='commentCount' />
 <ol id='comment-holder'>
  <b:loop values='data:post.comments where (c =&gt; not c.inReplyTo)' var='commentLevel1'>
  <li class='comment' expr:id='&quot;c&quot; + data:commentLevel1.id'><b:include data='{level: data:commentLevel1,d: false}' name='commentblock' />
  <b:with value='data:post.comments where (c =&gt; c.inReplyTo == data:commentLevel1.id)' var='commentL2'>
  <b:if cond='data:commentL2.size != &quot;0&quot;'>
   <div class='comment-replies'>
   <ul class='thread-chrome thread-expanded'>
   <b:loop values='data:commentL2' var='commentLevel2'>
   <li class='comment-reply' expr:id='&quot;c&quot; + data:commentLevel2.id'><b:include data='{level: data:commentLevel2,d: false}' name='commentblock' /></li>
   </b:loop>
   </ul>
   </div>
  </b:if>
  </b:with>
  </li>
  </b:loop>
 </ol>
 </div>&lt;div class=&#39;comment-form&#39;&gt;<b:else/>
 <meta content='0' itemprop='commentCount' />&lt;div class=&#39;comment-form&#39;&gt;</b:if>
 <div id='threaded-comment-form'>
 <p>Berkomentar sopan dan baik. Ada kata buruk atau berisi tautan url/link aktif, komentar tidak akan disetujui atau disetujui dengan link mati! | Berdiskusi gunakan <b>Disqus</b>!</p>
 <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' />
 </div>&lt;/div&gt;</section>
</b:includable>

Pada kode postingan <b:includable id='post' var='post'> panggil juga komentar amp dengan menggunakan kode b:include berikut:


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

Jika sebelumnya telah memakai komentar blogger, maka ganti lah kode dibawah ini dengan kode komentar amp diatas.


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

Jangan lupa menambahkan kode css berikut agar komentar tertata lebih rapi

*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#comment-holder,.thread-chrome{margin:0;padding:0;position:relative;z-index:1;}
b{font-weight:700;}
cite,i{font-style:italic;}
a,a:link{color:#2962ff;}
a:link,a:visited{text-decoration:none;}
p{margin-top:20px;margin-bottom:20px;}
:focus{outline:0;}
h4{line-height:normal;font-weight:700;margin-bottom:10px;}
h4{font-size:110%;}
li,ul{margin:5em 0;}
ul{list-style:disc;}
a:focus,a:hover,a:link:hover,a:visited:hover{color:#2962ff;}
:target:before{content:””;display:block;height:40px;margin-top:-40px;visibility:hidden;}
#comments h4{margin-top:0;font-size:22px;}
#threaded-comment-form p,.comment-form p{line-height:24px;padding:10px;margin-top:0;border-radius:2px;position:relative;background-color:#eee;color:#444;font-size:16px;margin-bottom:10px;font-weight:500;}
#threaded-comment-form p:before,.comment-form p:before{content:””;width:0;height:0;position:absolute;top:100%;left:30px;border:10px solid transparent;border-top-color:#eee;display:block;}
.comment-replies{padding-left:10px;border-left:1px solid #ccc;margin-top:15px;}
#comments .comment{list-style-type:none;padding:15px 10px;box-shadow:inset 0 -1px 0 0 rgba(100,121,143,.122);margin:0;}
#comments .comment-reply{padding:10px 10px 5px;list-style-type:none;background-color:#fafafa;margin-bottom:0;}
.avatar-image-container{width:35px;height:35px;float:left;background-image:url(“data:image/svg+xml;charset=utf8,%3csvg viewBox=’0 0 24 24′ width=’35’ height=’35’ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3e%3cg%3e%3cpath style=’fill:%234374e0′ d=’M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z’%3e%3c/path%3e%3c/g%3e%3c/svg%3e”);background-repeat:no-repeat;}
.comment-block:hover .item-control{opacity:1;}
.comment-header a.user{font-size:15px;font-style:normal;font-weight:700;color:#202124;}
.reply-to{cursor:pointer;}
.comment-header .datetime a{bottom:0;color:rgba(0,0,0,.54);display:inline-block;font-size:13px;font-style:italic;}
.datetime a{color:rgba(0,0,0,.54);}
.comment-content p{margin:7px 0 10px;font-size:16px;}
#comment-editor{border:0;width:100%;height:250px;}
.comments .continue{display:inline-block;margin-top:10px;}
#addcomment+#threaded-comment-form{margin-top:-55px;}
#addcomment{color:#fff;margin:20px 10px;text-align:center;padding:6px;cursor:pointer;font-weight:700;font-size:17px;border-radius:2px;}
#addcomment{background-color:#31a954;}
#comments .comment:hover{box-shadow:0 1px 3px 1px rgba(60,64,67,.15);}
.comment-reply:hover{box-shadow:0 1px 2px 0 rgba(60,64,67,.3);}
.item-control{background-color:transparent;opacity:0;}
.item-control,.item-control:hover{position:absolute;top:0;right:0;padding:5px;border-radius:17px;}
.comment-block{position:relative;}
.item-control a:before{content:”;border-radius:50%;background-color:rgba(32,33,36,.059);line-height:0;width:24px;height:24px;display:none;}
.item-control a:after,.reply-to:before{content:”;width:24px;height:24px;background-repeat:no-repeat;vertical-align:middle;}
.item-control a:after{opacity:54;background-image:url(“data:image/svg+xml;charset=utf8,%3csvg viewBox=’0 0 24 24′ width=’24’ height=’24’ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3e%3cg%3e%3cpath style=’fill:%23000000′ d=’M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z’%3e%3c/path%3e%3c/g%3e%3c/svg%3e”);background-size:24px 24px;display:block;}
.comment-header{margin-left:45px;line-height:17px;}
.reply-to{color:#5f6368;padding:3px 8px 5px 5px;box-shadow:inset 0 0 0 1px #dadce0;border-radius:4px;}
.comment-actions{margin:10px 0 0;}
.comment-reply:hover .item-control,.item-control:hover a::after{opacity:1;}
.reply-to:before{background-image:url(“data:image/svg+xml;charset=utf8,%3csvg viewBox=’0 0 24 24′ width=’24’ height=’24’ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3e%3cg%3e%3cpath style=’fill:%23757575′ d=’M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z’%3e%3c/path%3e%3c/g%3e%3c/svg%3e”);background-size:20px 20px;display:inline-block;}
.item-control:hover,.reply-to:hover{background-color:rgba(32,33,36,.059);}
.comment-replies .author-avatar{background-color:#fafafa;}
.user{display:block;}

Kemudian coba lihat terdapat kesalahan tidak pada tampilan dan juga validasi AMP. Demikian dari saya, dan juga bantu share ya