Memunculkan Komentar Blogger Pada Komentar Kompi Ajaib

Postingan kali ini aku tulis sebab banyak pengguna template Kompi Ajaib yang beberapa waktu yang kemudian aku bagikan kesulitan untuk mengganti sistem komentar dari komentar Google Plus menjadi komentar Blogger.

Sebenarnya aku sudah menunjukkan solusi untuk memunculkan komentar Blogger pada link ini, namun aku sedikit menunjukkan tantangan pada pengguna untuk melengkapi secara manual kode-kode html komentar Blogger semoga mau lebih mengenal kode-kodenya hehehehe....

Nah kali ini aku akan menunjukkan cara memunculkan komentar Blogger pada template Kompi Ajaib dengan mudah. Silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama

Silahkan hapus kode-kode berikut:

             <b:includable id='comment-form' var='post'/>
             <b:includable id='commentDeleteIcon' var='comment'/>
             <b:includable id='comment_count_picker' var='post'/>
             <b:includable id='comment_picker' var='post'/>
             <b:includable id='comments' var='post'/>
             <b:includable id='iframe_comments' var='post'/>
             <b:includable id='threaded-comment-form' var='post'/>
             <b:includable id='threaded_comment_js' var='post'/>
             <b:includable id='threaded_comments' var='post'/>

Langkah Kedua

Silahkan hapus kode display:none;visibility:hidden pada isyarat CSS berikut:

 #comments{background:#fff;clear:both;margin:0 auto;line-height:1em;padding:20px 30px 2px 60px;display:none;visibility:hidden}

Langkah Ketiga

Silahkan hapus isyarat komentar Google Plus di bawah ini

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='komentar'>
       <p><data:blogCommentMessage/>
         <a class='small-button1' href='http://idblogschool.com/' rel='nofollow' target='_blank' title='Silahkan Mention Profil @kompiajaib.com'>Out Of Topic</a></p>
       <div id='g_comments'>
 <div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='620' expr:data-href='data:blog.canonicalUrl'>
 </div></div>
 <script type='text/javascript'>
 //<![CDATA[
 document.getElementsByClassName('g-comments')[0].setAttribute('data-width', document.getElementById('g_comments').clientWidth);
 //]]>
 </script>
 </div>
 </b:if>

 .komentar{background:#fff;clear:both;margin:-30px auto 0;line-height:1em;padding:10px 30px 20px 60px}
 .komentar p{background:#edebeb;border:1px solid #c5c5c5;color:#333;font-size:14px;font-family:'Open Sans',sans-serif;line-height:1.2em;margin:20px 0;padding:7px 10px 45px;position:relative;text-align:left}
 .komentar p:before{content:"";width:0;height:0;position:absolute;bottom:-22px;left:14px;border:11px solid transparent;border-color:#c5c5c5 transparent transparent}
 .komentar p:after{content:"";width:0;height:0;position:absolute;bottom:-20px;left:15px;border:10px solid transparent;border-color:#edebeb transparent transparent}
 #g_comments{width: 100%}
 a.small-button1{color:#fff;font-weight:400;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:inline-block;background-color:#333;padding:3px 8px;position:absolute;left:10px;bottom:10px}
 a.small-button1:hover{background-color:#555}

Kemudian silahkan save templatenya dan klik tab template pada sajian di sebelah kiri kemudian klik lagi tombol edit HTML.

Nah dengan begitu, kode-kode html komentar Blogger yang tadi dihapus akan muncul kembali secara otomatis. Dan silahkan lihat di salah satu postingan Anda untuk memastikan komentar Blogger sudah muncul.

Kemudian silahkan ikuti ikuti trik modifikasi threaded comments yang pernah aku bagikan pada link di bawah ini.

Silahkan simak: Modifikasi Threaded Comments Hack Ala Kompi Ajaib

Atau jikalau Anda ingin memakai tampilan threaded comments lainnya, silahkan ganti CSS style threaded comments-nya.

Jika Anda mengimplementasikan trik ini dengan benar, maka akan menyerupai blog dummy ini yang memakai template Kompi Ajaib dengan sistem komentar Blogger. Silahkan lihat DI SINI.

Sumber https://www.kompiajaib.com/

Share this post