Tutorial Customize Comment Box Style #2
14:26 - 11 comments

Assalamualaikum dan Salam tengahhari
Untuk sesiapa yang berminat untuk customize comment box diorang boleh cuba tutorial ni :) Tutorial ni sesuai untuk pengguna template denim dan simple sahaja.

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

  • Paste bawah code /* Comments
  • Ubah warna dan background ikut citarasa
  • Kemudian pergi ke bahagian setting belah kiri > post and comments 
  • Comments > Pilih Embed
    SIAP ! Harap dapat membantu :) Tak paham ? Komen di bawah ya.

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.

11 comments:

  1. kalau cik akak buat nie...kompem tak menjadi...koding kot memang tak boleh kasi mantap...
    tang blink2 je mata....

    klik nuffnang :)

    ReplyDelete
  2. Assalamualaikum, singgah dan follow di sini. Jemput ke blog saya pula ya. Terima kasih.

    ReplyDelete
  3. Assalamualaikum, singgah dan follow di sini. Jemput ke blog saya pula ya. Terima kasih.

    ReplyDelete
  4. wahh thanks kongsikan tips nie :) boleh try nie

    ReplyDelete
    Replies
    1. I'm not using this tuto but I want to say that I like this simple comment box..
      could you make tuto for this comment box? >_____<

      Delete
  5. ppaaan nak guna ni tapi simpe template fungsi tk ? btw mintak komen e entri ni paaan siggah hihi lawaat belog paaan boleh n komen sikit? hihi http://ifharzcho.blogspot.com/2013/12/kenali-owner-belog-yang-hensem-ini.html

    ReplyDelete