Buat Kotak Thread Komentar Jadi Lebih Keren #2

Obachti 95

Blogger friendly sharing

Buat Kotak Thread Komentar Jadi Lebih Keren #2

Jane Doe By Jane Doe 50
Dulu kala entah kapan saya pernah posting juga tentang ini disitu saya berikan dua model CSS komentar yang desainnya keren. Kalau kamu pengen lihat langsung klik aja Buat Kotak Thread Komentar Jadi Lebih Keren #1. Kali ini saya posting bukan karena tanpa alasan seperti kebiasaannya, kali ini saya posting ini karena ada yang meminta. Sungguh senang sekali jika ada teman sesama blogger yang meminta bantuan kepada saya tentang blogger juga dan saya alhamdulillah bisa membantu.

Nama di account bloggernya adalah Ilham Hanif dan tercatat mengomentari salah satu postingan saya 5 agustus 2012. Bisa dilihat di (Membuat Reply Comment System dengan mudah) atau lihat screenshotnya


Dan menurut saya yang direquest sobat saya satu ini adalah css komentar yang sedang saya pakai saat ini atau sama dengan yang ada discreenshot diatas. yaitu yang akan saya share kali ini.

Kode CSS Komentar

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURh1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.comments .comment-thread.inline-thread {
background-color: transparent;
}
.comments .continue {
border-top: 2px solid #000000;
}
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
largin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;$0D
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF', endColorstr='#009999');
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#0099FF');
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0099CC');
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px;
}
.comments .comments-content .comment {
padding-bottom:8px;
margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:rel`tive;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .user a {
color: #444;
}
.comments .comments-content .user a:hover {
text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
largin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: nnne;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.colments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
overflow: hidden;
backgrnund:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;
}
.comments .avatar-image-container img {
-moz-border-radius: 125px;
-webkit-border-radius: 125px;
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Kode CSS diatas saya copy langsung dari template saya. Jadi tidak saya kurangi sebelumnya. Monggo langsung disedot.

Cara menggunakan kode diatas

Bagi kamu yang belum tahu dimana harus meletakkan kode css. caranya begini : Log In ke akun blogger kamu pada halaman Edit HTML cari kode ]]></b:skin>, Nah letakkan kode css diatas tadi sebelum kode ]]></b:skin>

Bagi yang menggunakan Dasbor Blogger lama Screenshotnya berikut :




Bagi yang menggunakan Dasbor Blogger baru Screenshotnya berikut :


Langkah 1

Langkah 2
Eh, tapi kalo kamu pasang kayak diatas biasanya CSS diatas akan bentrok dengan CSS komentar kamu sebelumnya. jadi mending CSS komentar yang lama dihapus aja dan diganti dengan yang diatas. Bagi kamu yang belum tahu CSS komentar itu seperti apa, yah cari yang mirip-mirip kayak CSS komentar diatas deh. CArinya dimana? carinya ya di Edit HTML brai. Kalo ada yang kurang jelas komentar ya, insyaallah balasannya sesegera mungkin.

50 comments

  1. lanjutkan yang lebih mantep bang :)
    tema hitam juga gak papa..

    ReplyDelete
  2. Keren jg sob, avatarnya rounded. Kalo thread komentar blogku sih jelek kan sob?

    ReplyDelete
    Replies
    1. nggak juga sob, komentar sobat juga keren untuk versi yang bertingkat

      Delete
  3. oh jadi terasa ada kolomnya di kotak komentarnya ya ?

    ReplyDelete
  4. gw gk masang ah.. soalnya mesti di unslide dulu form komentar ane.. jadi ribet.. baru ubah suaikan trus pasang sc.. :D whahaha sekedar nambah pengetahuan.. :D

    ReplyDelete
    Replies
    1. okeh. kalo gitu makasih buat kunjungannya sobat :D

      Delete
  5. wah.. ini yang ingin saya lakukan pada blog saya.. terima kasih sudah posting versi ke 2 ini karena pada versi 1 saya sudah coba tapi tidak berhasil

    ReplyDelete
    Replies
    1. iya sob. silahkan dicoba, mungkin pas dihati serta blognya. :)

      Delete
  6. di bungkus dulu sobat, kok avatarnya ga bulet lagi sob?

    oya kalo bikin heading keren kaya punya sobat gimana tuh?

    ReplyDelete
    Replies
    1. maksudnya avatar apa ya sob?

      oh, headingnya nanti saya share deh. :D tapi kalo nggak bisa sekarang nanti selesai lebaran ya :)

      Delete
  7. Ikut menyimak sob, thanks udah berbagi :)

    ReplyDelete
  8. lagi-lagi saya tidak bisa mencoba sobat karena blog saya gak bisa dipasangkan thread commentnya sobat...

    ReplyDelete
    Replies
    1. iya sob. gak pa pa. :) ntar saya usaha pasang yang css comments versi lama :) :)

      Delete
  9. eh sob, ada award buat sobat tuh silahkan diambil. awardnya ada di http://ahsanul-marom.blogspot.com/2012/08/award-ke-lima-rumah-keduaku.html

    ReplyDelete
    Replies
    1. Terima kasih banyak sobat. dengan seperti ini secara tidak langsung sobat sudah memberikan suatu semangat baru untuk terus belajar ngeblog. sekali lagi terima kasih dan tunggu review dari saya ya

      Delete
  10. keren sob thread commentsnya, punya saya ala kadarnya saja hehehe....
    ijin simpen dulu ya :D

    ReplyDelete
  11. Mantapp :=) nyediain tutorial mulu sekarang nih :D

    ReplyDelete
    Replies
    1. yah. sebisanya sob :) malu sama situ mi, yang ilmu css-mu keren banget

      Delete
  12. ehm.. ternyta bisa di rubah dan di edit gitu supaya lebih cantik ya gan. ehm, keren :D

    ReplyDelete
  13. Wuich..., keren ni... berarti bisa warna warni ya

    ReplyDelete
  14. wih,keren thread commentnya ^_^
    kpn" kalau ngedit template lagi pake ini akh... :D

    ReplyDelete
  15. Kok nggak bisa ya gan...coba di cek...

    ReplyDelete
    Replies
    1. apanya sob yang nggak bisa? sini-sini saya bantu. :)

      Delete
  16. mas kok gak mau ya muncul yang kaya gini...

    Invalid variable declaration in page skin: Variable is used but not defined. Input: 0D

    kenapa ya mas....??? o_O

    ReplyDelete
    Replies
    1. ohh... di coba lagi sob. komentar Css yang lama dihapus dulu, baru pasang yang ini.

      Delete
    2. sip mas sudah bisa...

      makasih mas :D

      Delete
  17. izin nyimak gan,,
    boleh ni di pake di blog saya

    ReplyDelete
  18. Replies
    1. oh, kalo tanda adminnya ada lagi scriptnya gan. coba lihat artikelku di menu daftar isi ya. ada koq, simple banget. :)

      Delete
  19. sip!! pertamax gan!! tapi gan saya mau nanya, klo kotak "add comment" nya mau dibagusin caranya gimana ya? pake css juga gak sih? mohon di kasih tau ya gan!

    ReplyDelete
  20. Makasih ya sob ! Berhasil ! Oke sob, kunjungan balik, ya !

    ReplyDelete
  21. Wah keren ini sob, tapi sayangnya dh pke threaded comment juga hehehe,,

    ReplyDelete
  22. thanks gan , monggo mampir amirfcblog.blogspot.com

    ReplyDelete
  23. Gan, kok komentar adminnya gambarnya corrupted?
    lihat di beragamilmudi.blogspot.com

    ReplyDelete
    Replies
    1. maaf sob, mungkin nanti akan saya perbaiki. tapi bisa juga pakai link gambar yang lain saja. :)

      Delete
  24. makasih gan tutorialnya :D
    tapi sayang di blog ane malah ga jadi padahal udah ngikutin step by stepnya . maklum masih nubie ane tentang dunia blogging :D

    mampir dulu disini gan creation-on-imagine.blogspot.com

    ReplyDelete
  25. Cara yang ampuh untuk menghancurkan wasir peyakit ambeien tanpa operasi, pendek dan pengobatan yang kuat

    ReplyDelete
  26. Blognya Ok.. namun aku masih ragu untuk mencobanya.. setelah membaca komentar yang ada banyak yang tidak jadi..?
    sukses selalu mas...

    ReplyDelete
  27. Terimaksih gan, kelihatan bagus jadinya blogku

    ReplyDelete

Post a Comment