Tutorial Customize Comment Box Style #1
17:43 - 7 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.

7 comments: