Cara Modifikasi Kotak Komentar

Selamat sore sahabat Ngeblog Suka-Suka, semoga anda semua dalam keadaan sehat wal afiyat. Setelah hampir 3 bulan tidak mengurusi blog ini lagi karena template yang jelek tetapi sudah sangat SEO Friendly. Karena itu saya ragu-ragu untuk mengganti template blog ini. Tapi setelah pikir-pikir, akhirnya saya memutuskan untuk mengganti template blog ini. Setelah saya ganti template, Alexa Rank saya langsung turun drastis. Semula yang 600.000 sekarang menjadi 900.000 . Sungguh hasil yang cukup menjengkelkan.

Saya memutuskan untuk menggunakan template yang katanya SEO Friendly. Yaitu template kloningan O-OM ( baca : Bloggerpedia 007 Style Template ). Saya menyukai template tersebut karena saya melihat kotak komentar yang rapi dan keren abis.

Oke sekarang kita menuju ke topik. Memodifikasi kotak komentar itu sebetulnya bukan bagian dari teknik SEO tetapi hanya supaya blog kita itu terkesan tampil beda dan keren. Perlu di ketahui sebelumnya bahwa setiap kode template antara yang satu dengan yang lain bisa berbeda bisa juga sama, jika tutorial ini tidak sama dengan kode yang ada pada template anda, maka maaf saja berarti anda kurang beruntung. Kali ini saya akan memberikan tutorial pada template seperti blog ini.

Nah, untuk itu segera ikuti langkah-langkahnya di bawah ini :

Login ke blogger dengan ID anda.
Klik Tata Letak.
Klik tab Edit HTML.
Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
Beri tanda centang pada kotak kecil di samping tulisan Expan template Widget.

Tunggu beberapa saat ketika proses sedang berlangsung.

Cari kode pada bagian CSS kurang lebih seperti ini :

#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }

Kemudian ganti kode tersebut dengan kode di bwah ini :

/* Comments
----------------------------------------------- */
#comments h4{background:#efefef url(http://bp0.blogger.com/_C6KkooKXCEw/SJGzpJXhKoI/AAAAAAAACGw/QZ7IzDBHgFU/s400/icon_comments.png) no-repeat 3px .3em;width:550px;font-size:11pt;text-transform:sentence case;font-weight:400;line-height:1.5em;letter-spacing:0;color:#111;padding-left:27px;padding-top:0;margin:0}#comment-form {width:580px;}.comment-form {width:580px;}#comments-block{border:0 solid #ccc;width:530px;line-height:1.6em;margin:1.3em 0 1.5em}#comments-block .comment-author{background:#f6f6f6;border-top:1px solid #ccc;padding-left:10px;color:#111;margin:.5em 0}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-footer{padding-left:0;line-height:1.5em;font-size:9px;border-top:1px solid #ccc;margin:.25em 0 2em}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:left;padding-left:10px;border-left:3px solid #f0f0f0;margin:0 0 .75em}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic;color:gray}.owner-Body p{text-align:left;color:#000;padding-left:10px;background:#FFFFD7;border-left:3px solid #F90;margin:0 0 .75em}
#comments-block .avatar-image-container img {background-color: transparent;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUtTzShxKBlmLzrcfnhyphenhyphenu4-p7BmtjSVKKhENmtRxkkgGvFp4D8isZtl-pVubvf6ReWU7qxvPVWhu8OeGg2ViZkQPjQt3kifVUtzluGtMVDEFmOzGndSBnsbKNUROKF6edj4jJW7NUnnY/s200/anonim-c.png);background-repeat: no-repeat;background-attachment: scroll;background-position: center top;width: 35px;height: 35px;position:absolute}
#blog-pager-newer-link{float:left; line-height:1.9em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.9em; font-weight:bold}
#blog-pager{width:580px; text-align:center; line-height:1.9em; font-weight:bold; }

Lihat Ke bagian bawah, dan cari kode yang seperti 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 == 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 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'>
            <a expr:name='data:comment.anchorName'/>
            <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:include data='post' name='comment-form'/>
        <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>

