Tutorial: Comment Box

Assalamualaikum


Hi, bertemu kembali selepas beberapa hari leya hiatus. Sebelum ni ada beberapa orang tanya acane leya buat kotak komen acani *rujuk gambar di atas* Leya bagi code korang adjust warna, border radius mengikut keinginan korang ye.

.comment-content{
background-color: #CEECF5;
padding:10px;
border-radius:10px;
font-family: 'Century Gothic';
font-size:14px;
}
.comments {
height:400px;
overflow:auto;
font-size:13px;
font:Century Gothic;
}
h4{
text-align:center;
color:#000;
text-shadow:2px 2px 3px #888;
}


.comment-block{
background-color:#F78181;
padding:5px;
border-radius:10px;
border:3px dashed #;
font-size:11px;
}
.avatar-image-container{background:#CEECF5;padding:3px;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:10%;}
.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:#CEF6EC;
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;
font-size:11px;
}

  • Copy code di atas
  • Dashboard --- Template --- Edit HTML
  • Cari code /* Comments----------------------------------------------- */
  • Padam code di bawahnya sehingga jumpa code .feed-links {
  • Start dari .feed-links { tuh jangan padam okey
  • Lepas dah padam code yg disuruh korang pastekan code yang leya bagi di bawah /* Comments----------------------------------------------- */

13 comments:

  1. wah, menarik ni :)

    ReplyDelete
    Replies
    1. Terima kasih kak leya, dah jadi :)

      Delete
  2. kotak komen ni lawaaa laa leyaa. comel sangat! hehe

    ReplyDelete
    Replies
    1. hehehhe. try laa kak. nanti komen box akak pun comey

      Delete
  3. Woah nice . Btw ada tak tutorial macam kotak komen ni , Letak kan di atas . Selalunye kita kene scroll semua komen kebawah tu baru ada kotak komen ... So ada tak "kotak komen
    tu di atas "komen" . haha boleh paham ke tak ni ..

    ReplyDelete
  4. Huhu... Dah jadi. dugaannya nak buat. btw thank you for the tuto ^_^

    ReplyDelete
  5. salam leeyya akak kalao panjang panjang gini mikir panjang nak buat kihkihkih

    ReplyDelete
  6. knp x jadi akak..mohon ajarkan saya yer

    ReplyDelete
  7. Wow! Menjadik!! Thank you very much!! <3

    ReplyDelete