Kode Tampilan Komentar Blogger Responsive & Menarik

Baca Juga

Sekadar menyimpan Kode Tampilan Komentar Blogger Responsive & Menarik, siapa tahu Anda juga berminat. Kode ini bekerja dengan baik di template Valid HTML dan template bawaan blogger.

Desainnya seperti gambar di bawah ini. Simple & Elegant!

Cara memasangnya, copas Kode Tampilan Komentar Blogger Responsive & Menarik ini di atas kode ]]></b:skin> atau bungkus dengan kode <style> .... </style> dan simpan di atas kode </head>

.comments{display:block;clear:both;margin:0;color:#333333}
.comments h4{font-weight:400;font-size:12px;font-style:italic;padding-top:1px}
.comments .comments-content{margin:0;padding:0}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:8px}
.comments .comments-content .comment:first-child{padding-top:0}
.facebook-tab,.fb_iframe_widget_fluid span,.fb_iframe_widget iframe{width:100%!important}
.comments .item-control{position:static}
.comments .avatar-image-container{float:left;overflow:hidden;position:absolute}
.comments .avatar-image-container,.comments .avatar-image-container img{height:45px;max-height:45px;width:45px;max-width:45px;border-radius:3px}
.comments .comment-block{overflow:hidden;padding:0 0 10px}
.comments .comment-block,.comments .comments-content .comment-replies{margin-left:60px;margin-top:0}
.comments .comments-content .inline-thread{padding:0}
.comments .comment-actions{float:left;width:100%;position:relative;margin:0}
.comments .comments-content .comment-header{font-size:12px;display:block;overflow:hidden;clear:both;margin:0 0 3px;padding:0 0 5px;border-bottom:1px solid #eee}
.comments .comments-content .comment-header a{color:#333333;transition:color .3s}
.comments .comments-content .comment-header a:hover{color:#5e52f8}
.comments .comments-content .user{font-style:normal;font-weight:600;text-transform:uppercase;display:block}
.comments .comments-content .icon.blog-author{display:none}
.comments .comments-content .comment-content{float:left;text-align:left;color:#5E5E5E;font-size:13px;line-height:1.4em;margin:5px 0 9px}
.comments .comment .comment-actions a{margin-right:5px;padding:2px 5px;background-color:#5e52f8;color:#fff;font-weight:400;font-size:10px;border-radius:2px;transition:all .3s ease}
.comments .comment .comment-actions a:hover{background-color:#272727;text-decoration:none}
.comments .comments-content .datetime{color:#aaa;float:left;font-size:11px;position:relative;display:block;text-transform:uppercase;font-style:italic;margin:4px 0 0}
.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{color:#aaa}
.comments .thread-toggle{margin-bottom:4px}
.comments .thread-toggle .thread-arrow{height:7px;margin:0 3px 2px 0}
.comments .thread-expanded{padding:8px 0 0}
.comments .comments-content .comment-thread{margin:0}
.comments .continue a{padding:0 0 0 60px;font-weight:400}
.comments .comments-content .loadmore.loaded{margin:0;padding:0}
.comments .comment-replybox-thread{margin:0}
iframe.blogger-iframe-colorize,iframe.blogger-comment-from-post{height:283px!important}
.static_page .comment-system,.static_page .comments{display:block}
.comments ol{list-style:none;margin:0;padding:0}
@media screen and (max-width:480px){.comments .comments-content .comment-replies{margin-left:0}
}

Save!

Demikian Kode Tampilan Komentar Blogger Responsive & Menarik. Happy Blogging! (www.contohblog.com).*