Home > tips dan triks blog > Membuat Tampilan Kolom Komentar Lebih Menarik
Membuat Tampilan Kolom Komentar Lebih Menarik
Tuesday, April 17, 2012
Kali ini saya hanya sedikit memodifikasi hasil kerja kang jaloee yaitu mengganti perwajahan komentar,
di mana saya hanya ingin menambahkan author commentnya beda style atau
istilahnya komentar pemilik blog berbeda style dengan komentar
pengunjung, seperti yang sobat lihat screenshoot di bawah ini :
Menurut saya perwajahan komentar
tersebut sangat menarik dan unik, kalau sobat tertarik ingin membuat
perwajahan komentar seperti screenshoot di atas silahkan ikuti
langkah-langkah berikut :
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML
Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!
2. Centang Expand Widget Templates
3. Kemudian cari kode css untuk komentar :
/* 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; }
NB: setiap bagian code css komentar berbeda-beda pada setiap template
4. Ganti semua kode di atas dengan kode di bawah :
/* Comments
----------------------------------------------- */
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 0.75em;color: #666;}
.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: #fff;
border-bottom: 1px dotted #ddd;padding: 20px;}
.commentlist li.alt {background: #fff;}
.pane_l {float: left;display: inline;
width: 160px;min-width: 160px;max-width: 160px;
border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;}
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}
.c_author {font-size: 0.9em;font-weight: bold;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 7px 0px;}
.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; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 201px;}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}
5. Setelah itu cari bagian 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 sobat ganti semua kode di atas dengan kode di bawah ini :
<ul class='commentlist'>
<b:loop values='data:post.comments' var='comment'><li>
<div class='pane_l'>
<div class='c_author'>
<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/>
</div>
<div class='c_avatar'/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
</div>
<b:else/>
<div class='pane_r'>
<data:comment.body/>
</div>
</b:if>
<div class=' clear'/></li>
</b:loop>
</ul>
6. Langkah terakhir adalah save template
Terima kasih anda telah membaca artikel Membuat Tampilan Kolom Komentar Lebih Menarik. Tak lengkap rasanya jika kunjungan anda di blog Inspirasiku-iq tanpa meninggalkan komentar. Untuk itu silahkan berikan tanggapan anda pada kotak komentar di bawah. Semoga artikel Membuat Tampilan Kolom Komentar Lebih Menarik ini bermanfaat untuk anda.
Home »
tips dan triks blog
»
Membuat Tampilan Kolom Komentar Lebih Menarik
Artikel Terkait :
Widget by [ inspirasiku-iq ]
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment