Modif Kotak Komentar agar Reply sesuai keinginan

Karena Artikel saya tentang "Cara Membuat Reply Plus Gaya Blogbego" masih meninggalkan masalah untuk kawan yang templatenya berisi <data:comment.body/> hanya 2 [dua] yang menyebabkan Reply tidak berfungsi sesuai keinginan atau dengan kata lain setiap komentar [baik komentar pengunjung Blog maupun komentar jawaban sebagai Admin] kata Reply itu selalu muncul :z

Pada saat ini saya sampaikan pada kawan hanyalah gambaran sebagai pedoman kawan memodifikasi kode kotak komentar mana saja yang perlu kawan rubah, ini perlu kita sepakati dulu karena sebagai contoh saya pakai kotak komentar Blog saya ini [ini menyangkut model dan selera kita] :#

Langsung saja ke cara Modifikasinya : 

• Masuk ke Account Blogger dengan ID kawan
• Pada Designer / Perancang Template pilih Edit HTML
• Beri tanda centang pada Radio disamping Expand Template Widget
• Untuk jaga-jaga download / simpan dulu template kawan
• Cari  #comments h4 [letaknya setelah /* Posts atau sebelum /* Sidebar Content] 

Contohnya : 

#comments h4 {
color:#000;
font-weight:bold;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
text-transform:none;
}
#comments-block {
line-height:1.6em;
margin:1em 0 1.5em;
}
#comments-block .comment-author {
Background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2yx54gBXVrXykRd-HSqzaUb0X8Aq-YdjGem6w1jlz0e7lS2-oU8y3A3dx0JOJqAQHeOQhAhxpLDvq89yvL24WKp85D4juMCAQY9TWvptOBt0JA1-FZYkGYv57SnNk5JcxIU989aPScQ/s1600/x.jpg);
border:1px solid #00f;
font-size:15px;
font-weight:normal;
margin-right:20px;
padding:5px;
}
#comments .blogger-comment-icon, .blogger-comment-icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#95B4BB none repeat scroll 0 0;
border-color:#95B4BB;
border-style:solid;
border-width:2px 1px 1px;
line-height:16px;
padding:5px;
}
#comments-block .comment-body {
background:#FFF;
color:#000;
border-left:1px solid #00f;
border-right:1px solid #00f;
margin-left:0;
margin-right:20px;
padding:7px;
}
#comments-block .comment-footer {
background:#95B4BB;
border-bottom:1px solid #00f;
border-left:1px solid #00f;
border-right:1px solid #00f;
font-size:11px;
line-height:1.4em;
margin:-0.25em 20px 2em 0;
padding:5px;
text-transform:none;
}
#comments-block .comment-body p {
margin:0 0 0.75em;
}
.deleted-comment {
color:gray;
font-style:italic;
}

 Selanjutnya Hapus kode tersebut dan ganti dengan kode berikut :

