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.

Artikel Terkait :
tips dan triks blog
- 20 Tips Rahasia Meningkatkan Peringkat Alexa Rank Blog / Website
- cara submit sitemap blog di bing webmaster
- Cara Daftar Dan Claim Blog Di Technorati
- Tips Menemukan ide posting terbaik dengan mudah
- Tips Memilih Template Blogger
- Cara Menaikkan Trafik Blog Secara Otomatis melalui suatu situs referal
- Cara Scan Website Dari Virus
- Cara Paling Tepat Supaya Semua Halaman Blog Terindex Google
- Mengapa Blog Sepi Pengunjung?
- Cara Paling Mudah Mendatangkan Ribuan Pengunjung ke Blog
- cara membuat slider image show yang diAplikasikan ke dalam template blog .
- Rahasia Di Balik Meta Tag Master SEO
- Cara membuat tombol share ke social bookmarking
- Cara untuk mengubah/menambahkan gambar header
- Auto Read More Tanpa Java Script
- Cara Membuat Background di Belakang Postingan Blog
- Template gratis
- menghilangkan navbar blog
- Membuat Link Dalam Artikel Blog Di Blogspot - Tip dan Trik Cara Membuat Blog, Merancang Website dan Mendapatkan Uang
Widget by [ inspirasiku-iq ]
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment