Iklan 300 x 250

Random Post

Recent Post

 

Memodifikasi Tampilan Kotak Komentar Blog

Text Resizer: Click for Resizer
Mungkin diantara para sahabat blogger,sudah bosan dengan model kotak komentar pada blog sobat atau berniat untuk memodifikasi kotak komentar blog anda. Nah pada tutorial kali ini kita akan belajar bagaimana memodifikasi tampilan kotak komentar blog sobat supaya lebih menarik dan pastinya lebih keren dukz hehehehe. Untuk demonya sobat silahkan sobat lihat pada gambar dibawah ini:


Bagaimana setelah sobat melihat gambar diatas apakah sobat tertarik tuk membuatnya??? Oh ya sampaek lupa sebenarnya tutorial kali ini saya peroleh juga dari hasil blogwalking saya dari sahabat blogger ( Eitss,,bukan copas aja lo) hehehehe. Check This Out.

Untuk memodifikasi tampilan kotak komentar blog ikuti saja langkah langkah dibawah ini :

  • Pada dasbor pilih rancangan kemudian Edit HTML
  • Lalu centang Expand Template Widget
  • Jangan lupa Download Template Lengkap biar aman
  • Setelah itu cari kode berikut ini :

/* 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 : Mungkin setiap bagian code css komentar berbeda-beda pada setiap template.

  • Setelah itu ganti css komentar diatas dengan css komentar dibawah ini :

/* 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;
}

  • Setelah itu cari lagi kode dibawah 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>

  • Setelah ketemu kemudian ganti semua kode diatas dengan kode dibawah 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>

  • Langkah terakhir Simpan Template...

Seperti biasa semoga tutorial kali ini bermanfaat untuk sobat.....


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Memodifikasi Tampilan Kotak Komentar Blog
Dalam Kategori : ,
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

3 komentar:

terima kasih tutorialnya kawan . ,

bagus tuh kelihatannya . , :j:

@Ladida's Blog

thanks sobat silahkan dicoba :p:

kotak komentar kaya agan tuh keren,, jadi pngen,, :j: :j:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Poskan Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky