Hafiz Zulkafly

Tutorial : Customize Your Comment Box

Ahad, Mei 05, 2013

Assalamualaikum

Lama tak update blog , rindu blog *peluk blog* okay , 4 hari lepas dapat request tutorial . Request tutor apa ? Meh tengok sini ;


Masa tu tak dapat buat , sebab broadband dah reach quota , hari ni aku subscribe internet dekat phone , then connect ke laptop , untuk buat this tutor , sebab takut terlupa . comment box yang dia tanya tu macam mana ? yang macam ni ha ;



Okay macam tu , tapi first sekali aku nak bagitau , this tutor akan menjadi kalau awak pengguna SIMPLE TEMPLATE sahaja . okay jom mula ^^v ;

p/s ; tutor ni mungkin pening sikit , so follow slow slow :D

1. Dashboard > Setting > Post and Comments > Comment Location > Full Page . Tak jumpa boleh rujuk gambar bawah ;


2. Template > Edit HTML . CTRL + F atau F3 this code ;


/* Comments
----------------------------------------------- */

Dah jumpa code tu , delete code yang ada dekat bawah dia TAPI jangan delete semua , delete sampai jumpa code bawah ni , then stop from deleting ;


/* Accents
---------------------------------------------- */


3. Kemudian copy and paste code ni dekat bawah


/* Comments
----------------------------------------------- */  ;



#comments-block aa {
margin: .5em 0;
}
#comments-block dd {
background:#fff;
margin: 0;
font: normal 12px;
border-left: 1px solid #232323;
border-right: 1px solid #232323;
margin-top: -9px;
padding-left:10px;padding-right:10px;padding-top:15px;padding-bottom:15px;
}
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
#comments-block dd.comment-footer {
background:#232323;
margin:0;
font: 8px tt;
text-transform:uppercase;
margin-bottom: 20px;
margin-top: -12px;
padding-left:10px;padding-top:5px;padding-bottom:5px;
}
#comments-block dd p {
margin: 0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:white;
}
#comments-block .comment-author{
background: #232323 !important;
padding-bottom:10px;padding-right:10px;padding-top:5px;padding-left:10px;
font:15px bebas;
letter-spacing:2px;
}
@font-face{
font-family:bebas;
src:url('http://static.tumblr.com/q29fumh/i3xmldrl4/bebasneue.otf')
}
#comments-block .deleted-comment{
font-style:italic;
color:white;
}
#comments-block .comment-author a{
color:#fff ;
}
#comments-block .comment-footer a, .comment-body a{
color:#fff;
}

4. Edit and Save . Kemudian preview .




12 ulasan

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED