Merubah Bentuk Kotak Komentar Di Blog

Bosan dengan tampilan kotak komentar blogmu?

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

Klik tombol Simpan Template. Selesai deh.

Selamat mencoba dan semoga berhasil..

TekInKom

Minggu, 19 Juni 2011

Merubah Bentuk Kotak Komentar Di Blog

0 komentar:

Posting Komentar

Blog Archive

Labels