Sebelumnya tutorial ini saya dapet dari kang Jaloe
Pokoknya ikuti deh langkah-langkahnya :
- Buka Blogger.Com
- Klik Tata Letak/Layout
- Klik Edit HTML --> Sebelumnya terlebih dahulu anda backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.
- Kemudian Centang Expand Widget Template
- Cari kode berikut:
<b:loop values='data:post.comments' var='comment'>
- Atau secara lengkapnya begini :
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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> - Sobat hapus semua kode diatas ganti dengan kode dibawah ini:
<ul class='commentlist'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'><li>
<div class='' expr:id='data:comment.id'>
<div class='pane_l'>
<div class='c_author'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
<br/>
Said
</dt>
</div>
<div class='c_avatar'/>
<div class='commentphoto' style='margin-top:.5em;'/>
<a expr:href='"#comment-" + data:comment.id' style='font-size:14px;' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<b:else/>
<div class='pane_r'>
<p><data:comment.body/></p>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</b:if>
</div>
</b:if></div>
<div class=' clear'/></li> </b:loop>
</ul> - Masukkan Syntax CSS ini :
* {
margin: 0px;
padding: 0px;
} - diatas CSS ini :
body {
- Terus Sobat cari kode ini :
/* Comments
----------------------------------------------- */ - Kode asli Comments di minima template begini :
/* Comments
----------------------------------------------- */
#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 semua kode diatas ganti dengan kode ini :
#comments{background:#EBF3FB; border:solid #ccc 1px; margin-bottom:10px}
#comments h4{ margin:1em 0; padding:10px; font-weight:bold; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor}
#comment-list {margin-top: 10px;padding:10px;
background: transparent;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: transparent;
border-bottom: 1px dotted #ddd;padding: 20px 10px 5px 10px;}
.commentlist li.alt {background: #fff;}
.pane_l {float: left;background:#fff;display: inline;
width: 110px;min-width: 110px;max-width: 110px;
border: 1px dotted #ddd;padding-right: 0px;margin-right: 0px;text-align:center;padding:15px 0}
* html .pane_l{margin-top:15px; }
.pane_r {display: block;line-height: 1.5em;margin-left: 125px;
padding:8px 15px 15px 15px;;background:#fff;
border-left:1px dotted #CCCCCC;
border-right:1px dotted #CCCCCC;
border-top:3px double #CCCCCC;border-bottom:3px double #CCCCCC;}
.c_author {font-size: 13px;font-weight: normal;height:30px;
overflow:hidden;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 0px 0px;
padding-top:20px;}
.c_approved {color: #aaa;font-size: 0.9em;}
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px;width:92%;}
* html .comment-form { width:87%; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
background:#EFEBE0;padding:8px 15px 15px 15px;
border-left:1px dotted #fff;border-right:1px dotted #fff;
border-top:3px double #fff;border-bottom:3px double #fff;}
.owner-Body p {
font-size:100%;margin:0 0 0 0;color:#FF0000;
text-decoration:bold;
}
.deleted-comment {
font-style:italic; color:gray;
}
- Bila tidak menemukan kode /* Comments bisa diatasi dengan menaruh kode diatas diatas tag ]]></b:skin>
- Finish!!
NOTE!!: Ngga semua template yang saya coba berhasil...
TIPS: Template klasik biasanya berhasil..
0 komentar:
Posting Komentar