Tutorial: Customize Comment Box 3

May 25, 2014

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 {
color:#333;
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 4px;
font-weight: normal;
font-family: Short Stack;
font-size: 11px;
line-height:18px;
text-align: center;
border-top: 5px double #ddd;
border-bottom: 1px solid #ddd;
}
@font-face {
font-family: 'Short Stack';
font-style: normal;
font-weight: 400;
src: local('Short Stack'), local('ShortStack'), url(http://themes.googleusercontent.com/static/fonts/shortstack/v4/6Lbgh4PDdLpSiP41rQoGa4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.comment-content{
font-weight: normal;
font-family: Short Stack;
font-size: 11px;
padding: 4px;
border-bottom: 1px solid #f0f0f0;
}
.avatar-image-container{background:#ddd;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) ;}
.datetime{
background:#eee;
padding:4px;
font-weight: normal;
font-family: Short Stack;
font-size: 11px;
float:right;
margin-top:10px;
}
.secondary-text{
background:#eee;
padding:4px;
font-weight: normal;
font-family: Short Stack;
font-size: 11px;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
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.

12 comments: