Tutorial : Highlight Author's Comment

Assalamualaikum, terlebih dahulu nak mohon maaf pada yang bertanya. Baru sekarang nak tunjuk tutorial ni. Act, saya dah terlupa kat mana saya belajar tutorial ni. Tutorial tu dari orang seberang. Puas google nak cari balik tutorial tu, tapi tak jumpa. Akhirnya saya terpaksa cek satu-satu kod dan eksperimen sendiri. Mangsa eksperimen tentulah blogshop saya. Kih kih.

Tengok hasil kat sini nih.
CLICK HERE
Haa..kan dah ade kambing comel tu kalau saya yang komen.
So, rasanya kalau ikut tutorial ni betul-betul tak de masalah kecuali yang guna template daripada Blogger Designer. Tak dapatla nak tolong ^^

Jom belajar jom cara highlight author comment

Ok, macam biasa,


Dashboard / Layout / Edit HTML / Download Full Template
(penting sebagai backup!)

Sila tick Expand Widget Templates
Cari code dibawah ni (Tekan Ctrl + f untuk memudahkan pencarian)

#comments-block .comment-footer {

Masukkan kod ini sebelum kod di atas

/* Author Comment Highlight
____________________________*/

.author-body {
background: url(http://dl4.glitter-graphics.net/pub/244/244554lqb5be0b16.gif)no-repeat left center; background-color: #FFF;
border-top: 0px dotted #223344;border-bottom: 0px dotted #223344;border-left: 1px solid #ff6699;border-right: 1px solid #ff6699;
margin:0;
padding:1px 1px 60px 60px;
}

.author-body p {
font: 16px Tempus Sans ITC;
font-weight:bold;
color: #ff0080;
}

Tips:

http://dl4.glitter-graphics.net/pub/244/244554lqb5be0b16.gif : url gambar boleh diubah di sini

Kalau tak ubah, dapat gambar incik lembu nih ^^
saje tak mo bagi link incik kambing. tak mo la sama eh ;)

#FFF Ubah warna latar

#ff6699 warna border, kenala sama dengan warna kotak komen, kalau tak, cacat jadinya. kihkih.

rujuk balik korang punya kotak komen warna ape. SINI

Yang lain-lain tu, pandai-pandai la bereksperimen sendiri wokey. Macam padding, font, color tu. Panjang la plak nak terang satu-satu. hehe.

Ok, paling penting dan agak sukar di bahagian ini, cari kod ini

<data:comment.author/>

Seterusnya masukkan kod yang dibold hijau dibawah TEPAT di kedudukannya. Salah isi, blog korang hancuss. Hehe.

<data:comment.author/>
</b:if>
</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'>

Ok, dah siap. Save!! ^^

Ini hasil kerja tangan saya sendiri study kod macam nak gile. Sila hormat ye. Kalau nak pinjam, sila letak backlink. Kerjasama anda amat dihargai. TQ.

Jom singgah my blogshop : MyKawaiiStore
Anda dijemput menyertai FaceBook Fans

 

Kalau susah sangat tak reti nak buat, boleh je minta tolong Mommy Pinky buatkan. PM saya di zanaju_on@yahoo.com ye.