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
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667.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
12#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;}
 |
| Tampilan thread comment V2 |
3. Tampilan thread comment V3
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103.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
123456789101112131415161718192021222324252627282930313233343536.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/AVvXsEgrNe5kRdPN_6ygn5ag0GxqKWvhXCu0iGhAGLyNId-78biAnkWalVO6Y8oYT0i2eeQAX2f_U9GCnrFzQQGH-cL_4ZTQ8uZU4r0JzHmTaGZLzHUGdWZknj2NT8NQ5If4JUZzkBic7wYtLfM/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
1234.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 |
- Jika sudah selesai dengan pilihan 5 style tampilan thread comment
- save/simpan
0 Comments
