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 :>

2 comments:

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

    ReplyDelete
  2. Izin pakai akak, this Tutorial help me for design my comment box. Semoga allah mudahkan urusan akak nanti, Amiin

    ReplyDelete

Instagram