Ditulis oleh: Ditulis pada: 1/20/2015
Postingan kali ini saya tulis karena banyak pengguna template Kompi Ajaib yang beberapa waktu yang lalu saya bagikan kesulitan untuk mengganti sistem komentar dari komentar Google Plus menjadi komentar Blogger.
Sebenarnya saya sudah memberikan solusi untuk memunculkan komentar Blogger pada link ini, namun saya sedikit memberikan tantangan pada pengguna untuk melengkapi secara manual kode-kode html komentar Blogger agar mau lebih mengenal kode-kodenya hehehehe....
Nah kali ini saya akan memberikan 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 kode 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 kode komentar Google Plus di bawah ini
<b:if cond='data:blog.pageType == "item"'>
<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 menu 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 saya bagikan pada link di bawah ini.
Silahkan simak: Modifikasi Threaded Comments Hack Ala Kompi Ajaib
Atau jika Anda ingin menggunakan tampilan threaded comments lainnya, silahkan ganti CSS style threaded comments-nya.
Jika Anda mengimplementasikan trik ini dengan benar, maka akan seperti blog dummy ini yang menggunakan template Kompi Ajaib dengan sistem komentar Blogger. Silahkan lihat DI SINI.