#comments{clear:both;float:left;width:545px;margin:0;padding:0}
#comments h4{color:#272D36;margin:0;padding:7px 10px;font-size:150%;font-weight:normal;line-height:1.3em;border-bottom:1px solid #c6c2c1;background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioMEZYU_QxYOZL6VKUGrM_sNlTQw2FyOGx7rFpCxwL-xsMdQo5uf4QyzCb1WMzvFV0K_6s72C7-X00wRWbIYGbCU0538GoZ8kpGY-5rWuzYiHiz9ZHhIOXoT5_Y84953N8obpN5FFsVYU/s1600/xxx.jpg) repeat-x left bottom;}
#comments p.notice{text-align:center;font-weight:700;margin:0 0 10px;padding:0}
.commentlist,.commentlist-destacado{clear:both;list-style:none;margin:0 0 10px;padding:0}
.commentlist li,commentlist-destacado li{clear:both;color:#00F;font-size:14px;margin:10px 0 0;padding:0;}
#comments .commentlist li.pingback div.comment-body,#comments .commentlist li.trackback div.comment-body{border:none}
#comments .commentlist li div.comment-author .avatar{float:left;width:40px;height:40px;border:5px solid #E0E4CC;margin:0 10px 0 0;padding:0}
cite.fn{font-size:17px;color:#6b6b6b;font-style: normal;font-weight:700;font-style:bold}
.says{margin-left:3px;display:none}
.comment-meta{margin-bottom:10px;font-size:12px;color:#F60;}
.comment-meta a{text-decoration:none;color:#F60;}
#comments .commentlist li p,#comments .commentlist-destacado li p{margin:0 0 10px;padding:0}
.comment p{display:block}
.comment-author{margin-top:0;margin-left:5px}
.avatar-image-container{float:left;width:40px;height:40px;border:0px solid #ccc;margin-right:10px;padding:1px}
.avatar-image-container img{width:40px;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRTHeAxXGazFkSBeurlETZnMTeigK36AzCd9WL0EmMEffWpsZUiLLCEwIcfIBJ1QOC3BFTbGKpQpZ7d6nDq0yXbij8Xbt5kZwgBqte9Pmc23UfY6mMRtklu-xgVikwDzwXqmitCxCFy5U/s1600/no-avatar.png)}
.comment-form{width:480px!important;max-width:480px!important}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right;margin-right:20px}
#home-link a:hover img,#blog-pager-newer-link a:hover img,#blog-pager-older-link a:hover img{border:none;opacity:0.7;filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity:0.7}
#blog-pager{text-align:center;width:540px;clear:both;height:30px;padding:5px 0}
.feed-links{display:none;clear:both;line-height:2.5em}
#comments .commentlist li div.comment-body,#comments .commentlist-destacado li div.comment-body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2yx54gBXVrXykRd-HSqzaUb0X8Aq-YdjGem6w1jlz0e7lS2-oU8y3A3dx0JOJqAQHeOQhAhxpLDvq89yvL24WKp85D4juMCAQY9TWvptOBt0JA1-FZYkGYv57SnNk5JcxIU989aPScQ/s1600/x.jpg) repeat-x left bottom;border:1px solid #FFF;-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;padding:10px}

.feed-links {
clear: both;
line-height: 2.5em;
}

Text yang berwarna merah adalah lebar kotak komentar, silahkan kawan mengganti atau merubahnya sesuai dengan lebar template atau keinginan kawan, sedangkan text yang berwarna merah kedua [dibawahnya] adalah untuk News page - Home - Old page.

• Selanjutnya cari kode seperti ini : <b:includable id='comments' var='post'>  beri tanda [ Perhatikan gambar disamping]

• Terus scroll kebawah dan cari kode seperti ini : <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' ><data:postCommentMsg/></a> dan beri tanda juga untuk gampangnya kawan mencari batas atas dan bawah [Perhatikan gambar disamping]

Selengkapnya sebagai berikut :

<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 == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>
      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <b:if cond='data:comment.favicon'>
              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:blog.enabledCommentProfileImages'>
              <data:comment.authorAvatarImage/>
            </b:if>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd 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>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <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>
      </p>
    </b:if>

Hapus semua kode tersebut sampai </b:if> dan ganti dengan kode berikut :

<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 == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>
        </b:if>
      </h4>
      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

          <b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<ol class='commentlist-destacado'>
<li class='comment' id='comment'>
<div class='comment-body' id='div-comment'>
<div class='comment-author vcard'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
     <cite class='fn'>              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if></cite>
              <span class='says'><data:commentPostedByMsg/>:</span>
</div>

<div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/></div>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                  <span class='interaction-iframe-guide'/>
                </p>
              </b:if>
</div>
</li>
</ol>

<b:else/>

<ol class='commentlist'>
<li class='comment' id='comment'>
<div class='comment-body' id='div-comment'>
<div class='comment-author vcard'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
     <cite class='fn'>        <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if></cite>
              <span class='says'><data:commentPostedByMsg/>:</span>
</div>
<div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/></div>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/></p>
                  <span class='interaction-iframe-guide'/>
                <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=9112002380537270735&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=450,height=450&quot;); return false;'><div style='overflow:hidden;width:460px;height:auto;padding:5px;background:#FF0; border:1px solid #369;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQFTGEEar_3ZBDlzN4ntfpe1zJJWnq7FpSgfj8j8JPAbkEICvVH69F6XjI4X7GzF6Exi7aMjtzXeTJSVkryTM7WQZ1KsPqcgdD1BBkrmvyPiWPe-1g7wroWJa5IDLgunYPSyz257SfykVe/s1600/Reply-.gif'/> Terima kasih, Komentar Kawan akan saya Balas Komentar...! Mudah-mudahan kawan berkenan berkunjung kembali, ditunggu...!</div></a>  
              </b:if>

</div>
</li>
</ol>
</b:if>
</b:loop>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <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>
      </p>
    </b:if>

Text yang berwarna merah adalah kode Reply, kawan cukup mengganti text yang saya beri warna biru saja blogID=9112002380537270735  dengan ID kawan, sedangkan Text dibawahnya yang berwarna biru juga  adalah ukuran lebar dan kode image Reply dan tulisan, silahkan kawan mengganti seperlunya :z

Kalau semuanya sudah pas dan jangan lupa hapus juga tanda yang dibuat tadi baru simpan template kawan.

Ini semua tidaklah mutlak harus begini atau begitu, dan apa yang saya sampaikan ini hanyalah contoh sebagai gambaran saja, disamping keterbatasan dan kekurangan-kekurangan saya sangatlah banyak untuk itu dengan senang hati saya menerima saran pendapat dari kawan seandainya kawan mempunyai solusi lain yang lebih praktis untuk menambah wawasan saya sebelumnya saya ucapkan banyak terima kasih :O