Merubah bentuk kotak komentar blog

Bosan dengan tampilan kotak komentar blogmu?

Setelah aku coba terapkan trik ini ternyata berhasil juga aku pasang di blog ini.Info ini aku dapat dari para ahli blogging,tidak usah di sebutin namanya deh,,tar juga tahu..

Sebelumnya Perlu di ketahui 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 kamu, maka pintar-pintar aja kamu mengakali trik ini,Jika benar-benar tidak bisa di terapkan,berarti kamu kurang beruntung deh..
Tapi jangan patah semangat,template blog aku juga mengandung ketidakcocokan dengan cara ini,tapi alhasil aku sukses juga masangin di blog ini...

Gak percaya?lihat ke bawah pada halaman ini.Nongkrong deh si kotak komentar keren ala kang rohman.(upszz...akhirnya di sebutin juga dah...)

Terlalu banyak cingcong,langsung ja deh ke tutorialnya:

=>Login ke blogger dengan ID anda.

=>Klik Tata Letak »» Klik tab Edit HTML.

=>Klik tulisan Download Template Lengkap. »» Silahkan backup dulu templatenya (sebagai antisipasi kegagalan).

=>Beri tanda centang pada kotak kecil di samping tulisan Expan template Widget.

=>Cari kode pada CSS berikut :

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

Hapus dan ganti kode html di atas dengan kode di bawah ini :

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

#bg_commentblock {
    width: 548px;
    background: #ffffff;
    float: left;
    padding:20px;
    margin:0 0 10px 0;
    border:1px solid #C0C0C0;
    }

#commentblock {
    width: 510px;
    background: #E8E8E8;
    text-align:left;
    padding: 20px 20px 10px 20px;
    margin: 10px 0px 0px 0px;
    border-top: 2px solid #333333;
    border-bottom: 1px solid #333333;
    }
#commentblock ol {
    list-style-type: square;
    margin: 0px 0px 0px 10px;
    padding: 0px 0px 10px 0px;
    }
.commentdate {
    font-size: 12px;
    padding-left: 0px;
    }
#commentlist li p {
    margin-bottom: 8px;
    line-height: 20px;
    padding: 0px;
    }

.commentname {
    color: #333333;
    margin: 0px;
    padding: 5px 5px 5px 0px;
    }

.commentinfo{
clear: both;
}

.commenttext {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 490px;
    background: #FFFFFF url(http://img24.imageshack.us/img24/1883/ariescommentgray.png) no-repeat top left;
    }

.commenttext-admin {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 490px;
    background: #FFFFFF url(http://img24.imageshack.us/img24/1883/ariescommentgray.png) no-repeat top left;
    }

Perhatikan kode warna merah dan warna biru di atas,rubah dan sesuaikan.Perbandingan antara ukuran commentblock dengan commenttext pada blog aku:

1. #bg_commentblock {width: 400px;

2. #commentblock {width: 365px;

3. .commenttext { width: 345px;

4. commenttext-admin { width: 345px;

Dan lihat hasil nya di blog aku,Seimbang kan!!

Silahkan atur ukurannya agar hasil kotak komentar yang kamu pasang berhasil di terapkan.

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

         <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>

         <data:post.commentRangeText/>

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

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

         <data:post.commentRangeText/>

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

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

Hapus dan ganti kode html di atas dengan kode di bawah ini :

<b:includable id='comments' var='post'>

<h4>

Komentar :

</h4>

     <dl class='commentlist'>
       <b:loop values='data:post.comments' var='comment'>
         <span><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
           <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>pada tgl & lt;dd class='comment-footer' style='display:inline; margin:0px'>
           <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> </span>
         <dd class='commenttext'>
           <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: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>

         <data:post.commentRangeText/>

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

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

</b:if>

</p>
</div>

</div>
</b:if>

Perhatikan kode warna biru di atas,rubah dan sesuaikan.