panduan belajar blog: Bagaimana Cara Buat Thread Komentar Pada Blog ?

Bagaimana cara membuat 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 tentang 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 membuat suasana dalam postingan blog tersebut menjadi lebih hidup.

Akan tetapi, ada sedikit kendala yang harus dihadapi bagi pengguna blogspot. Fakta yang perlu kita ketahui adalah blogspot memiliki kelemahan dibandingkan wordpress dalam hal fitur komentar. Fitur komentar blogspot terkesan lebih sederhana, sementara fitur komentar wordpress lebih friendly. Hal inilah yang kemudian menjadikan alasan mengapa setiap blog wordpress sering sekali mendapatkan banyak komentar di setiap postingannya.

Blog di wordpress lebih friendly karena adanya fitur reply untuk setiap komentarnya, sedangkan blogspot tidak. Selain itu, setiap komentator juga dapat melakukan balasan untuk komentar tertentu dan komentar balasan tersebut akan langsung muncul pada bagian bawah komentar yang di balas tersebut, bukan pada bagian paling bawah semua komentar.

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

Cara untuk membuat 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 kode berikut.

]]></b:skin>

Masukan kode berikut tepat 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 kode berikut.

</body>

Masukan kode berikut tepat sebelumnya.

Cari kode berikut.

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

terdapat banyak sekali kode

</b:includable>

Hapus kode berwarna merah yang terletak antara <b:includable id='comments' var='post'> dengan </b:includable>, kemudian ganti dengan kode 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 kode HTML template yang kita inginkan.
Unduh dan simpan template blog kita terlebih dahulu untuk mengantisipasi terjadinya kegagalan saat proses editing berlangsung.
Ganti angka 154513103004606848 pada blogID sesuai dengan nomor ID blog kita.

Cara mengetahui nomor blog ID kita adalah sebagai berikut.
Masuk pada profil blog kita dan lihat nomor blog IDnya yang tampil pada address bar seperti 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 akrab serta kegiatan blogging akan terasa lebih hidup. Cakupan materi juga akan semakin meluas dan lengkap dengan adanya beberapa tambahan yang disampaikan dalam komentar tersebut.

panduan belajar blog

Friday, November 18, 2011

Bagaimana Cara Buat Thread Komentar Pada Blog ?

No comments:

Post a Comment