Cute Comment Box

by - August 26, 2017

Hasil gambar untuk boboiboy galaxy
Hasil gambar untuk greeting image assalamualaikum png
Pagi ini qa Iska~ tanya bagaimana cara membuat kotak komentar atau yang populernya istilahnya itu commentbox seperti yang Shafia punya. Previewnya tak liatin nih, dan nanti Shafia kasih kodenya
PREVIEW :
  1. Masuk akun blogger
  2. Template > Edit HTML
  3. Tekan bersamaan Ctrl + F
  4. Cari kode /* Comments
  5. Di bawah kode tersebut, kan ada kode garis-garis putus, nah, di bawah garis-garis putus itu ada banyak sekali kode. Kamu block semua kode itu sampai ada kode /* Header, atau kode /* Widgets pokoknya semacamnya lah
  6. Setelah itu, ganti kode yang kamu block tadi dengan kode di bawah 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:#F9FAE0;
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:#FFF6E4;
padding:5px;
font: Montserrat 13px gray;
border:3px solid #FFBBBB;
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 #66C8FF;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 Montserrat;
background:#F1FBFF;
padding:8px;
border-radius:10px;
color:#848484;
}
.avatar-image-container{background:#FFBCBC;padding:5px;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:20%;}
.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) ;}
Klik save. Tips : sebaiknya kamu Expand Widget Template dulu sebelum melakukan tutorial di atas supaya kode badan blog kamu lebih aman. Dan di situ terdapat kode warna, kamu bisa ganti sepuasnya sesuai yang kamu mau.

You May Also Like

3 komentar

  1. Aduh dikasih code nya.. Makasih yah syangg 😘😘😘..
    Itu yang di hapus gak cuma yg di code coment doang tapijuga yg di header dan widget yah?

    ReplyDelete
    Replies
    1. ya enggak kak, kalau gitu, nanti blognya rusak
      yang dihapus cuma bagian /* Comments aja ya

      Delete
  2. Aku udah coba hapus bagian comen itu lalu aku ganti dgn code yg kamu kasi tpi hasilnya tampilannya malah putih semua.. Yg ada cma foto , dan nama komen. Intinya gk bisa diterapin 😔😔 jadi aku pkai ttorial dri goole.

    ReplyDelete