TUTORIAL : CUTE CHAINS COMMENT BOX


sebelum mulakan tuto,elokklah bismillah dahulu
1. Go to Setting > Post And Comments > Comment Location Choose Embedded > Save settings.
1.template->edit html->click box code -> ctrl+f->paste
 /* Comments
2. if dah jumpe ,delete sume code bawah /* Comments
3..h4 {
background:#FCDFFF;
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 
#FCDFFF;
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;
}


*if jadi comment and share ^-^ ..ain pon bru jumpe tuto ni..tuto sebelum ni tak menjadikyang diwarnakan light orange tu ,korang leh tukar dengan favourite colour ;)