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,
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%}
|
Tampilan thread comment V1 |
2. Tampilan thread comment V2
#comments h4{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO4MRqmRvck8fcr2YwTmR9rkrSNoFXSYcZcZTvk_VB8XXMzaih-ufV1LkcDhMkz2jRgKf8cZw931iRNLE4mgpWAndMgH6HH96HBHEHg27rpx9hyphenhyphenLhsWlm-oeVl_gDoKZ595yUZ8WD8pmqX/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDD5EChPo_V036R27aI4Hz2pF56DjEVPSSoU8a33pAb0Re1d8roV_V-elY8gk_Ak3oWCM-GfhWOLqjZwZTVqzhW4g9tLZsqOl6_88VVMb-23Br_LxVqxL8u_QhOU7x5rTklOWCeBfYIKhn/s0/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;}
|
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%}
|
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}}
|
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;}
|
Tampilan thread comment V5 |
wah keren" yah
BalasHapussaya juga udah pake sob,yg V5
BalasHapusnice share sob,salam sukses
panjang banget bang.. aku gak ngerti >_<
BalasHapus.
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 ]]>
Hapusmantap infonya ......
BalasHapusjangan lupa follow blog saya di treehuges.blogspot.com
nanti blog anda saya follow
Wah Tutorialnya Mantap Nih , Kenalan Yuk Mas Dengan Blogku Yang Baru ? ^_^
BalasHapusBlogwalking : http://ghalis4rt.blogspot.com/
keren2 sob :D
BalasHapusmantep hasilnya di blog ane nih :drummer:
BalasHapusmakasih banyak gan...
posting yg bgus sob
BalasHapusfollow aku yah
www.michael980.blogspot.com
:-d :-d :-d :-d :-d LIMA JEMPOL
@bachrudin dejava : sudah saya follow sob
BalasHapus@yordan ghalis :SIAP :)
@kata-newbie : makasih :D
@ady jaelani : :-bd
@michael hiandi : udah saya follow
:Ozz
Mantab ni style komentar, tetapi aku masih tetap setia style komentar versi DTE, menurut aku lebih responsif.
BalasHapusOh 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
HapusTergantung selera sih kak, punya aku juga asli bawaan dari blogger kok, cuma merubah style dan sedikit script-nya aja kok.
Hapusoh 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
Wah belum tau sampe berapa-berapanya tingkat anak komentarnya :D . Yang pasti anak komentarnya ikut kena level/bertingkat.
HapusHehe silahkan ^_^ .
bsa nggak tempat .. muncul.a sperti ini nanti yang saya tempati komennya.. warnanya diubah.. jdi maksud.a cara memberi warna background setiap thread comment..????
BalasHapushihihi saya kurang faham sama pertanyaannya @@, . mungkin bila yang dimaksud sobat komentar bertingkat seperti ini, silahkan kunjungi sumbernya ;
Hapushttp://www.dte.web.id/2012/05/efek-thread-comment-bertingkat-hanya.html
Semoga membantu :D
terima kasih gan, ane berhasil make yg V2 di http://gilangrizky24.blogspot.com
BalasHapusterima kasih gan...
BalasHapusTitip artikel ya obat sipilis
BalasHapus