You are here → Home √ Buat Kotak Thread Komentar Jadi Lebih Keren #1

Buat Kotak Thread Komentar Jadi Lebih Keren #1

Dipublikasikan oleh Ilham Bachtiar pada Monday, May 28, 2012

obachti 95 - Baru bisa share tutorial ini, kenapa saya bilang baru bisa. Karena pada 7 Mei kemarin sobat Muro'i El Barezy bertanya melalui komentar pada postingan Membuat Reply Comment System dengan mudah yang isinya begini "mantabss sob, kalo bikin koment yang kaya gini gimana sob" dan baru bisa saya jawab sekarang.  Nggak percaya, lihat screenshotnya :



Ya begitulah sedikit asal muasal gimana tercetusnya postingan saya kali ini, bagi saya kalau ada sahabat  yang bertannya namun belum saya jawab itu menjadikan beban tersendiri. Sebenarnya yang Sahabat El tanyakan adalah Desain Komentar pada Gambar desain 1, Namun disini saya berikan juga bonus kode CSS untuk desain yang lain.


Screenshot Desain 1
Berikut adalah kode cssnya :

#comments h4{background: url(http://bp0.blogger.com/_C6KkooKXCEw/SJGzpJXhKoI/AAAAAAAACGw/QZ7IzDBHgFU/s400/icon_comments.png) no-repeat 3px .3em;width:528px;font-size:16pxt;text-transform:sentence case;font-weight:400;line-height:1.5em;letter-spacing:0;color:#111;padding-left:27px;padding-top:0;margin:0}#comment-form {width:560px;}.comment-form {width:560px;}#comments-block{border:0 solid #ccc;width:510px;line-height:1.6em;margin:1.3em 0 1.5em}#comments-block .comment-author{background:#f6f6f6;border-top:1px solid #ccc;padding-left:10px;color:#111;margin:.5em 0}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-footer{padding-left:0;line-height:1.5em;font-size:9px;border-top:1px solid #ccc;margin:.25em 0 2em}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:left;padding-left:10px;border-left:3px solid #f0f0f0;margin:0 0 .75em}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic;color:gray}.owner-Body p{text-align:left;color:#000;padding-left:10px;background:#FFFFD7;border-left:3px solid #F90;margin:0 0 .75em}
#comments-block .avatar-ilage-container img {background-color: transparent;background-image: url(http://1.bp.blogspot.com/_C6KkooKXCEw/TICf7esRaPI/AAAAAAAAGzE/MfMNkZSL31k/s200/anonim-c.png);background-repeat: no-repeat;background-attachment: scroll;background-position: center top;width: 35px;height: 35px;position:absolute}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkTguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.comments .continue {
border-top: 2px solid #cccccc;
}
.comments .comments-content .datetime a{
float: right;
color: #069;
}
.comment-block .comment-footer a:link, a:visited {
color:#069;
}
.comments .avatar-image-container {
margin-left:-25px;
}
.comments .continue a{
color:#069;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fafafa url(http://1.bp.blogspot.com/-jGP3J4Fky6I/TpA0m36hZbI/AAAAAAAABsw/H4LZeglYNVI/s000/header-shadow.png) top repeat-x;margin:10px auto 0;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #cccccc;
border-left:3px solid #069;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-webkit-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
}
.comment-actions a { background: #c1c1c1; background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }
.avatar-image-container {
-webkit-box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-transition:
-moz-transform 0.5s ease 0s;
}
.avatar-image-container:hover {
-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-ms-transform:rotate(15deg);
}


Screenshot Desain 2
Berikut adalah kode cssnya :



#comments h4 {
color:#666666;
font-weight:bold;
letter-spacing:0;
line-height:1.4em;
margin:1em 0;
font-size:20px;
text-transform:none;
}
#comments-block.avatar-comment-indent {margin: 2em 0 1.5em !important;position: relative;}
dl#comments-block {line-height: 1.5em;margin: 2em 0 1.5em !important;}
#comments-block .comment-author {background: none repeat scroll 0 0 #D0E4E2;color: #FFFFFF;font-size: 14px;font-weight: bold;margin-left: 60px;}
#comments-block .comment-author a, dl#comments-block dt.author-comment a {color: #FFFFFF;text-decoration: none;}
#comments-block .avatar-image-container {background: url("http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMs1T9Q5FwI/AAAAAAAAB9E/gSZ4rnYBqdU/s1600/Wide_Brush_64x64.png") no-repeat scroll center center #FFFFFF;border: 1px solid #B6B6B6;height: 70px !important;left: 0;margin-top: -10px;position: absolute;width: 70px !important;}
#comments-block .avatar-image-container img {border: medium none !important;float: right;height: 70px !important;width: 70px !important;}
#comments-block .avatar-image-container.avatar-stock img {border-width: 0;padding: 0;}
.commentauthorname {background: none repe`t scroll 0 0 #92B6B3;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;}
#comments-block .comment-body {background: none repeat scroll 0 0 #FEFFF9;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
#comments-block .comment-body p {margin: 0 0 0.75em;}
#comments-block .comment-footer {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .comment-footer a {color: #444444;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #FFFFFF;font-size: 14px;font-weight: bold;margin-left: 60px;}
#comments-block .naacomment a {color: #FFFFFF;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #FFFFFF;font-size: 14px;font-weight: bold;margin-left: 60px;}
#comments-block .naaperu {background: none repeat scroll 0 0 #2266BB;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;}
#comments-block  .naacommentbody {background: url("") no-repeat scroll right bottom #F9F9FC;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
#comments-block .naacommentbody p {margin: 0 0 0.75em;}
#comments-block .naacommentfooter {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .naacommentfooter a {color: #444444;text-decoration: none;} /* start */
.comment .comment-header{background: none repeat scroll 0 0 #D0E4E2;color: #333;font-size: 14px;font-weight: bold;margin-left: 60px;}
.comment .comment-header a {color: #FFFFFF !important;text-decoration: none;}
.comment .avatar-image-container {background: url("http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMs1T9Q5FwI/AAAAAAAAB9E/gSZ4rnYBqdU/s1600/Wide_Brush_64x64.png") no-repeat scroll center center #FFFFFF;border: 1px solid #B6B6B6;max-height: 70px !important;margin-top: -5px;width: 70px !important;position:relative;z-index:50;}
.comment .comment-block {margin-left: 75px;}
.comment .avatar-image-container img {border: medium none !important;height: 70px !important;width: 70px !important;max-height: 70px !important;max-width: 70px !important;}
.comment-header cite {background: none rdpeat scroll 0 0 #92B6B3;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;margin-left:-20px;}
.comment .comment-content {background: none repeat scroll 0 0 #FEFFF9;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin-left:27px;padding: 5px 5px 10px 10px;line-height:1.4em;}
.comment .comment-actions a{background: none repeat scroll 0 0 #DDDDDD;color: #333333;display: inline-block;line-height: 1;margin-left: 3px;padding: 3px 6px !important;text-decoration: none;}
.comment .comment-actions a:hover{background:#CCC;text-decoration: none !important;}
cite.blog-author {background: none repeat scroll 0 0 #2266BB !important;;}
Selanjutnya jika sobat merasa kurang puas dengan tampilan desain CSS diatas. Sobat bisa mecustom sendiri sesuai selera sobat. dan jika ada yang perlu ditanyakan, tulislah pada kotak komentar dibawah. Semoga bermanfaat

31 Komentar:

  1. mohon maaf baru BW sob, trims tutorialnya..

    btw css diatas dimana naruhnya sob, apa buat menggantikan css lama?
    trims jawabannya:}

    ReplyDelete
    Replies
    1. langsung paste aja diatas ]]>, atau masuk ke rancangan template abis itu tambahkan CSS...

      Delete
  2. jadi keren nih. makasih tutornya sob. btw, kunjungan perdsana nih. salam kenal

    ReplyDelete
    Replies
    1. kayaknya belum jadi tuh di blog ente.... salam kenal juga sob

      Delete
  3. makasih sob, udah dicoba.. hasilnya mantab... thanks buat CSS-nya
    salam kenal

    ReplyDelete
    Replies
    1. Ini nih yang udah coba.. sama2 sob salam kenal juga

      Delete
  4. Kalo masalah ccs saya ikut menyimak aja sob hehhee..
    Thanks dah sharing :)

    ReplyDelete
    Replies
    1. kenapa cuma ikut nyimak sob... coba aja.. inikan cuma paste aja, langsung jadi deh!

      Delete
    2. Sob, blog sudah aku follow, tapi pake yang hidden. Update postingan sobat pasti muncul diberandaku kok :)
      Ntar kalo pas login aku follow lagi sob hehehe....

      Delete
  5. keren sob, kapan-kapan bisa diterapkan
    terima kasih sob

    ReplyDelete
  6. wow nice tutor, sangat2 elegan di lihatnya .. !!

    thanks broo

    ReplyDelete
  7. udah lama ga mampir ternyata banyak yang terlewatkann, hufftt...
    mantapsss tutornya, heheheee ngerti amat ya sama css heheheee gua aja ngga ngerti2 banget, ajarin dong mas obachti :D
    box shadownya kurang bagus tuh hehehe... jangan terlalu nge blur.
    kurang enak di liat :D

    ReplyDelete
  8. waow semua tutorialnya keren sob tapi maaf saya masih bingung cara naruhnya dimana karena tidak ada petunjuknya maaf saya masih baru dibidang otak atik template
    salam kenal buat semua sahabat disini

    ReplyDelete
    Replies
    1. OHhh.... gpp sob! kode CSS di atas bisa sobat taruh di "Rancangan Template >> Tingkat Lanjut >> Tambahkan CSS" maaf sob membingungkan! memang saya sengaja agar supaya ada yang meninggalkan jejak di form komentar ini, nggak as`l comot.

      Delete
    2. hehehe iya bingung juga berarti kodenya ditaruh dua duanya ya bang...

      Delete
    3. nggak sob! 1 aja, itukan saya nyediain 2 pilihan mau model komentar yang mana! paste salah satu aja sob....

      Delete
    4. terima kasih bang langsung tak cobanya...

      Delete
  9. Klo kotak komentar yg sperti pnya kmu ini gimana? bgus gan..
    knjungi blog.q ya..

    ReplyDelete
  10. Berhasil sob! makasih ya sob...
    kunjungi blogku ya...!

    ReplyDelete
    Replies
    1. selamat deh kalo berhasil. kunjungannya ditunggu ya, makasih sudah berkunjung :)

      Delete
  11. keren euy... tp masih bingung biar sinkron sama template saya gmn ya..???????

    ReplyDelete

 
Copyright © 2013 Obachti 95 . Powered by Blogger . All Rights Reserved