Membuat Tampilan Kolom Komentar Lebih Menarik

Membuat Tampilan Kolom Komentar Lebih Menarik - Hallo sahabat berita aneh, Pada Artikel yang anda baca kali ini dengan judul Membuat Tampilan Kolom Komentar Lebih Menarik, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel tips dan triks blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Tampilan Kolom Komentar Lebih Menarik
link : Membuat Tampilan Kolom Komentar Lebih Menarik

Baca juga


Membuat Tampilan Kolom Komentar Lebih Menarik

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='&quot;comment-author &quot; + 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



Demikianlah Artikel Membuat Tampilan Kolom Komentar Lebih Menarik

Sekianlah artikel Membuat Tampilan Kolom Komentar Lebih Menarik kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Tampilan Kolom Komentar Lebih Menarik dengan alamat link http://beritaaneh13.blogspot.com/2012/04/membuat-tampilan-kolom-komentar-lebih.html

0 Response to "Membuat Tampilan Kolom Komentar Lebih Menarik"

Posting Komentar