Membuat Threaded Comment di Blog yang sederhana

adscblog

Kali ini saya akan berbagi kode untuk membuat Threaded Comment di blog yang sederhana,mungkin ini adalah Threaded Comment yang mungkin sudah anda jumpai,tetapi mungkin masih ada sebagian Blogger yang pengen menggunakan Threaded Comment ini di blog nya,silahkan anda menempatkan kode berikut di template anda,walaupun penampilan nya kurang memuaskan,tetapi anda dapat meng edit nya kembali agar terpasang di blog sobat semakin keren,dan di bawah ini adalah CSS nya

.comment-actions.secondary-text, .continue {text-align: center; padding: 3px;border: 1px solid #bababa;border-radius: 4px;margin: 2px; background: #e0e0e0;}
.comment-actions.secondary-text:hover , .continue:hover {background: #EEE;}
.comment-actions.secondary-text a:hover, .continue a:hover {text-decoration: none;}
.item-control, .thread-chrome.thread-expanded .comment-actions.secondary-text {display: none;}
#comments,.comments{margin:20px}
#comments-block .comment-author{background:none repeat scroll 0 0 #000;border:2px solid #DCDCDC;font-size:15px;font-weight:700;margin-right:20px;padding:5px}
#comments-block .comment-author a{color:#FFF}
#comments-block .comment-body{border-left:2px solid #DCDCDC;border-right:2px solid #DCDCDC;min-height:40px;border-top:1px solid #FFF;margin:0 -5px;padding:0 5px}
#comments-block .comment-footer{border-bottom:2px solid #DCDCDC;border-left:2px solid #DCDCDC;border-right:2px solid #DCDCDC;font-size:11px;line-height:1.4em;text-transform:none;margin:-.25em 20px 2em 0;padding:5px}
.deleted-comment{font-style:italic;color:gray}
.comments .comments-content .icon.blog-author{background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
#comments-block li,.comments .comments-content .comment-thread ol li,.comments .comments-content .comment:last-child{border:1px solid #BABABA; background: #eee; border-radius:5px;margin:10px 0;padding:5px 10px}
#comments-block .comment-header{border-bottom:1px solid #BABABA;margin:0 -5px;padding:0 5px}
#comments-block .avatar-image-container{display:block}
#comments-block .avatar-image-container img{height:40px;width:40px}
.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:1em}
.comments .comments-content{font-size:13px;margin-bottom:16px}
.comments .comments-content .comment-thread ol{list-style-type:none;text-align:left;padding:0}
.comments .comments-content .inline-thread{padding:.5em 0 0 1em}
.comments .comments-content .comment-thread{margin:0}
.comments .comments-content .comment-replies{margin-top:1em;margin-left:36px}
.comments .comments-content .comment{margin-bottom:16px;padding-bottom:8px}
.comments .comments-content .comment:first-child{padding-top:5px}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal}
.comments .comments-content .datetime{margin-top:3px;margin-left:6px;float:right}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:0 0 8px}
.comments .comments-content .comment-content{text-align:justify}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;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;text-align:center;padding:10px 16px}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .continue{cursor:pointer}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:3em}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;padding-right:4px;margin:.3em}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.comments .avatar-image-container{margin-top:22px;float:left;width:42px;max-height:42px;overflow:hidden}
.comments .avatar-image-container img{max-width:40px;border:1px solid #BABABA}
.comments .comment-block{margin-left:48px;position:relative}
.comment .comment-block p.comment-content{background-color:#fff;border-bottom:1px solid #BABABA;border-left:1px solid #BABABA;border-top:1px solid #BABABA;font-style:normal;line-height:1.5em;margin-right:-10px;position:relative;-o-hyphens:auto;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;padding:10px}
.comments-textarea-tip{position:absolute;left:-5px;top:38px;height:0;border:5px solid transparent;border-left-width:0;border-right-color:#bababa;z-index:-1}
.comments .comments-content .comment-thread:empty,.comments .thread-chrome.thread-collapsed{display:none}
@media screen and max-device-width 480px {
.comments .comments-content .comment-replies{margin-left:0}}

Nah itulah cara membuat Threaded comment yang sederhana yang mungkin anda suka,selamat mencoba. adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 14 Juni and have 0 komentar