Cara Membuat Komentar Blog Mirip Komentar Wordpress

Memang Komentar gk Bisa Dirubah ? Ternyata Bisa Loh Kalo Mau Contohnya Bisa Dilihat Blog ini kalo komentar dari blogspot kan lama-lama Bosen.com heheheheheheh. Artikel saya dapet dari CaraOnline
Ingat Download Full Template Dulu Sebelum Terjadi kecelakaaan hehehehehehe Ok !

1. Login > Rancangan > EDIT HTML
2. lalu Download Full template Dulu Kalo Ada Masalh RIbet > Dan Centang Expand Template Widget
PERHATIAN!
Anda Harus Mendownload Full template Jika Terjadi Apa-Apa !
Kalo Udah Lihat Cara-Cara berikut :

Cari Kode ]]></b:skin> lalu paste Kode Berikut Di Atasnya :

/* Main Comment<br /> -----------------------------------------------*/<br /> <br /> #comments h4 {<br /> font-size: 24px;<br /> font-weight: normal;<br /> margin: 20px 0;<br /> }<br /> <br /> .cm_wrap {<br /> clear: both;<br /> margin-bottom: 10px;<br /> float: right;<br /> width: 100%;<br /> }<br /> <br /> .cm_head {<br /> margin: 0;<br /> width: 70px;<br /> float: left;<br /> }<br /> <br /> .cm_avatar {<br /> margin: 0;<br /> vertical-align: middle;<br /> border: 1px solid #DDD;<br /> padding: 3px;<br /> background: white;<br /> width: 35px;<br /> height: 35px;<br /> }<br /> <br /> .cm_reply {<br /> padding-top: 5px;<br /> }<br /> <br /> .cm_reply a {<br /> display: inline-block;<br /> margin: 0;<br /> padding: 1px 6px;<br /> border: 1px solid #C4C4C4;<br /> border-top-color: #E4E4E4;<br /> border-left-color: #E4E4E4;<br /> color: #424242 !important;<br /> text-align: center;<br /> text-shadow: 0 -1px 0 white;<br /> text-decoration: none;<br /> -webkit-border-radius: 2px;<br /> -moz-border-radius: 2px;<br /> border-radius: 2px;<br /> background: #EDEDED;<br /> background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );<br /> background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );<br /> font: 11px/18px sans-serif;<br /> }<br /> <br /> .cm_reply a:hover {<br /> text-decoration: none !important;;<br /> background: #ccc;;<br /> background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;<br /> background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;<br /> }<br /> <br /> .cm_entry {<br /> padding: 16px;<br /> background: #F7F7F7;<br /> border: 1px solid #E4E4E4;<br /> overflow: hidden;<br /> }<br /> <br /> .cm_arrow {<br /> display: block;<br /> width: 9px;<br /> height: 18px;<br /> background: url(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) no-repeat;<br /> position: absolute;<br /> margin-left: -25px;<br /> }<br /> <br /> .cm_info {<br /> margin-bottom: 5px;<br /> }<br /> <br /> .cm_name {<br /> font-weight: bold;<br /> font-size: 12px;<br /> float: left;<br /> }<br /> <br /> .cm_date {<br /> font-size: 10px;<br /> float: right;<br /> font-style: italic;<br /> color: #CCC;<br /> }<br /> <br /> .cm_entry p {<br /> margin: 0;<br /> font-size: 13px;<br /> color: #666;<br /> }<br /> <br /> .cm_pagenavi {<br /> font-size: 10px;<br /> text-transform: uppercase;<br /> color: #666;<br /> text-shadow: 1px 1px white;<br /> font-weight: bold;<br /> }<br /> <br /> .cm_pagenavi a {<br /> color: #666;<br /> text-decoration: none;<br /> padding:10px;<br /> }<br /> <br /> .cm_pagenavi a:hover {<br /> text-decoration: underline<br /> }<br /> <br /> .cm_pagenavi span {<br /> color: #888;<br /> background: white;<br /> padding: 4px;<br /> border: 1px solid #E0E0E0;<br /> }<br /><br />

CAUTION : Setelah anda paste kode diatas, anda juga harus menghapus section css comments di blog anda. biasanya mempunyai kode awalan seperti ini #comments

Biar tidak terjadi Bentrok

lalu Kode berikut </body> dan paste kode ini tepat diatas nya :

Dan Sekali Lagi Saya Ingat Unutk Membackup Template Anda ! Baca baik-baik langkah terkhir ini, cari kode <b:includable id='comments' var='post'> dan hapus kode di bawahnya sampai menemukan kode </b:includable> . kode yang di hapus ini adalah kode HTML untuk komentar atau supaya komentar tidak bentrok atau menjadi dua dengan komentar yang lama. dan ganti seluruh kode yang di hapus tadi dengan kode di bawah ini:

comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments > 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>

        <div class='cm_pagenavi' id='cm_page'></div>

        <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='"https://www.blogger.com/comment.g?blogID=478857210420619544&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>

                            <div class='cm_entry'>
                                <span class='cm_arrow'></span>
                                <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>

                                <p><data:comment.body/></p>
                            </div>
                        </div>
                    </div>
                </b:if>
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'></div>

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

NB: Ganti blog ID yang saya tandai dengan warna merah.

Save template dan lihat hasilnya.

Semoga berhasil :)

Jika anda masih belum juga berhasil atau ingin memberi warna yang berbeda pada komentar seperti wordpress ini, silahkan baca posting saya yang yang sudah saya sebutkan diatas tadi berjudul Cara membuat komentar blogspot seperti wordpress, dari sana mungkin anda akan mendapatkan pencerahan dari para ahlinya langsung.