Kotak Komentar Cantik

Kali ini saya mau share tentang cara mempercantik kotak komentar versi kedua , sebenarnya nggak jauh beda sama yang pertama, cuma ada beberapa kode yang saya edit ulang... ini dia contohnya :

Bagus kan ???

Nih langkah-langkahnya...

1. Masuk ke Dashboard
2. Template
3. HTML
4. Tekan Ctrl+F dan temukan kode berikut ini

/* Posts

5. Jika sudah ketemu kodenya, perhatikan kode yang ada dibawahnya kurang lebih seperti bawah ini :

/* Posts
----------------------------------------------- */
h3.post-title {

  margin: 0;
  font: $(post.title.font);
}

.comments h4 {
  margin: 1em 0 0;  font: $(post.title.font);
}

.date-header span {
  color: $(date.header.color);
}

6. Kode yagn berwarna merah, anda hapus dan anda gantikan dengan kode di bawah ini

.comment-content{
background:#FFE2E2;
padding:13px;
border-radius:10px;
color:#666;}

h4{
background-image :url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsakIBQFMEMGRF-Mi49An31Av-bVftmkW7dHGlTg1FqJgAlS3jgZFb38enWtfVcX8iFypSg966TfIZ0SmBpKAHjoUqgMk9-H3F2AKr3zUt2_qCcBx6wKc64eXg-hALQ9zBa-XujwI4rGum/s1600/pbg016-dot-1.png);
text-align:center;
color:#ff6094;
text-shadow:1px 1px 2px #888;
font:30px kristen ITC;
border-radius:10px;
border:3px dotted #fe6698}


@font-face{
font-family:ttn;
src:url(http://static.tumblr.com/dep4vzc/82Km8jmz4/tutano_cc_v2.ttf);
}

.comment-block{background-image :url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsakIBQFMEMGRF-Mi49An31Av-bVftmkW7dHGlTg1FqJgAlS3jgZFb38enWtfVcX8iFypSg966TfIZ0SmBpKAHjoUqgMk9-H3F2AKr3zUt2_qCcBx6wKc64eXg-hALQ9zBa-XujwI4rGum/s1600/pbg016-dot-1.png);
padding:10px;
border-radius:10px;
border:3px dotted #fe6698}

.avatar-image-container{background:#fe6698;padding:2px;border-radius:10%;}


.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:5%;}

.avatar-image-container img:hover{
border-radius:10%;
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:10px;
font:10px tabitha;
margin-top:10px;}

.secondary-text{
padding:8px;
background:#fff;
border-radius:10px;
float:right;
border:2px solid #fe6698;
}

}

7. Preview Template, jika nggak Error langsung Simpan Template dan Refresh Blog kamu, lihat Kotak komentar kamu.. Berhasil kan ??

Note :

Jika sebelumnya anda telah melakukan perubahan pada kotak komentar dasar, sebaiknya anda hapus terlebih dahulu kode tersebut sebelum mengikuti tutorial yang ini.

Karena cara mengubah kotak komentar menjadi lebih bagus itu terkadang ngg langsung berhasil, perlu kerja keras berkeringat terlebih dahulu baru bisa, hihihi.. lebay amat yak... 

Oke selamat mencoba