Tutorial: Customize Comment Box 4

June 27, 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: #29324f;
text-align: center;
font: normal normal 14px 'oswald', times new roman, serif;
letter-spacing: 2px;
text-transform: uppercase;
padding: 4px;
border-bottom: 1px solid #ddd;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
.comment-block {
border-top: 1px solid #ddd;
padding: 2px;
}
.comment-content{
font:normal 12px Arial;
padding: 4px;
}
.comment-header{
font: 13px calibri;
letter-spacing: 1px;
text-transform: uppercase;
padding:5px;
}
.avatar-image-container{float:left;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;background:#ddd;padding:5px;}

.avatar-image-container img{
border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;
-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{
border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}

.datetime{display:none;}

.comments .comment .comment-actions a {
  background:#999;
  color:#fff;
  padding:2px 5px;
  margin-right:10px;
  font:10px sans-serif;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  transition:.2s linear;
  -moz-transition:.2s linear;
  -webkit-transition:.2s linear;
}
.comments .comment .comment-actions a:hover {
  background:#000;
  text-decoration:none;
  transition:.2s linear;
  -moz-transition:.2s linear;
  -webkit-transition:.2s linear;
}
.deleted-comment {
font-style:italic;
}
.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.

11 comments: