Tutorial : Cute Chains Comment Box

Preview :

Tuto ini boleh digunakan untuk Simple dan Denim Template :) So if you wish to have this comment box refer this tuto ..
Kalau sebelum ni korunk guna pop up window setting jadi step 1 :
1. Go to Setting > Post And Comments > Comment Location Choose Embedded > Save settings.
2. Template > Edit Html > Click Box Code > CRTL+F .. Find this code :
/* Comments
3. Dah jumpa belum ?? Kalaudah jumpa delete all code bawah /* Comments
4. Copy this code and paste di bawah code /* Comments
.h4 {
background:#D1F4FE;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
font:30px ttn !important;
}
.comments {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #ffffff;
border:5px solid #E0ECF8;
padding: 10px;
}
.comment-block{
background:#FFF;
padding:10px;
border-radius:10px;
border:3px dashed #FFF;
}
.comment-content{
background:#FEF3F3;
padding:13px;
border-radius:10px;
color:#666;
border:3px dashed #FEE8E8;
}
.datetime{
background:#fff;
padding:5px;border:2px solid #FEE8E8;
float:right;
border-radius:10px;
font:10px arial;
margin-top:10px;
}
.secondary-text{
padding:5px;
background:#fff;
border-radius:5px;
float:-left;
border-bottom:2px solid #FEE8E8;
}
.avatar-image-container{
background:#FFE2E2;padding:6px;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) ;
}
.comments .comments-content .loadmore a {
  border-top: 1px solid #FFF;
  border-bottom:2px solid #FEC9C9;
}
.comments .comment-thread.inline-thread {
  background-color: #FFF7F7;
}
.comments .continue {
  border-top:2px solid #FEC9C9;
}
Credit Code : Wana
 EDIT :
Coding di atas semua macam dalam preview picture, kalau tak nak edit pun tak pe..
ABC :  Tukar warna Background , warna Border ..  kalau nak letak gambar pada background just copy dan gantikan code ini : background: url(URL IMAGE) fixed;
Godeh mana yang perlu.. hehe :P
5. Preview dulu... Kalau tak ada error..
6. Save ,
Try komen dekat kotak komen jadi tak ??? Panjang-panjang balas komen blogger :)


6 comments

Terima kasih kerana sudi menulis komen di blog Nurrul, sebarang pertanyaan akan dibalas secepatnya. Jazakallahu khairan