Ganti kode tersebut dengan kode di bawah 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 == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
         &#8212; <a href='#comment-form' rel='nofollow'>Skip to Comment</a>
      </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>
    <b:if cond='data:comment.author == data:post.author'>
          <dd class='owner-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>
        <b:else/>
          <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>
</b:if>
          <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>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Lihat Ke bagian atas dari kode di atas, dan cari kode yang seperti ini :

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='300' id='comment-editor' scrolling='auto' width='600px'/>
  </div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='http://www.blogger.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>

Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/> &#8212; or <a href='#main' rel='nofollow'>Back to Content</a></h4>
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='300' id='comment-editor' scrolling='auto' width='600px'/>
  </div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='http://www.blogger.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>

Klik tombol Simpan Template.
Selesai. Silahkan lihat hasilnya.

Kode-kode diatas tentunya tidaklah mutlak harus seperti itu, jika anda sedikit familiar dengan css, maka anda bisa berkreasi lebih. Nah, sekian tutorial dari saya kali ini, semoga bisa bermanfaat.

11 komentar:

pokershark1032 Juni 2011 pukul 18.24
Useful tip. I wonder what a query must be to find duplicated rows with intermediate data? For example I'm using php forms and visitors enter some kind of information. While they are doing this the form creates intermediate entries to datadase for making backup. What the query must be to find these entries?
BalasHapus
Balasan
Unknown5 Juni 2011 pukul 02.10
salam kenal mas
saya baru aja kenal dunia blogger
jadi saya masih takut n segan dikit untuk memodifikasi pa yang telah ada. cuma saya mau tanya aja mas
tapi masalah yang lain.
gini mas
kalo kita postingan bebeapa blog dihalaman depan blog
bagaimana caranya agar yang ditampilkan cuma 1 atau 2 paragraf saja
jadi ada semacam perintah READ MORE..
mohon panduannya ya mas
http://malie-linge-gayo.blogspot.com/
hehehehe...sekalian promosi mas hehehe
wasalam
BalasHapus
Balasan
Coba Coba5 Juni 2011 pukul 12.52
@ malie_gayo : Salam kenal juga sobat. Mengenai masalah yang sobat alami, saya sudah punya solusinya. Silahkan buka link ini :
Cara Membuat ReadMore Otomatis (Auto ReadMore)
Trims. Semoga bisa membantu!
BalasHapus
Balasan
E q u a l i z R19 Juli 2011 pukul 11.34
bagus ya artikelnya om
BalasHapus
Balasan
seo18 Agustus 2011 pukul 14.37
I'll absolutely bookmark this page and I really don't book mark a great number of blogs. Super post on cara modifikasi kotak komentar blog. Thanks for it.
BalasHapus
Balasan
Wandhy3 September 2011 pukul 22.03
coba lagi..........
tutorial dari blog ini sangat bermanfaat banget !!!
blognya mas sudah saya follow...
http://wafariq.blogspot.com
BalasHapus
Balasan
sprei murah18 November 2011 pukul 18.11
thaks gan , langsung praktekin buat tambah ilmu
BalasHapus
Balasan
obat herbal hepatitis3 Februari 2012 pukul 07.45
mantap banget nih informasinya kawan...
BalasHapus
Balasan
obat herbal jantung koroner3 Februari 2012 pukul 07.48
izin copas brother bwt di tempelin di blog..hehehe
BalasHapus
Balasan
Romantic Gifts18 Februari 2012 pukul 06.13
tampilan komentar hasilnya kaya bagaimana gan ? screenshootnya jadi kan ga bingung nebak script.makash infonya
BalasHapus
Balasan
Aflah10 Mei 2012 pukul 21.11
wahh..mantap ne infonya gan bisa diterapkan di blog saya..nice.
BalasHapus
Balasan

Tambahkan komentar

Hey, jika sudah selesai baca and ngeliatnya saatnya untuk memberi tanggapan karena keritik dan saran anda semua sangat berguna bagi saya agar blog ini semakin maju key

Traffic Rank	:
Online Visitor	:
Blog's Rank	: