Tulisan ini merupakan “ Upgrade Vesion Tentang Desain layout komentar 2 kolom “. thank buat blog hajunik karena source kodenya saya ambil dari template buatannya “ True Elegan “, dan makacih juga buat suhu mochal yang telah memodifikasi pada author comment highlighting-nya .
Terutama di bandingkan dengan yang terdahulu ( bisa di lihat di sini ), maka upgrade version ini untuk loding time-nya lumayan ringan, dan juga jika di lihat dari source kodenya lebih simple dari sebelumnya.
Cara Penerapanya :
Pertama :
Backup dulu template kita. setelah itu buka tab Tata Letak- Edit Html.
Kemudian centang/tandai kotak kecil di samping tulisan Expand Template Widget.
Setelah itu cari kode berikut ini.
<b:loop values='data:post.comments' var='comment'>
kode keseluruhan-nya menjadi seperti di bawah ini.
<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>
Kemudian ganti semua kode di atas dengan kode html ini.
<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' expr:class='data:post.avatarIndentClass' style='margin-top:.5em;'/>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<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>
Kedua :
Pada bagian kedua ini menyimpan ( atau menganti ) Css comment. dan yang pertama kali saya lakukan adalah menambah kode Css global riset, – untuk kasus ini , saya menambahkan global reset list .
ul {
margin:0px;
padding:0px;
list-style-type:none;
}Simpan kode tersebut di atas atau di bawah properti body ini
body{ background:$bgcolor; margin:0;…. }
kemudian setelah itu . saya mengganti css comment - red. biasanya di bawah kode keterangan seperti ini.
/* Comment */
Atau seperti ini ....
/* Comment
-------------------------------------------------- */
dengan kode css berikut ini.
#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:transparent; border:0px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px;width:95%;}
* html .comment-form { width:87%; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
background:transparent;padding:8px 15px 15px 15px;
border-left:1px dotted #33CCFF;border-right:1px dotted #33CCFF;
border-top:3px double #33CCFF;border-bottom:3px double #33CCFF;}
.owner-Body p {
font-size:100%;margin:0 0 0 0;color:black;
text-decoration:bold;
}
.deleted-comment {
font-style:italic; color:gray;
}
* atau jika susah mencarinya , bisa juga langsung di simpan kode css tersebut di atas tag.
]]></b:skin>
Setelah itu Simpan Template ..
0 comments:
Post a Comment