Tutorial Customize Comment Box Style #3

Sunday, May 25, 2014

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:#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;
}

  • Paste bawah code /* Comments
  • Ubahwarna dan background ikut citarasa
  • Kemudian pergi ke bahagian setting belah kiri > post and comments
  • Comments > pilih embed

You Might Also Like

7 Like This Entry:

  1. nak request tuto boleh?
    tutorial about me :)

    ReplyDelete
  2. yeahhh XD nak guna yg nih :) hehehe XD
    thanks buat tuto nih ^__^

    ReplyDelete
  3. Akhirnya. :) Berjaya customize comment box saya. Thanks Adam.

    http://kaktusoren.blogspot.com/

    ReplyDelete