Bagaimana Cara Buat Thread Komentar Pada Blog ?

Bagaimana cara menciptakan thread komentar pada blog? Mungkin itulah salah satu pertanyaan yang sering diajukan oleh blogger pengguna blogspot dalam rangka mengoptimalisasi kinerja blognya.

Optimalisasi dalam komentar itu perlu. Coba saja baca kembali artikel wacana 5 alasan menjawab setiap komentar di blog, tips dalam berkomentar di blog, serta 7 tips meningkatkan jumlah komentar di blog. Dengan adanya komentar, maka interaksi antara kita sebagai pemilik blog dengan pembaca akan semakin dekat. Sehingga, hal ini akan menciptakan suasana dalam postingan blog tersebut menjadi lebih hidup.

Akan tetapi, ada sedikit hambatan yang harus dihadapi bagi pengguna blogspot. Fakta yang perlu kita ketahui yaitu blogspot mempunyai kelemahan dibandingkan wordpress dalam hal fitur komentar. Fitur komentar blogspot terkesan lebih sederhana, sementara fitur komentar wordpress lebih friendly. Hal inilah yang lalu mengakibatkan alasan mengapa setiap blog wordpress sering sekali mendapat banyak komentar di setiap postingannya.

Blog di wordpress lebih friendly alasannya yaitu adanya fitur reply untuk setiap komentarnya, sedangkan blogspot tidak. Selain itu, setiap komentator juga sanggup melaksanakan akhir untuk komentar tertentu dan komentar akhir tersebut akan pribadi muncul pada cuilan bawah komentar yang di balas tersebut, bukan pada cuilan paling bawah semua komentar.

Untuk itu, bagaimana cara yang harus kita lakukan untuk menciptakan tampilan komentar pada blogspot supaya lebih friendly dengan tampilan kemudahan reply ini? Cara yang dilakukan untuk menyiasatinya yaitu dengan menciptakan thread komentar pada setiap komentar-komentar yang muncul di bawah isi postingan blog kita.

Cara untuk menciptakan thread komentar pada blogspot akan dijelaskan pada uraian langkah-langkah di bawah ini.

Pertama, masuk ke dalam akun blogger kita.

Klik rancangan.

Klik edit HTML.

Klik expand template widget.

Cari instruksi berikut.

]]></b:skin>

Masukan instruksi berikut sempurna sebelumnya.

#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width: 70px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: white;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
}

.cm_name {
font-weight: bold;
font-size: 12px;
float: left;
}

.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}

.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

Cari instruksi berikut.

</body>

Masukan instruksi berikut sempurna sebelumnya.

Cari instruksi berikut.

<b:includable id='comments' var='post'>

terdapat berbagai kode

</b:includable>

Hapus instruksi berwarna merah yang terletak antara <b:includable id='comments' var='post'> dengan </b:includable>, lalu ganti dengan instruksi berikut ini.

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'></div>

<div class='cm_pagenavi' id='cm_page'></div>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=154513103004606848&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>

<div class='cm_entry'>
<span class='cm_arrow'></span>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>

<div class='cm_pagenavi' id='cm_page_copy'></div>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</b:if>
</div>

Klik simpan dan selesai.

Keterangan:

Gunakan tombol Ctrl+F untuk mempermudah pencarian instruksi HTML template yang kita inginkan.
Unduh dan simpan template blog kita terlebih dahulu untuk mengantisipasi terjadinya kegagalan ketika proses editing berlangsung.
Ganti angka 154513103004606848 pada blogID sesuai dengan nomor ID blog kita.

Cara mengetahui nomor blog ID kita yaitu sebagai berikut.
Masuk pada profil blog kita dan lihat nomor blog IDnya yang tampil pada address kafe menyerupai tampilan gambar di bawah ini.

Menggunakan tampilan komentar thread ini sangat bermanfaat bagi blog kita. Selain tampilannya yang attraktif dan terkesan profesional, penggunaan thread komentar ini akan semakin memudahkan pembaca dalam berinteraksi dengan kita sebagai pemilik blog dan pembaca lainnya dalam menanggapi isi postingan yang sedang di bahas.

Akibatnya, suasana menjadi lebih dekat dan terasa bersahabat serta acara blogging akan terasa lebih hidup. Cakupan bahan juga akan semakin meluas dan lengkap dengan adanya beberapa aksesori yang disampaikan dalam komentar tersebut.

Hide comments

Bagaimana Cara Buat Thread Komentar Pada Blog ?

0 Response to "Bagaimana Cara Buat Thread Komentar Pada Blog ?"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel