Kotak Komen New Style!


Assalamualaikum. Bagi menjawab pertanyaan Shadhira, Yura akan buat tutorial cam mane nak buat kotak komen macam kat dalam gambar. Code tu dari Wana.

  • Dashboard > Template > Edit Html > Click Nombor 12 atau 13 atau 15 > Ctrl+F  (Pastikan anda click dlm kotak html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
/* Comments
  • Dekat bawah code tadi ada dashed.Delete code anak2 dia tu .
  • Gantikan dengan code di bawah ye.
.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;
}
  • Preview. kalau tak de ERROR, Save !
  • Korang boleh tukar colour die kalau nak .

25 comments

  1. Replies
    1. hmm peliknye, tapi Yura jadi je. Athir pakai template ape?

      Delete
    2. Awak pakai simple template or blogskin :0

      Delete
    3. oh patutla x jadi, cuba paste codes yang saya bagi tu dekat ATAS .post{

      Delete
  2. yura.. thanks.. dah jadi.. tapi dhira kena search dulu ]]> then paste coding lain.. then dhira cari #comments-block .comment-body p { dan paste kan kode yg yura bagi kat atas koding tadi.. dah jadi.. tq.. tapi kan yura, sblumni dhira ada buat box dekat comment tue(yg kale grey), xtahu pulak nk buang kat mne, kalau boleh, mintak yura view blog dhira,, tq yura.. i lebiu..

    ReplyDelete
    Replies
    1. ok nnt Yura tengok blog awak ye :)

      Delete
  3. hai! dah buat thanks alot ya? :D

    ReplyDelete
  4. nice tutor but tahu mcm mana nak buad comment box for blogskin..? thnks :)

    ReplyDelete
  5. Kenapa saya buat x menjadi ya?saya guna denim template.mohon bantuan :)

    ReplyDelete
    Replies
    1. hmm cuba awak tick expand widget template.

      Delete
  6. yura, kalau untuk blogskin ade tak?

    ReplyDelete
    Replies
    1. ohh itu Yura tak cuba lagi. Nanti kalau dapat ,Yura bagi tau ye ^^

      Delete
  7. erm dah jaadi yeay thnks for tuto yg manyak membantu.. but nak tnya kalau nak buang kotak komen yg asal yg camner ek? xcntik lah nmpk..nk pakai yg akak punya jer

    ReplyDelete
    Replies
    1. hmmm Yura tak faham maksdnya macam mane tu??

      Delete
  8. Assalamualaikum kak Yura :D terima kasih pasal tutorial ni mnjadi ^^

    ReplyDelete
    Replies
    1. waalaikumussalam, jadi ke ?? Alhamdulillah sepp siket :D

      Delete
  9. Saya nak share tuto ni boleh kan? saya letak credit to kak yura ye? :)

    ReplyDelete
  10. Assalam nakk tanyaa nehh . tuto nehh untokk blogskinn ke ? Edd buadd takk jadikk pongg . Hmmm :/

    ReplyDelete
  11. Haah ni bukan untuk blogskin. Ini utk template biasa. Nanti Yura updatekan untuk blogskin. Thanks sbb tanye ^^

    ReplyDelete
  12. Unnie . If nak tukar font kan , nak tukar code yang mana eh ?

    @font-face{
    font-family:ttn;
    src:url(http://static.tumblr.com/dep4vzc/82Km8jmz4/tutano_cc_v2.ttf);
    }

    ReplyDelete
    Replies
    1. tukar code font face tu, dan font family sekali. Kalau tak nak guna font face, boleh guna font biasa mcm arial,times new roman dan sebgainya.

      Delete

Awak mehla komen? satu komen pun jadilah :')