Comment Box Cute Style #1

Assalamu'alaikum sahabat blogger! Siapa yang masih jadi visitor tetapnya blog Catatan Aisha? (Kalau nggak ada aku nangis nih 😭 #maksa)
Jadi, ceritanya Tasya request cara ngehias komen box kalau Aisha nggak bussy. Faktanya, Aisha itu jarang sibuknya, kok. Tapi bukan berarti kalian boleh minta yang aneh-aneh seenaknya ke Aisha lho (wah, pelit 😒). Boleh si request, tapi nggak semestinya bisa langsung kalian dapet, soalnya ada banyak kemungkinan yang membuat aisha nggak bisa menuhin request, kayak kuota abis (ini sering terjadi), ga ngerti request kalian, atau males (penyakit yang parah, maapkan daku 😔).
⇡⇡⇡
Ini ngomongnya kebanyakan tutorialnya belum juga yak 😂😂😂

hehehe... examplenya komentarnya kak Ann^^
  • Log in akun blog
  • Dashboard >> Template/Tema >> Edit HTML
  • CTRL + F, cari kode:
/* Comments

  • Lihat gambar di bawah ini:

  • Hapus keseluruhan kode YANG ADA DI ARENA /* Comments, kecuali garis putus-putusnya.
  • Ganti dengan kode ini:
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px dotted #FFBCBC;
border-bottom: 1px dotted #FFBCBC;
}
.comments .comment-thread.inline-thread {
background-color: transparent;
}
.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;border:2px dotted #FFBCBC;
z-index: 2;
position:relative;
font-size: 14px;border-radius:50%;
color: #333333;
padding-left:8px;
padding-top:3px;
background:#FFE7E5;
margin-top:7px;
margin-left:10px;
width: 24px; /*image-width size*/
height: 23px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 13px;
color: #666666;
}
.comment-block{
background:#FDF0F0;
padding:5px;
font: Montserrat 13px gray;
border:3px solid #EBC2C2;
margin-left:65px;position:relative;
border-radius:10px;
}
.comment-header{
font-size:18px;font-family:Gochi Hand;border-radius:10px;
background-color:#FFFFFF;
border-top:1px dashed #F1D0D0;padding:5px;
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0;}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{
margin-top:0;
}
.comments .comments-content .datetime a{
color:#67A4C7;font:11px consolas;float:right;text-decoration:none;
}
.comment-content{
font: 13px Short Stack;
background:#FBE7E7;
padding:8px;
border-radius:10px;
color:#848484;
}
.avatar-image-container{background:#FFBCBC;padding:5px;border-radius:10px;
}
.avatar-image-container:hover{background:#FFBCBC;padding:5px;border-radius:20px;
}
.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:20%;}
.avatar-image-container img:hover{
border-radius:20px;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}

  • Save
Untuk warna, tinggal edit-edit sendiri ya. Kode warnanya yang udah dikasih warna merah itu. Aisha lupa itu kode warna maksudnya ini warna bagian mana dan itu warna bagian mana. Saran Aisha tinggal sering-sering di Simpan Tema terus lihat blog, gitu-gitu terus setelah ganti kode warna, nanti juga kamua tahu sendiri 😁. Kalau masih ga paham juga dan nggak berhasil bilang aja ya. Kali Aisha bisa bantu...

Untuk credit kode ini, maafkan aisha karena aisha tahu kode ini dari tutorial blognya kak Fia yang dulu, tapi gatau sekarang masih ada atu nggak.


4 komentar:

  1. Makasih banyak Aishaaa :)

    But idk why font nya ku ganti gabisa?:(

    BalasHapus
  2. Udah deh aishaaa,aku hanya ceroboh tadi wkwk,

    btw Jazakillah Khairan :)

    BalasHapus
  3. boleh ku pakai gak tutorialnya? :>

    BalasHapus