Tips dan Trik Blogger: Cara Membuat Reply Comment Pada Blog

Assalamualaikum sobat blogger dimanapun anda berada. Kembali lagi saya hadir membawakan tips dan trik seputar blogger. Kali ini saya akan membahas tentang Cara Membuat Reply Comment Pada Blog sobat. Tutorial ini saya kutip dari blognya Mas Doody , kebetulan lagi blogwalking, eh ketemu deh tutorial ini.

Mungkin sobat blogger sekalian sudah sering melihat blog-blog yang kotak komentarnya dilengkapi dengan tombol reply comment. Nah hal inilah yang akan kita bahas pada hari ini. Untuk lebih jelasnya, silahkan lihat contoh kotak komentar dengan fasilitas tombol reply dibawah ini:

Nah, penasaran gimana caranya? Tenang saja, saya akan memberikan tipsnya gratis untuk pengunjung setia blog ini. Tanpa panjang lebar lagi, silahkan sobat ikuti langkah-langkah dibawah ini:

Login ke akun blogger sobat.
Pilih menu Template, jangan lupa untuk membackup template sobat.
Klik Edit HTML
Centang Expand Widget Tempalate
Copy kode dibawah ini tepat diatas kode ]]></b:skin>

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

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

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

.cm_avatar {margin: 0;vertical-align: middle;outline: 1px solid #fff;border: 1px solid #ddd;padding: 3px;background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);background-position:center;background-repeat:no-repeat;width: 35px;height: 35px}

.cm_avatar_a {margin: 0;vertical-align: middle;border: 1px solid #ddd;padding: 3px;

background:#c6e5f7;background-position:center;background-repeat:no-repeat;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: #FCFCFC;outline: 1px solid #fff;border: 1px solid #ddd;overflow: hidden}

.cm_entry_a {padding: 16px;background: #FCFCFC;outline: 1px solid #fff;border: 1px solid #ddd;overflow: hidden}

.cm_arrow {display: block;width: 9px;height: 18px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhAntILSd_6bDcsR8XXWC9hxPMuis1L8nZ9-ZJdd06WtPC8EiCnaRwpl5mccUeraZWnAbi3G0VzbBgPpPSkQJ_bJwvYVbQbFqe6zLYs78hyphenhyphenaf3mjV4_VYenGbg7kffc-2bw6Abhzoy6g/s1600/comment-arrow.gif) no-repeat;position: absolute;margin-left: -25px}

.cm_info {margin-bottom: 5px;border: thin solid #E6E6E6;background-color: #F4F4F4;padding: 5px}

.cm_info_a {margin-bottom: 5px;border: thin solid #E6E6E6;background-color: #dff0fa;

padding: 5px}

.cm_name {font-size: 13px;color: #666666 !important;text-decoration:none;font-weight: bold;float: left}

.cm_name_a {font-size: 13px;color: #666666 !important;text-decoration:none;font-weight: 250;float: left}

.cm_date {font-size: 10px;color: #999;text-decoration:none;float: right}

.cm_date_a {font-size: 10px;color: #2D5E7B;text-decoration:none;float: right;

padding-top:5px}

.cm_entry p {padding: 5px;line-height:1.4em;clear: both;border: thin solid #E6E6E6;background-color: #F4F4F4;font-size: 13px;color: #333;word-wrap:break-word}

.cm_entry_a p {padding: 5px;clear: both;border: thin solid #E6E6E6;background-color: #dff0fa;font-size: 13px;color: #333;word-wrap:break-word}

.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} .owner-Body p{margin-bottom: 5px;border: thin solid #E6E6E6;background:#EFF5FB;padding: 5px}

Setelah itu cari kode berikut ini:

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

Hapus kode diatas, kemudian ganti dengan kode berikut ini:

<b:includable id='comments' var='post'> <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 class='cm_pagenavi' id='cm_page'/>

<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=90113338580645433&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'/>

<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>

<b:if cond='data:comment.author == data:post.author'>

<div class='owner-Body'>

<p><data:comment.body/></p>

</div>

<b:else/>

<div class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</div>

</b:if>

</div>

</div>

</div>

</b:if>

</b:loop>

</div>

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

<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>

</b:includable>

Kemudian jangan lupa untuk mengganti kode yang berwarna biru diatas dengan ID blogger sobat. Cara mengetahuinya lihat saja di address bar browser sobat saat di dashboard blogger.
Terakhir simpan template.

Nah, demikianlah tips dan trik blogger Cara Membuat Reply Comment Pada Blog. Semoga bisa bermanfaat bagi sobat sekalian. Terima kasih telah berkunjung. Mungkin sobat tertarik untuk membaca postingan saya sebelumnya: