Tutorial : Cantikkan Kotak Komen

Assalamualaikum w.b.t :)

Bismillahirrahmanirrahim. Disini Emma akan sediakan tutor macam mana nak cantikkan comment box ataupun kotak komen kat blog uolls ya :)

1. Dashboard > Template > Edit Html.
2. Tekan Ctrl+F serentak untuk mencari code dibawah ni.

/* Comments
3. Dah jumpa code tu? Okay sekarang copy code ni pulak. Tekan Ctrl+C serentak.

.h4 {
background:#81F7D8;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
font:30px ttn !important;
}
.comments {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #ffffff;
border:3px dotted  #F7819F;
padding: 10px;
}
.comment-block{
background:#ffffff;
padding:10px;
border-radius:10px;
border:2px solid #ffffff;
}
.comment-content{
background:#ffffff;
padding:13px;
border-radius:10px;
color:#666;
border:3px solid #F7819F;
}
.datetime{
background:#fff;
padding:5px;border:2px solid  #F7819F;
float:right;
border-radius:10px;
font:10px arial;
margin-top:10px;
}
.secondary-text{
padding:5px;
background:#fff;
border-radius:5px;
float:-left;
border-bottom:2px solid  #F7819F;
}
.avatar-image-container{
background:#F7819F;padding:6px;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) ;
}
.comments .comments-content .loadmore a {
  border-top: 1px solid  #F7819F;
  border-bottom:2px solid  #F7819F;
}
.comments .comment-thread.inline-thread {
  background-color: #ffffff;
}
.comments .continue {
  border-top:2px solid  #F7819F;
}
4. Pastekan code ni DIBAWAH code  /* Comments tadi. Maksudnya kat sini, uolls kena DELETE semua code yang tak berkaitan kat bawah /* Comments sebelum pastekan code yang Emma bagi ni. Contoh :


*klik untuk lihat lebih jelas

Nota kaki :

BIRU : warna untuk border yang berkaitan . Tekan sini untuk kod warna.
PINK : warna untuk background yang berkaitan.
HIJAU : uolls boleh tukar solid/dashed/dotted.
OREN : adjust ketebalan border yang berkaitan.

5. Preview dulu. Kalau takde error and uolls dah puas hati, baru click Save. Yay!


Itu sahaja, sekian terima kasih :)

No comments:

Post a Comment