Bagaimana Cara Buat Thread Komentar Pada Blog ?

villaralcaldeblog | 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 perihal 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 ialah 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 mengakibatkan alasan mengapa setiap blog wordpress sering sekali menerima banyak komentar di setiap postingannya.

Blog di wordpress lebih friendly sebab adanya fitur reply untuk setiap komentarnya , sedangkan blogspot tidak. Selain itu , setiap komentator juga dapat melaksanakan balasan untuk komentar tertentu dan komentar balasan tersebut akan eksklusif 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 semoga lebih friendly dengan tampilan kemudahan reply ini? Cara yang dilakukan untuk menyiasatinya ialah 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 arahan berikut.

]]></b:skin>

Masukan arahan 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 arahan berikut.

</body>

Masukan arahan berikut sempurna sebelumnya.

Cari arahan berikut.

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

terdapat berbagai kode

</b:includable>

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

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

Bagaimana Cara Buat Thread Komentar Pada Blog ?

Related Articles :

0 komentar:

Posting Komentar

Entri Populer