16 September 2011

Tutorial Cute Comment Box

Yuhuu , dapat buat tutorial lagi ! ^^
Jum kite mule kan terus boleh ? HAHA excited tahap gorila nie .

Haisy Daa nie pon , lupe pulak nak bagi salam kan ? Hehe Assalamualaikum :') . Harinie Daya nak teach korang macam mana nak buat cute comment box yang se-cute Domo . Alahai tibe-tibe sesat Domo pulak dekat sini .




Ni komen daripada --> ENTRY NI

Actually Daya baru buat tutorial nie semalam . Dah jadi terus Daya nak ajar korang ni haa . Good Luck kayy .


 Ctrl+F , cari salah satu code ni

/* comment

]]></b:skin> 


 untuk /* comment , lepas cari code tu , cari code yang seakan-akan macam nie

#comments h4 {
margin: 1em 0;
color: #999999;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

Gantikan code tu dengan code dekat bawah nie ::

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(URL IMAGE) repeat top left;
-moz-border-radius: 25px 25px / 25px 25px;
border-radius: 5px 5px / 5px 5px;
Border: 1px solid #F5A9A9;
}


 Untuk yang cari ]]></b:skin>  copy paste code nie ATAS ]]></b:skin>  kayy .

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(URL IMAGE) repeat top left;
-moz-border-radius: 25px 25px / 25px 25px;
border-radius: 5px 5px / 5px 5px;
Border: 1px solid #F5A9A9;
}

 URL image korang boleh laa cari sendiri , or pilih laa salah satu dekat bawah nie kayy .




Tekan je gambar . Right-click & copy URL Image  .

Fuh selesai pon pasal corak dia . Sekarang kite pergi macam mana nak buat
cute icon tu .


 Cari dua-dua code nie ::

data:comment.authorUrl

dan

<dd class='comment-footer'>

 Copy paste code nie bawah kedua-dua code tadi kayy .

<img src='URL Icon'/> 

 Korang boleh laa cari icon comel-comel dekat --> SINI . Just right-click untuk copy URL Image dia okey .

 Done ! ^^ . Save je terus . Kalau preview tak boleh nampak yep . Save dulu , lepas tu cuba bukak entry korang yang ada komen . Selamat Mencuba ! 

Spread Love 




11 comments:

aQmal abiD said...

nape xleh right klik URL image 2..?

pijah_amin said...

daya.. code yg nom dua tu kn.. ta jumpe pn... :'(

Daya The Sixth ! said...

@pijah_amin Klu tak jumpe buad satu je dulu kayy :))

AwaK aWak said...

tengs kak DAYA!....SYG AKA...DAH JDI..lah...::))))

izamin said...

yeah dah jadi.. terima kasih daya :)

Daya The Sixth ! said...

@AwaK aWak Alhamdulillah jadi pon :)

Daya The Sixth ! said...

@izamin Samesame sayang ^^

#myzatulnabiela said...

thank 4 the tutO . da jdik . jyeahh !

Alhuda Azra said...

nape xde comment link pun kat sy nye blog..huhu..camne?

fatimah said...

kenapa xjadi :(

zatie said...

x jadi pun..:(