hai..kemarin aku buka page "Free Stuff" ternyata ada yang tanya cara membuat kolom komentar seperti punyaku.Mudah kok ikuti tutorial ini
Preview :
- Pergi ke Dashboard > Setting > Post and Comments > Coment location > Pilih Embedded
- Pergi ke Blogger Dashboard > Template > Edit HTML
- Cari code .post {
- Paste codes di bawah ini di atas .post{ 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);
}
.comment-block{background:#FEF3F3;
padding:10px;
border-radius:30px;
border:3px dashed #FEE8E8}
.avatar-image-container{background:#FFE2E2;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;
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;
}
- Warna text, background ubah sendiri sesuai yang kamu mau
- Preview . Save
Credit : Wanaseoby
Ini yang ke satu ya..nanti aku post comment box styling yang lain
Makasih kak :)
ReplyDeletesama sama // kunjung lagi
Deletemakasih tutorialnya. ^^
ReplyDelete