5 style tampilan thread comment dengan CSS

5 style tampilan thread comment dengan CSS - Sempat sebelumnya gaptek32 share langsung 8 style blockquote, dan kini dalam postingan ini gaptek32 kembali dengan sharenya 5 style tampilan thread comment sekaligus dengan CSS, semoga sobat semua menyukai dengan tampilan thread comment nya. Dan berikut adalah cara penginstalannya,
  • Masuk terlebih dahulu pada blog yang ingin dipasang thread comment
  • Dashboard
  • Pilih menu Template
  • Edit HTML
  • Centang  
  • Cari kode ]]></b:skin>
  • ]]></b:skin>
1. Tampilan thread comment V1

.comments {font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51)}
.comments 
.comments-content a{color:#3B5998 !important}
.comments h2,
.comments h3,
.comments h4{
font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;font-size:16px}
.comments 
.comments-content 
.comment{margin:0 0 0;padding:10px 10px;border-top:1px solid #e9e9e9;border-left:1px solid #ccc}
.comments 
.comment 
.comment-header,
.comments 
.comment 
.comment-actions,
.comments 
.comment 
.comment-actions a,
.comments .comment 
.comment-thread
.inline-thread,
.comments 
.comment 
.continue{
margin:0 0 0;padding:0 0 0;border:none;background:transparent}
.comments 
.comment 
.comment-header{
margin-bottom:4px}
.comments 
.comment 
.comment-header 
.datetime a{
color:#808080 !important
}.comments 
.comment 
.comment-actions a{padding-right:5px}
.comments 
.thread-toggle 
.thread-arrow{
width:7px;height:7px;padding-right:4px
}.comments 
.comment 
.avatar-image-container,
.comments 
.comment 
.avatar-image-container img{
width:50px;height:50px;max-width:none;max-height:none;border:none;padding:0;margin:0;outline:none}.comments .comment .comment-block{margin:0 0 0 60px !important}.comments .comment .comment-thread.inline-thread{margin:7px 0 0 22px}.comments .comment .comment-thread.inline-thread ol{margin:7px 0 10px !important}.comments .comment .comment-thread.inline-thread .comment{background-color:#EDEFF4;padding:5px 5px 0;margin:1px 0 0;border:none;border-bottom:1px solid #D2D9E7}.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img{width:32px;height:32px}.comments .comment .comment-thread.inline-thread .comment .comment-block{margin:0 0 0 40px !important}.comments .comment .comment-content{text-align:left}
.comments 
.comments-content 
.icon.blog-author {
display: none
}.comments 
.comments-content 
.blog-author:after {
content:"\2039\2002 Admin";margin-left:10px;color:#ccc;font-size:13px;
}
.comments 
.comment 
.comment-thread
.inline-thread 
.comment:last-child{
border-left:2px solid #A8B2CE !important
}
.comments-content span.comment-actions{position:absolute;top:0;right:0;height:20px}.comments .comments-content span.comment-actions a{font-size:12px;padding:4px;color:#333 !important;}.comments .comments-content .item-control{display:inline}#comment-editor{width:101%!important} .comment-form{width:101%;max-width:101%}


5 style tampilan thread comment dengan CSS
Tampilan thread comment V1

2. Tampilan thread comment V2


#comments h4{background: url(//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-image-container img {background-color: transparent;background-image: url(http://img1.blogblog.com/img/anon36.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,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAC30lEQVQ4ja1UTUiiURRtI9MirJ1JEJIlmBDaONCYRQvRoLKwf6yIyp8sI4ZgQFHaFC0iC2YrRITjYlathqAWMW1atdGBwTLNLm1apdau7vn4lCalmYERHu9779177r3nnmvF09NTxf9abz7KZDJpXV3deWNjI6nVauzSfwJjAHVtba0E38PDw00qlYosFgv19/fTyspKk2gjgd2bYHK5/HNDQwNpNJoIZ1Hp8/net7S00Pj4OM3NzVE4HNbyubK+vh7v1Nzc/KksGEcyKpVK6urqot7eXjKZTId6vf6X0WikqakpcjqdAI11dHQc6nQ6MpvN1NPTQwaDQVcClkwmP05MTFwAyO120/T0NI2OjpLdbieHw0Fer1cAHBsbK95vbGwkUqmUtlyZ7+7v77/Mzs4mAbSwsED8DYCbYDCYxI4z7hEMd/l8PgS/spytr69Xt7e3X42MjAhAm5ubiWw2e8JvYQ50srq6mpicnCSPx0OLi4tXe3t71SWcFdrPhFJbW5tA+Pz8fObu7m6b36tE46rb29ttq9V6g2Yg2ODgoGDPfudFMACBUHCByDD2+/2X/PZaV1KbzXYJO5TrcrkE+4GBASqCcUfS0BFAQDaXAF7SfX19Na80WKPVatPICJnBFmt5eTn9krMDXj8eHh5OZ2ZmrtE1GHMGEZaBtDANCoUCZ4GGpaWl68fHx1P4if6/N2Bra6uaDROFMlBCd3d3igG+8zhhJ86WOCAFAoHE/v5+aQPEyFD2Ny5D4A7tR9dQOs5DQ0NCRgAqyIb5+8r2khIw7ogJc8iZEItX0BE7ZQAGZ3HP4B5ACAThMvn6cjr7sLa29hNlsN4umL/dTCZzzMMuZAmi+XfMQt3lTl8gYCQSibOfuhwYlicWi53lcrkdKDsUCrWyiIXZBBhz1Ip7FvJOPB4/42/Hn/7PmgojEo1GlZ2dnWnmRmj/0dGRsjB6ot3f/zmK6j940f6qt+yfAdOYXbY4BoePAAAAAElFTkSuQmCC);}.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: #00000;}.comment-block .comment-footer a:link, a:visited {color:#000000;}.comments .avatar-image-container {border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.comments .continue a{color:#000000;}#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {background:#fafafa url(//1.bp.blogspot.com/-jGP3J4Fky6I/TpA0m36hZbI/AAAAAAAABsw/H4LZeglYNVI/s000/header-shadow.png) top repeat-x;margin:10px auto 0;margin:10px 0;padding:10px 10px;border-top:1px solid #cccccc;border-left:1px solid #cccccc;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 {-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}.avatar-image-container:hover {-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}/* Delete Comment */.item-control {display: inline;}

5 style tampilan thread comment dengan CSS
Tampilan thread comment V2


3. Tampilan thread comment V3


.comments {font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51)} 
.comments 
.comments-content a{color:#3B5998 !important} 
.comments h2, 
.comments h3, 
.comments h4{ font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;font-size:16px} 
.comments 
.comments-content 
.comment{margin:0 0 0;padding:10px 10px;border-top:1px solid #e9e9e9;border-left:1px solid #ccc} 
.comments 
.comment 
.comment-header, 
.comments 
.comment 
.comment-actions, 
.comments 
.comment 
.comment-actions a, 
.comments 
.comment 
.comment-thread 
.inline-thread, 
.comments 
.comment 
.continue{ margin:0 0 0;padding:0 0 0;border:none;background:transparent} 
.comments 
.comment 
.comment-header{ margin-bottom:4px} 
.comments 
.comment 
.comment-header 
.datetime a{ color:#808080 !important }
.comments 
.comment 
.comment-actions a{padding-right:5px} 
.comments 
.thread-toggle 
.thread-arrow{ width:7px;height:7px;padding-right:4px }
.comments 
.comment 
.avatar-image-container, 
.comments 
.comment 
.avatar-image-container img{ width:50px;height:50px;max-width:none;max-height:none;border:none;padding:0;margin:0;outline:none}
.comments 
.comment 
.comment-block{margin:0 0 0 60px !important}
.comments 
.comment 
.comment-thread
.inline-thread{margin:7px 0 0 22px}
.comments 
.comment 
.comment-thread
.inline-thread ol{margin:7px 0 10px !important}
.comments 
.comment 
.comment-thread
.inline-thread 
.comment{background-color:#EDEFF4;padding:5px 5px 0;margin:1px 0 0;border:none;border-bottom:1px solid #D2D9E7}
.comments 
.comment 
.comment-thread
.inline-thread 
.comment 
.avatar-image-container,
.comments 
.comment 
.comment-thread
.inline-thread 
.comment 
.avatar-image-container img{width:32px;height:32px}
.comments 
.comment 
.comment-thread
.inline-thread 
.comment 
.comment-block{margin:0 0 0 40px !important}
.comments 
.comment 
.comment-content{text-align:left} 
.comments 
.comments-content 
.icon.blog-author { display: none }
.comments 
.comments-content 
.blog-author:after { content:"\2039\2002 Admin";margin-left:10px;color:#ccc;font-size:13px; } 
.comments 
.comment 
.comment-thread 
.inline-thread 
.comment:last-child{ border-left:2px solid #A8B2CE !important } 
.comments-content span
.comment-actions{position:absolute;top:0;right:0;height:20px}
.comments 
.comments-content span
.comment-actions a{font-size:12px;padding:4px;color:#333 !important;}
.comments 
.comments-content 
.item-control{display:inline}
#comment-editor{width:101%!important} 
.comment-form{width:101%;max-width:101%}


5 style tampilan thread comment dengan CSS
Tampilan thread comment V3

4. Tampilan thread comment V4


.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.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:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;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 .comment-replybox-single{margin-top:5px;margin-left:48px}
.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:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .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}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6wmdWVnNLSRBRzE0trUnbaAYU3Z4k0nl4iz-RPvz4jgwxo7z9v91HN7m2THk-h5gY6CQ6K1D1rjOE2RKL0_Q1KeVnRLqLX_1ni08YkkcE9LMw_uCzLEX70V_U0sf3hIf27Kw0p-m_u0M/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

5 style tampilan thread comment dengan CSS
Tampilan thread comment V4


5. Tampilan thread comment V5


.comments .avatar-image-container{max-height:50px;max-width:50px;height:50px;width:50px; border-radius:29px;padding:2px;border:2px solid #39E939;box-shadow:-1px -1px 1px #444,2px 2px 4px #444;background:#1B3CFA;margin:2px 4px 2px 2px;}
.comments .avatar-image-container img{width:50px;max-width:50px;height:50px;max-height:50px;border-radius:25px;border:0 solid #FE081C !important;}
.comments .comment-block{margin-left:75px;}

5 style tampilan thread comment dengan CSS
Tampilan thread comment V5




Terkait dengan ini

19 komentar:

  1. saya juga udah pake sob,yg V5
    nice share sob,salam sukses

    BalasHapus
  2. panjang banget bang.. aku gak ngerti >_<
    .

    BalasHapus
    Balasan
    1. Ini maksudnya pilihan dari ke lima style thread comment miz, bukan berarti harus di instal semua :). untuk pemasangan script tersebut cukup di taruh di atas ]]>

      Hapus
  3. mantap infonya ......

    jangan lupa follow blog saya di treehuges.blogspot.com

    nanti blog anda saya follow

    BalasHapus
  4. Wah Tutorialnya Mantap Nih , Kenalan Yuk Mas Dengan Blogku Yang Baru ? ^_^
    Blogwalking : http://ghalis4rt.blogspot.com/

    BalasHapus
  5. mantep hasilnya di blog ane nih :drummer:
    makasih banyak gan...

    BalasHapus
  6. posting yg bgus sob

    follow aku yah

    www.michael980.blogspot.com

    :-d :-d :-d :-d :-d LIMA JEMPOL

    BalasHapus
  7. @bachrudin dejava : sudah saya follow sob
    @yordan ghalis :SIAP :)
    @kata-newbie : makasih :D
    @ady jaelani : :-bd
    @michael hiandi : udah saya follow

    :Ozz

    BalasHapus
  8. Mantab ni style komentar, tetapi aku masih tetap setia style komentar versi DTE, menurut aku lebih responsif.

    BalasHapus
    Balasan
    1. Oh comment Artisteer Tutorials (Hasil bongkar habis-habisan oleh DTE). dulu sempet pake (Asli dari Artisteer Tutorials), cuman reply commentnya jendela pop up (sebelum tau cara mengatasi pop up). kalo sekarang lebih nyaman pake thread comment asli blognya nih git :D

      Hapus
    2. Tergantung selera sih kak, punya aku juga asli bawaan dari blogger kok, cuma merubah style dan sedikit script-nya aja kok.

      oh iya, system thread commenting ini kira2 bisa berapa level tingkat balasan ya, apakah juga seperti ini ?

      http://4.bp.blogspot.com/-q5zvih61vHg/UQIaOZ4qdRI/AAAAAAAAANk/sJomYpyetJA/s400/New%2BComment.png

      Maaf sekalian coba fitur manipulasinya ! :D

      Hapus
    3. Wah belum tau sampe berapa-berapanya tingkat anak komentarnya :D . Yang pasti anak komentarnya ikut kena level/bertingkat.
      Hehe silahkan ^_^ .

      Hapus
  9. bsa nggak tempat .. muncul.a sperti ini nanti yang saya tempati komennya.. warnanya diubah.. jdi maksud.a cara memberi warna background setiap thread comment..????

    BalasHapus
    Balasan
    1. hihihi saya kurang faham sama pertanyaannya @@, . mungkin bila yang dimaksud sobat komentar bertingkat seperti ini, silahkan kunjungi sumbernya ;

      http://www.dte.web.id/2012/05/efek-thread-comment-bertingkat-hanya.html

      Semoga membantu :D

      Hapus
  10. terima kasih gan, ane berhasil make yg V2 di http://gilangrizky24.blogspot.com

    BalasHapus

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML