Kotak Komentar Blog Versi Cewek

Sahabat Blogger.., Ingin mempercantik tampilan Kotak Komentar anda ? seperti punya saya yang ini lho....

mau ngg ?? kalo mau yuk ikuti langkah-langkah berikut ini.

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. Ada kan ? oke bagus, selanjutnya perhatikan kode yang berwarna merah di atas, ganti kode tersebut dengan kode dibawah ini :

.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;
}

7. Pratinjau Template sebelum menyimpan perubahan,
8. Jika sudah sesuai dengan selera anda, maka pilih Simpan Template dan refresh blog anda.
9. Berhasilkan ??

Note :

Jika belum berhasil, anda coba berfikir sejenak, dimanakah letak kesalahannya, kemungkinan sebelum menggunakan kode ini anda telah memasukkan kode lain untuk mempercantik tampilan Kotak Komentar anda, jadi semuanya tergantung kreativitas anda dalam memahami kode HTML ini, sebelum saya berhasil membuat kotak komentar saya menjadi sesuai keinginan saya, saya banyak mengalami kegalauan akibat kodenya tidak berfungsi sebagaimana mestinya, hehe sebenarnya sih bukan kodenya yang tidak berfungsi, hanya karena kita saja yang salah meletakkan kodenya, atau terdapat perbedaan pada template yang kita gunakan.. SOo,,. jangan tergantung pada tutorial ini yaa.. Gunakan kreatifitasmu ....

Baca Artikel Lainnya