SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




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(http://3.bp.blogspot.com/-Q8SIzhox3xM/TZ7lxCPRlEI/AAAAAAAABmg/IxTulZiFjP8/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(http://1.bp.blogspot.com/_V-IXTBBt1Bg/TE-ce95knVI/AAAAAAAAB1g/Sprbxp4AkI4/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 :@


    12 komentar pada “Modif Kotak Komentar supaya Admin bisa Reply”

    1. wah.. punyaku udah disetel nih..

      BalasHapus
    2. ayo terus ngeblog mas.. jangan kalah sama yang lain ya,,

      BalasHapus
    3. @Said Arsyad saya ngeblog tanpa target keperluan, :D cuma belajar sambil melupakan masalah :z

      BalasHapus
    4. semoga berhasil info yg saya dapetkan di sini

      BalasHapus
    5. trimakasih gan..
      akhirnya jadi ada lagi foto di kotak komentar nya...

      BalasHapus
      Balasan
      1. trims kawan sudah mampir :z

        Hapus
      2. bisa pasang reatmore pada komentar gak?

        Hapus
      3. Read more pada Komentar belum pernah saya lihat, nanti saya coba praktekkan dulu, kalau pada kumpulan/Rekap komentar ada Readmore-nya ada dan sudah saya posting :x :z

        Hapus
    6. boleh di coba nih,,kunjung balik ya ke blogku

      BalasHapus
    7. nice info,thank mas,ilmu saya sudah nambah

      BalasHapus

    BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
    BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

    TAMBAHKAN KOMENTAR DENGAN EMOTICON :
    DENGAN KODE ALFABET < :a s/d :z >

     

    Copyright  ©  TIPS BLOGBEGO

    site meter

    Template by Blogger templates
    Powered by Blogger