TUTORIAL | Comment Box #1



بِسْمِ ٱللّٰهِ ٱلرَّحْمٰنِ ٱلرَّحِيمِ
 Assalamualaikum w.b.t



Haii korang :)) harini aku nak buat satu tutorial yang di request oleh Kak Wawa kita iaitu kotak komen style macam aku tu hehehe.  so, jum mula;
  • Log in Blogger  >  Dashboard  >  Template
  • Click kat dalam kotak tu dan cari kod ni;

/* Comments 
  • Delete kod bawah  /* Comments tadi sampai .feed-links {
  • Pastikan jangan delete kod bawah .feed-links { tau :)
  • Lepastu, copy code bawah ni dan pastekan bawah  /* Comments tadi
.comment-content{
background-color: #f8f9e8;
padding:10px;
border-radius:20px;
border:1.6px dashed #a1385f;
color:#000;
font-family: Short Stack ;
font-size:12px;
}
.comments {
height:300px;
overflow:auto;
font-size:12px;
}
h4{
height:20px;
background:#751c3d;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
text-transform:uppercase;
font-family:Short Stack;
}
.comment-block{
background-color:#f7c1d5;
padding:5px;
border-radius:10px;
border:5x dashed #000;
font-size:11px;
}
.avatar-image-container{background:#751c3d;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:#61386d;
padding:6px;
float:right;
font:10px arial;
margin-top:10px;}
.secondary-text{
padding:6px;
background:#fff;
border-radius:10px;
float:right;
border:2px solid #ade2e3;
font-size:10px;
}
.comments li {
list-style: none;
}
.deleted-comment {
font-style:italic;
color:gray;
}

  • Preview. Kalau takde apa apa error, boleh save :)
  • Kod colour # boleh tukar mengikut warna blog masing masing :)
Gumawo kerana membaca entry kali ini :)
Jumpa lagi di tutorial seterusnya :))
Bye bye :>

1 comment:

  1. Thanks.. saya guna tuto ni ye.. nanti nak ubah warna

    ReplyDelete

Instagram