728x90 AdSpace

Latest News

06 Mei 2011

Warna &Efek Hover Utk Komen Author






LIHAT DEMO
(Lihat pada komen aku dalam demo ni dan gerakkan mouse korang kat situ)

Ok.Cara pemasangan(Sila backup template sebelum memulakannya)

Mula-mula sekali pergi ke Blogger dashboard klik --> Design --> Edit Html --> Tanda kotak Expand Widget Templates-

Dan Cari kod ]]></b:skin>

Seterusnya Copy dan paste kod ni di ATAS/SEBELUM  kod ]]></b:skin>

.comment-body-author {
-moz-border-radius: 15px;
border-radius: 15px;
background: #000000; /* BG color*/
color: #ffffff; /* Font color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}

.comment-body-author:hover {
-moz-border-radius: 15px;
border-radius: 15px;
background: #cccccc; /* BG Hover color*/
color: #000000; /* Font Hover color*/
border-top: 1px solid #990000;border-bottom: 1px solid #990000;border-left: 1px solid #990000;border-right: 1px solid #990000;
margin:0;
padding:0 0 0 20px;
}

Save template.

Ok selesai yang tu,seterusnya korang kena kena tentukan korang guna template jenis apa.Kalau korang guna template custom,korang perlu ikut langkah ini:

Langkah Bagi Pengguna dengan Template Blogger Lama/Older Blogger Templates dan 'Custom'

Tekan Ctrl F dan cari kod ni:

<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>

Ok dah jumpa.Korang perlu letak tambahan kod merah seperti ini:

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<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>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Save dan lihat hasilnya ;)

Kalau korang guna template designer pula ikut langkah ni:

Langkah Bagi Pengguna dengan Template Designer

Tekan Ctrl F dan cari kod ni:

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Ok dah jumpa.Korang perlu letak tambahan kod merah seperti ini:

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

</b:if>

<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>
</div>

Save dan lihat hasilnya ;)
Warna &Efek Hover Utk Komen Author
  • Blogger Comments
  • Facebook Comments

0 ulasan:

Catat Ulasan

Top