Tutorial Comment Box Like Me *Mine*

** Assalamualaikum  **

Hai hai o/ Ada orang request tuto la :D Tutorial kalini pasal comment box macam Lia punya .. Unik, kan ? \uniklah sangat -.-/ 

Ni lah comment box yang Lia cakap ni ... And ni yang org request ;

\ignore yang Lia reply/

Tutor ni Lia try dekat simple template je. Template lain Lia tak sure lah . Tapi, apa salahnya korang try dulu. Ye dak? ;_;

Sign in > Dashboard > Template > Edit html > Tick expand widget template

Ctrl + F cari kod /* Comments

Nanti korang akan nampak anak-anak kod dia, kan ? Korang delete anak-anak kod tu, and ganti dengan kod bawah ni .

.comments {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #DAEDFF;
border-left:5px solid #FFF;
border-right:5px solid #FFF;
border-top:5px solid #FFF;
border-bottom:5px solid #FFF;
padding: 10px;
}
h4{
background:#DED2FF;
border: solid 1px #D2E7FF;
border-radius: 10px;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
padding: 5px;
}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(http://1.bp.blogspot.com/-c_uMJDsBJ-Y/TwNfgKhNS1I/AAAAAAAAAko/RfA-D38Baus/s1600/onibunnie.gif);
}
.comments .comments-content .loadmore a {
border-top: 1px solid #999999;
border-bottom: 1px solid #DAC3FF;
}
.comments .comment-thread.inline-thread {
background-color: #E7D8FF;
border: solid 2px #CC99FF;
border-radius: 10px;
}
.comments .continue {
border-top: 2px solid #B2C8FF;
}

.comment-content{
background:url(http://i.imgur.com/ozUAZ.png);
padding:13px;
border: solid 2px #cc99ff;
border-radius:10px;
color:#666;}
.avatar-image-container{background:#DDC9FF;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:#fff;
border: solid 2px #cc99ff;
padding:8px;
float:right;
border-radius:30px;
font:10px arial;
margin-top:10px;}

Yang dimerahkan tu, pandai-ii lah korang tukar . Lia malas nak gitau sebab banyak sangat -.-'

Preview, kalau xde error, laju-ii tekan save template.

Siap ? Eh, belum lagi . Next,

dashboard > settings > post and comments > comment location > tekan embedded .

Tak faham ? Tengok gambar bawah ni ;

Okay, tu je . Btw, ni kod Lia sendiri. Dengan bantuan kod  dia dan dia . 

NO RE-POST / RE-TUTORIAL . HARAM TAU !

Bye2. Assalamualaikum :*