Giao diện comment g+ đẹp cho blog

Giao diện comment g+ của google rất đơn giản và dễ gây nhàm chán với những ai ưa tính thẩm mỹ.Nhiều bạn thắc mắc liệu có thể thay đổi giao diện comment g+ đó hay không. Câu trả lời là bạn hoàn toàn có thể.

Sau bao ngày lang thang trên mạng tìm hiểu mình chọn ra cho các bạn các mẫu style đẹp đã đựơc rất nhiều blogger sử dụng.

Style 1: Style đẹp cho comment blog   ( Của blogger Duy Pham )

• Cách thực hiện: Coppy đoạn code ben duới dán trên thẻ  ]]></b:skin>

 #comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#d80556} #comments h4,.comments .user a,.comments .continue a{font-size:16px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556} .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6C_yTzVxDSQl0fs4B24CiQCMMaKC16ehgYnUILSYCtVknB3_Ycw8V_03ZcUCukVfjclu7h1gEr933mz_FuTe1ZQ0FtWdqKmuqC0Wpryisubkx8blK3ybArFkiN99g3z0tlopxNSxWq0/);width:36px;height:36px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a{padding:10px 0;text-align:center} .comment .continue{display:none} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%}

• #d80556 là màu chủ đạo của style này, bạn có thể thay đổi nó theo ý muốn.

Style 2:  Khá đẹp

/* Comments ----------------------------------------------- */ .comments {background: none repeat scroll 0 0 #FFFFFF;clear: both;margin-top: 10px;padding: 10px;width: 96%;} #comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#ff9000} #comments h4,.comments .user a,.comments .continue a{font-size:16px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #ff9000;border-right:20px solid transparent;width:0;height:0;line-height:0} .comments .avatar-image-container{width:42px;max-height:42px;height:42px;padding:2px;border:1px solid #CCCBCB} .comments .avatar-image-container img{max-width:42px;width:100%} .comments .inline-thread .avatar-image-container{width:36px;height:36px} .comments .comment-block{margin-left:53px;padding:5px 10px;border:1px solid #CCCBCB;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px} .comments .inline-thread .comment-block{margin-left:48px} .comments .comment-block::before,.comments .comment-block::after{content:"";width:0;height:0;border-width:10px 8px;border-style:solid;border-color:transparent #CECECE transparent transparent;position:absolute;top:8px;right:100%} .comments .comment-block::after{border-color:transparent white transparent transparent;right:auto;left:-15px} .comments .comments-content .comment-header{border-bottom:1px solid #CCCBCB;padding-bottom:3px;margin:-1px -3px 10px} .comments .comments-content .comment{margin-bottom:12px;padding:0} .comments .comments-content .icon.blog-author{position:absolute;right:10px;top:-3px;width:65px;height:20px;background-color:#FF9000;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px} .comments .comments-content .icon.blog-author::after{content:"Admin";position:absolute;color:white;text-shadow:0 1px 2px #646464;top:0px;left:10px} #comments-block{margin:1em 0 1.5em;line-height:1.6em} .comment-form{max-width:100%} #comments-block .comment-author{margin:.5em 0} #comments-block .comment-body{margin:.25em 0 0} #comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em} #comments-block .comment-body p{margin:0 0 .75em}

• Cách thực hiện: Coppy đoạn code ben duới dán trên thẻ  ]]></b:skin>

Style 3: Dạng comment mẹ bao trùm comment con đơn giản ( Của blogger Namkha )

.comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em} .comments .comments-content { font-size: 13px} .comments .comment .comment-actions a {padding:10px} .comments .comment .comment-actions a:hover { text-decoration: underline} .comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: left} .comments .comments-content .inline-thread { padding: 0.5em 1em} .comments .comments-content .comment-thread { margin: 8px 0px} .comments .comments-content .comment-thread:empty { display: none} .comments .comments-content .comment-replies { margin-top: 1em; margin-left: 36px} .comments .comments-content .comment { margin-bottom:15px; border:1px solid rgba(0,0,0,0.4); border-bottom:1px solid rgba(0,0,0,0.2); background: rgba(0,0,0,0.15); background: -moz-linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.05)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.15)), to(rgba(0,0,0,0.05))); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#999999'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#999999')"; /* IE8 only */ box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5); -moz-box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5) } .comments .comments-content .comment-body { position:relative} .comments .comments-content .user { margin:6px 0 0 0; font-style:normal; font-weight:bold} .comments .comments-content .icon.blog-author { width: 18px; height: 18px; display: inline-block; margin: 10px 10px -4px 6px} .comments .comments-content .datetime { margin:10px; 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; padding: 10px 16px; text-align: center} .comments .thread-toggle { cursor: pointer; display: inline-block} .comments .continue { cursor: pointer} .comments .continue a { display: block; padding: 0.5em; font-weight: bold} .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em} .comments .comments-content .loadmore.loaded { max-height: 0px; 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,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 { float: left; width: 36px; max-height: 36px; overflow: hidden; margin:5px 0 0 5px} .comments .avatar-image-container img { width: 36px} .comments .comment-block { margin-left: 48px; position: relative} /* Responsive styles. */ @media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; } }

Chúc thành công !