[Tutorial] Macam Mana Nak Cantikkan Comment Box?

by - Tuesday, October 18, 2011


Assalamualaikum


Hari ini aku nak bagi tutorial tentang macamana nak cantikkan comment box korang supaya lain dari yang lain dan cantik je mata memandang. Haha :D

Haaaaaaa ~ Kan cantik comment box tu kan? Hehe :) Tutorial cantikkan comment box ni senang je. Korang konfem boleh buat punyaaaa :D Tapi aku punya macam ada masalah sikit kalau nak guna embeded below post so aku guna pop up window je lah untuk komen. Huhu Y.Y

Credit to here


  • Mula mula pergi Dashboard > Settings > Comment
  • Tick Embeded below poast dekat Commet From Placement. Kalau tak faham, boleh rujuk kat gambar bawah nie. Muehehe :)


  • Pergi ke Dashboad > Design > Edit HTML dan tick Expend Widgets
  • Tekan ctrl + f dan cari kod nie ]]></b:skin>
  • Copy code dibawah dan copy paste kat code di bawah ni DIATAS code ]]></b:skin>
#comments-block{
margin:0;
padding:0;
}

#comments-block .comment-author{
background:#000000 !important;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding:5px;
font-size:15px;
font-weight:bold;
border:1px solid #000000;
}

#comments-block .comment-body{
margin: 0;
font-size: 16px;
border-left: 1px solid#000000;
border-right: 1px solid#000000;
margin-top: -5px; /*position*/
padding: 5px;
}

#comments-block .comment-footer{
margin:0;
font-size: 12px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
margin-top: -12px; /*position*/
padding: 5px;
}

#comments-block .deleted-comment{
font-style:italic;
color:gray;
}

#comments-block .comment-author a{
color:#ffffff !important;
}

#comments-block .comment-footer a, .comment-body a{
color:#000000 !important;
}
  • Gantikan code #000000 dengan kod warna yang korang nak untuk cantikkan comment box korang. Macam aku, aku buat warna grey, sesuai dengan background blog aku. Kalau korang nak code warna, boleh cari kat SINI
  • Then, tekan butang save dengan perasaan gembira ! :D Tapi kalau nak preview dulu, tengok-tengok dulu pun takpe jugak :)


Selamat mencuba! :D Berusaha lah dengan bersungguh-sungguh! :D


You May Also Like

8 comments