Tutorial: Customize Comment Box 2


PENGGUNA SIMPLE TEMPLATE DAN DENIM TEMPLATE SAHAJA

  • Dashboard > Template > Edit HTML 
  • CTRL+F search kod /* Comments
  • Delete semua kod di bawah kod /* Comments 
  • Copy kod di bawah:
.comment-content{
background:none;
padding:8px;
font-size: 13px;
font-family:Imprima;
color:#000;
}

.comments h4 {
padding:10px;
margin:0 0 15px;
border-bottom:1px solid #eee;
text-transform: uppercase;
text-align: center;
font:11px calibri;
}
.comment-block{
background:none;
}
.avatar-image-container{background:#E6E2D5;padding:5px;border-radius:50%;}

.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}
.comment-header{
margin-left: -40px;
background:url(http://25.media.tumblr.com/tumblr_ls0w5txuft1r3vazto2_250.png);
padding: 4px;
border-radius: 5px;
font: 11px calibri;
text-transform: uppercase;
color: black;
}
.datetime{
display:none;
background:#fff;
padding:8px;
float:right;
border-radius:30px;
font:10px arial;
margin-top:10px;}
.secondary-text{
padding:3px;
border: 1px solid #ddd;
border-radius: 3px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
color: black;
font: 12px imprima;
text-transform: uppercase;
float:right,top;
}
.secondary-text:hover{
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
font: 10px arial;
color: white;
float: left;
}
#blog-pager-older-link {
font: 10px arial;
color: white;
float: right;
}
#blog-pager {
padding: 4px;
text-align: center;
}

  • Boleh ubah teks yang Adam merahkan mengikut citarasa masing-masing
  • Preview dan save
  • Kemudian, pergi ke bahagian setting di sebelah kiri > post and comments 
  • Comments > Pilih Embed

Done.

Tutorial: Customize Comment Box 1


PENGGUNA SIMPLE TEMPLATE DAN DENIM TEMPLATE SAHAJA
  • Dashboard > Template > Edit HTML 
  • CTRL+F search kod /* Comments
  • Delete semua kod di bawah kod /* Comments 
  • Copy kod 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: black;
float: left;
}
#blog-pager-older-link {
font: 12px calibri;
color: black;
float: right;
}
#blog-pager {
text-align: center;
}
  • Boleh ubah kod yang Adam merahkan mengikut citarasa warna masing-masing
  • Preview dan save
  • Kemudian, pergi ke bahagian setting di sebelah kiri > post and comments 
  • Comments > Pilih Embed

Done.