Tutorial Customize Comment Box Style #4
15:34 - 6 comments


SIMPLE TEMPLATE & DENIM TEMPLATE ONLY

  • Dashboard > Template > Edit HTML
  • CTRL + F search /* Comments
  • Delete semua anak-anak codes bawah code /* Comments tadi dan copy code 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;
}

  • Paste bawah code /* Comments
  • Ubahwarna dan background ikut citarasa
  • Teks warna MERAH tu tukarkan dengan warna pilihan
  • Kemudian pergi ke bahagian setting belah kiri > post and comments
  • Comments > pilih embed

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.

6 comments: