Tutorial Customize Comment Box Style #1
17:43 - 8 comments

CommentBox Style
Assalamualaikum dan Salam hujung minggu
Sepatutnya entri ini dipublish semalam,entah kenapa takde mood pulak nak update semalam,so terbantutla sehingga ke hari ini.Maaf ye pengrequest.Alhamdulillah design blog berubah lagi x) tema blog kali ini lebih kepada simple,nanti adam update di lain entri ya ? semalam check account ask.fm,tengok ada yang request adam tentang style commentbox di blog adam ,so harini adam nak ajar macam mana nak buatnya.Tutorial ini sesuai untuk pengguna denim template and simple ya.

  • Dashboard > Template > Edit HTML > Tekan simbol belah kiri
  • CTRL+F search =  /* Comments
  • Delete semua code di bawah kod atas tadi dan copy code yang diberi di bawah:
.comments h4 {
padding:9px 3px 10px;
margin:0 0 15px;
letter-spacing:1px;
border-bottom:1px solid #eee;
text-transform: uppercase;
text-align: center;
font: 11px calibri;

}
.comments .comments-content .loadmore a {
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
.comments .comment-thread.inline-thread {
background-color: transparent;
}
.post ol {
counter-reset: countcomments;
}
.comment-thread li:before {
display:none;
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;border:2px solid #ddd;
z-index: 2;
position:relative;
font: 11px calibri;border-radius:50%;
text-transform: uppercase;
color: #333333;
padding-left:8px;
padding-top:3px;
background:#fff;
margin-top:7px;
margin-left:10px;
width: 25px; /*image-width size*/
height: 25px; /*image-height size*/
}
.comment-block{
background:#FCEFDC;
padding:5px;
border:1px solid #fff;
margin-left:65px;position:relative;
}
.comment-header{
font:11px calibri;
text-transform: uppercase;
background-color:#FFFFFF;
border:1px solid #ddd;padding:5px;
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0;}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{
margin-top:0;
}
.comments .comments-content .datetime a{
color:#555555;font:11px calibri;text-transform: uppercase;float:right;text-decoration:none;
}
.comment-content{
font: 12px Calibri;
background:#fbfbfb;
padding:8px;
border: 1px solid #f2f2f2;
color:#333;
}
.avatar-image-container{background:#E7D8BF;padding:5px;
}
.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.avatar-image-container img:hover{
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}
.feed-links {
clear: both;
line-height: 2.5em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
font: 12px calibri;
color: white;
float: left;
}
#blog-pager-older-link {
font: 12px calibri;
color: white;
float: right;
}
#blog-pager {
text-align: center;
}
  • Ubah text yang adam merahkan dengan citarasa warna sendiri
  • Preview dan save
  • Kemudian pergi ke bahagian setting belah kiri > post and comments 
  • Comments > Pilih Embed
SIAP ! Harap dapat membantu :) Tak paham ? Komen di bawah ya.


LEAVE YOUR COMMENT HERE, I WOULD APPRECIATE THAT TQ
No spamming.
No harsh words.
Sign in to comment.
Mind your language.
I will reply your comment within 24h.
Mind to click my nuffnang, I will click yours back.

8 comments:

  1. wah bgs tutorial faiz ni
    penuh bermanfaat sape yg nak customize komen box

    ReplyDelete
  2. thanks banyak2. tuto mu ni menjadi. tq sangat. dah banyak cuba tuto lain tapi tuto ni jugak yang berkesan. :)

    ReplyDelete
  3. Hyep.. I'm using this tuto :D thanks its work ^___^

    ReplyDelete
  4. Assalamualaikum. Tutorial awak menjadi kat blog saya. Terima kasih :)

    ReplyDelete