Tutorial: Customize Comment Box 2


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

  • Boleh ubah teks yang Adam merahkan mengikut citarasa masing-masing
  • Preview dan save
  • Kemudian, pergi ke bahagian setting di sebelah kiri > post and comments 
  • Comments > Pilih Embed

Done.

18 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