Cara Membuat Reply Comment Pada Blog

Bookmark and Share
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(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/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 &gt; 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='&quot;https://www.blogger.com/comment.g?blogID=90113338580645433&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); 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:

{ 2 comments... Views All / Send Comment! }

Marudin Sinaga said...

:37

Anonymous said...

ngawur nih tutorial gini nih kalo asal copas

:10 :11 :12 :13 :14 :15 :16 :17
:18 :19 :20 :21 :22 :23 :24 :25
:26 :27 :28 :29 :30 :31 :32 :33
:34 :35 :36 :37 :38 :39

Post a Comment

Terima kasih telah berkunjung. Jika ada yang mau disampaikan silahkan tuliskan komentar sobat dibawah ini. Komentar sobat sangat berarti bagi blog ini. Tapi tolong jangan SPAM. Karena saya sangat membenci SPAM.
Best Regards
Tips dan trik Blogger