} -->

Sunday, January 13, 2013

Tuto : Cantikkan Comment Box


Assalamualaikum . Ada nawaitu nak cantikkan comment box anda ? Jom try tuto ni. Nurin edit sendiri code ni but Nurin ada ambil serba sedikit code daripada Unnie Yura .

1-Dashboard > Template > Edit HTML

2-Search for this code(Pastikan anda click dalam kotak html dulu sebelum tekan Ctrl+F ) and click ENTER !
 </style></head>

3-Copy code di bawah dan Paste kan dia Atas code yang uolls cari tadi

.comment-content{
background:#FFE2E2;
padding:13px;
border-radius:30px;
color:#666;}
h4{
background:#D1F4FE;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
font:30px ttn !important;}
@font-face{
font-family:ttn;
src:url(http://static.tumblr.com/dep4vzc/82Km8jmz4/tutano_cc_v2.ttf);
}
.author-comment{
margin:.5em 0;
background : #FFE1EA url(http://i.imgur.com/mPuGsVJ.png) no-repeat right bottom;
border: 3px dotted #FFC6D6;
border-radius: 30px;
padding: 9px;
}
.author-comment.blog-author {
margin:.5em 0;
background : #FFCDFF url(http://i.imgur.com/VKNlfso.png) no-repeat right bottom;
border: 3px dotted #FFB2FF;
border-radius: 30px;
padding: 9px;
}
.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;
padding:8px;
float:right;
border-radius:30px;
font:10px arial;
margin-top:10px;}
.secondary-text{
padding:8px;
background:#fff;
border-radius:30px;
float:right;
border:2px solid #FEE8E8;
}

4-Preview post yang ada comment and if tak dak Error , terus Save !

Merah : warna background
Biru : solid / dashed / dotted
Oren : URL gambar for reader's comment
Purple : URL gambar for author's comment
Hijau : warna for solid / dashed / dotted
Btw, hanya certain template je yang boleh pakai tuto ni . Idk why . Blog Nurin ni pun agak sensitive . Payah nak ngamkan dengan code code tertentu .

No comments: