Selasa, 10 November 2009

Membuat Highlight pada Author Comment

Highlight Author Comment fungsinya adalah supaya komentar author (pemilik blog) berbeda dengan komentar orang lain. Contohnya bisa anda lihat pada bagian comment pada blog ini. Efeknya akan muncul bila sebelum memberikan comment, author harus login dulu ke akun blogger sehingga komentar tersebut nantinya akan mempunyai warna berbeda dari komentar yang lain.

Untuk memasangnya ikuti caranya sebagai berikut:

1. Login ke akun blogger anda

2. Klik Layout

3. Klik Edit HTML dan beri centang Expand Widget Template

4. Backup Template Blog anda dengan cara Download Full Template untuk berjaga-jaga bila nantinya terjadi kesalahan.

5. Kemudian copy dan paste script dibawah ini sebelum kode ]]></b:skin>


.comment-body-author {

background: #421FF0; /* Warna Background */
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;
}


6. Kemudian cari kode seperti dibawah ini. Mungkin kode HTML dalam template anda akan berbeda-beda, tapi untuk lebih mudahnya, pada template anda silahkan cari kode data:post.comments dan samakan dengan kode berikut:


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
said...
</dt>

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


atau mungkin kode HTML template anda bisa berbentuk seperti ini:


<dl expr:class='data:post.avatarIndentClass' 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'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>

<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


7. Kode yang berwarna kuning adalah kode yang harus anda tambahkan pada HTML anda. Perhatikan dan letakkan kode tersebut pada posisi yang benar seperti diatas.

8. Jika anda sudah yakin telah menempatkan kodenya dengan benar, tekan Save Template dan lihat hasilnya.

Semoga berhasil,,,
Tutorial lengkapnya ada di sini




Share/Bookmark


_______________________________________________________________________

Bonus buat ANDA yang sudah berkunjung ke Blog saya, Tutorial mencari uang di Internet..... klik di sini




Adsense Indonesia
KumpulBlogger
Sekedar Catatan

Adsense Indonesia
antivirus


...::| Posting Terkait |::...

17 komentar:

.....::| Tampilkan Semua Komentar |::.....
Unknown mengatakan...

nice posting..
mksh dah mampir di blogku

salam

hss-info mengatakan...

sama2 Mas Aan,,,
sukses buat Mas Aan
Q udh follow blognya

Salam kenal.......

Unknown mengatakan...

datang lagi boleh kan..??
aku dah praktekin tutorial ini tapi hasilnya belum memuaskan .. templteku yg ga bisa apa akunya yg gaptek ya..hehe

hss-info mengatakan...

Di coba lagi aja mas,,,
Tutorialnya atas petunjuk Mbah Google di Blognya Mas Amin
sy praktek in langsung tok cer makanya sy masukin catatan
Mas Aan bisa langsung ke sumbernya :D

ina mengatakan...

nice posting....
makasih tutorialnya kakag....
keep posting yah....


salam blogger indonesia!!!

hss-info mengatakan...

Sama2 Ina,,
silahkan,,,,
dengan senang hati berbagi

Sukses buat Ina.....

Unknown mengatakan...

hei.....aku dapat ilmu baru nih...thanks sob..

hss-info mengatakan...

sama2
Mas Willyo Alsyah P. Isman

salam kenal...

Unknown mengatakan...

Selamat dan Sukses ya Mas untuk Lapak Baru nya ..., tambah gaya nih tampilan nya ..
keren euy , mantabs ...

Unknown mengatakan...

setelah beberapa kali praktek sudah bisa skrg..

mksh yap

hss-info mengatakan...

@ Mas J Sis ( Bluescreen )
tksh pencerahannya selama ini,, he he he

@ Mas Aan
Sukses buat Mas Aan....

hss-info mengatakan...

Test....
=))

Unknown mengatakan...

wah terimakasih sob atas ilmunya ini...sangat bermanfaat bgt...

Anonim mengatakan...

Thnkas sob, ssangat bermanfaat . .!

heru mengatakan...

nice post sobat, thanks tutorialnya, salam sukses selalu

Mr. X mengatakan...

Aku bisa pakai komentar admin berbeda dari sini...
wah makasih banyak atas share ilmu yang sangat bermanfaat bagiku...

twittuiw mengatakan...

hahaha.. boleh juga nih.... coba aahh... makasih Ooomm..

Posting Komentar

Terima Kasih sudah berkunjung & berkomentar di blog hss-info

...::|! Auto Exchange Link !|::...