Modif Kotak Komentar supaya Admin bisa Reply

Kawan masih ingat artikel saya tentang Cara Membuat Reply Plus Gaya Blog Bego dan Modif Kotak Komentar agar Reply sesuai Keinginan, :DSekarang Kotak Komentar Blogspot secara otomatis disisipkan Thread Comments pada Template Blog. :O

Sebagai Blogger Pemula tidak ada salahnya mencoba Memodifikasi lagi Kotak Komentar yang ada agar mirip seperti Thread Comments, cuma bedanya tidak bisa balas membalas berkelanjutan [Perhatikan Gambar diatas] untuk Demonya silahkan lihat Komentar Blog ini :r

Cara Modifikasinya kawan cukup menambahkan beberapa script pada Css Komentar Blog [Kalau kawan menerapkan Artikel saya tentang Modif Kotak Komentar agar Reply sesuai Keinginan] kawan cukup mengganti Script Kode Css Commentnya saja :

• Masuk ke Account Blogger dengan ID kawan 
• Pada Designer / Perancang Template pilih Edit HTML 
• Beri tanda centang pada disamping Expand Template Widget 
• Untuk jaga-jaga download / simpan dulu template kawan 
• Cari Script Kode  #comments [letaknya sebelum ]]></b:skin>] 

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

 Kalau sudah ketemu, selanjutnya Hapus semua kode tersebut dan ganti dengan kode berikut :

#comments{
clear:both;
float:left;
width:525px;
margin: 0;
padding:10px;
line-height:1.4em;
background: transparent;
}
#comments h4{
color:#FF0;
margin:0;
padding:7px 10px;
font-size:140%;
font-weight:normal;
line-height:1.3em;
background: #000;
}
#comments p.notice{
text-align:center;
font-weight:700;
margin:0 0 10px;
padding: 0;
}
.commentlist,.commentlist-destacado{
clear:both;
float:right;
width: 525px;
background: transparent;
list-style:none;
margin: 5px 0;
padding: 0;
}
.commentlist li,commentlist-destacado li{
clear:both;
float:right;
width:465px;
background: #95CAFF;
color: #00F;
font-size:12px;
margin:0 5px;
padding:0;
}
#comments .commentlist li.pingback div.comment-body,
#comments .commentlist li.trackback div.comment-body{
border-bottom:0px solid #F00;
}
#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:#00F;
}
.comment-meta a{
text-decoration:none;
color:#00F;
}
#comments .commentlist li p,
#comments .commentlist-destacado li p{
margin: 0 0 10px;
padding: 0;
}
.comment p{
display:block;
}
.comment-author{
color: #000;
font-size:12px;
margin:5px 0 0 0;
padding:0;
line-height:1.3em;
}
.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:450px!important;
max-width:450px!important;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li div.comment-body{
background: transparent;
margin:5px;
padding: 5px 10px;
border: 1px solid #95CAFF;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li ;
}

Teks yang berwarna merah silahkan disesuaikan dengan lebar Blog kawan
Simpan Template kawan :D karena Modifikasi sudah selesai

INGAT : sekali lagi bagi kawan yang mengadakan perubahan Kotak Komentar seperti yang saya sampaikan dulu, karena Modif sekarang saya tetap mempergunakan Model Komentar itu. :z  

Sedangkan kalau kawan ingin merubah menjadi seperti Kotak Komentar Blog saya ini, silahkan lanjutkan ke tahap kedua :D

• Selanjutnya cari kode seperti ini : 

</b:includable>

<b:includable id='comments' var='post'> beri tanda [ Perhatikan gambar dibawah]

• 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 dibawah], 

yang batas bawah selengkapnya seperti berikut 

<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/> :  &#8220;<data:post.title/>&#8221;
        </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>
<p>
     <data:comment.body/>
      <span class='interaction-iframe-guide'/>
                </p>
  <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/>
              </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>
               <p>
                  <data:comment.body/></p>
                  <span class='interaction-iframe-guide'/>
 <div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
               <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=4600536250166325978&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;'><span style='color: rgb(255, 0, 0); font-size:14px; font-weight:normal;float:left;padding-right:10px;'><blink>&#187; Reply </blink></span></a>
                  <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/>      
              </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>

• Jangan lupa ganti teks yang berwarna merah dengan latar hijau [4600536250166325978] dengan ID Blog kawan :O 
• Jangan lupa hapus kembali tanda batas yang dibuat tadi 
• Simpan Template kawan
• Mudah-mudahan kawan tidak menemukan masalah :#

Ini semua tidaklah mutlak harus begini, 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 :@