Mẫu Thread comment mặc định của blogger còn khá đơn điệu và xấu. bài viết này namkna sẽ hướng dẫn các bạn cách tùy biến mẫu thread comment của blogger chỉ với một mã CSS đơn giản. Thủ thuật sẽ giúp avantar của nhận xét ẩn hiện mượt mà nhờ CSS3.

Ảnh minh họa:
Thread comment với avantar ẩn hiển cho blogspot

» Cách thêm Thread comment avantar cuộn cho blogspot.

1. Đăng nhập vào blog
2- Vào mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author{font: 12px Tahoma;position:absolute;width:58px;right:0px;height:20px;display:block;top:0px;margin:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;background:#00AEEF;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.comments .comments-content .icon.blog-author::before{content:"Admin";position:absolute;text-shadow:0 1px 0 rgba(0,0,0,0.5);color:white;top:2px;left:8px}
.comment-form {margin-top: 10px;font-size:13px;color:#333;clear: both;max-width: 100%;}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}
.like{position: fixed;right: 5px;background: #FAFAFA;padding: 5px;border: 1px solid darkturquoise;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;max-width: 82px;}
.comments .comments-content .user {font-style: normal;font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;font-size: 13pt;letter-spacing: 0.01em;color: #333;}
.comments {clear: both;background: none;padding: 5px;}
.comments .comments-content .datetime {font-style: normal;float: right;margin-right: 79px;font-style: normal;font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;font-size: 10pt;letter-spacing: 0.01em;color: #fff;margin-top: 0px;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
margin: -10px 0 10px;}
#commentsbox {margin:0;width:600px;}
h3#comments{font-size30px;font-family: 'Open Sans', sans-serif;color:#ffffff;font-weight:normal;padding:10px 10px ;background:#D3D4CE;margin-top:10px;}
ol.commentlist {margin:0px 0 0;clear:both;overflow:hidden;list-style:none;}
ol.commentlist li {margin:0px 0;line-height:18px;padding:10px;background:#78786D;}
ol.commentlist li .comment-author {color:#ffffff;}
.comment-body {margin: auto;-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5);-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);box-shadow: 0 1px 4px rgba(0,0,0,0.5);padding: 5px;}
ol.commentlist li .comment-author a:link,ol.commentlist li .comment-author a:visited{color:#ffffff;font-weight:bold;text-decoration:none !important;font-size:15px;font-family: 'Open Sans', sans-serif;}
ol.commentlist li .comment-author .fn {color:#000;}
ol.commentlist li .comment-author .avatar{float:right;background:#fff;padding:3px;}
.comments .comments-content .comment-content {text-align: justify;border-bottom: 1px solid #DDD;padding-top: 10px;font-style: normal;font-size: 11pt;letter-spacing: 0.01em;color: #000;}
.comments .comment .comment-actions a {padding: 5px;font-size: 13px;font-family: 'Open Sans', sans-serif;text-decoration: none;text-align: center;color: #fafafa;margin:8px;position: relative;background: #888;text-shadow: 1px 1px 1px #666;}
.comments .comments-content .comment-replies {margin-left: 65px;margin-top: 1em;}
.comments .comments-content .inline-thread {padding: .5em 0em;}
#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:#00AEEF}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after {border-right: 20px solid transparent;border-top: 10px solid #00AEEF;bottom: -10px;content: "";height: 0;left: 10px;line-height: 0;position: absolute;width: 0;}
.avatar-image-container {float:right;height:40px;width:40px;}
.avatar-image-container img {height:40px;width:40px;}
.comments .avatar-image-container {border-radius:50px;float: left;max-height: 40px;overflow: hidden;width: 40px;padding: 0px;border: 2px solid #999999;}
.comments .avatar-image-container img {border-radius:50px;height:auto;}
ol.commentlist li .comment-meta{font-size:13px;font-family: 'Open Sans', sans-serif;}
ol.commentlist li .comment-meta .commentmetadata{color:#555;}
ol.commentlist li .comment-meta a {color:#ffffff;text-decoration:none !important;}
ol.commentlist li p {line-height:22px;margin-top:5px;color:#FEFAEF;font-size:12px;}
ol.commentlist li .reply{margin-top:10px;font-size:10px;}
ol.commentlist li .reply a{background:#5F553B;color:#fff;text-decoration:none;padding:3px 10px;}
ol.commentlist li.odd {background:#D3D4CE;}
ol.commentlist li.even {}
ol.commentlist li.even:hover{BACKGROUND:#D3D4CE;}
ol.commentlist li ul.children {list-style:none;margin:1em 0 0;text-indent:0;}
ol.commentlist li ul.children li.depth-2 {margin:0 0 0px 50px;}
ol.commentlist li ul.children li.depth-3 {
margin:0 0 0px 50px;}
ol.commentlist li ul.children li.depth-4 {margin:0 0 0px 50px;}
ol.commentlist li ul.children li.depth-5 {margin:0 0 0px 50px;}
.comment-nav{padding:5px ;height:20px;background:#C4D533;}
.comment-nav a:link,.comment-nav a:visited{color:#fff;}
#respond{padding:20px;margin:20px 0px;}
#respond h3 {font-size:20px;font-family: 'Open Sans', sans-serif;color:#000;padding-bottom:10px;}
#commentform p{margin:5px 0px;}
#respond label{display:block;padding:5px 0;font-weight:bold;color:#3F361F;}
#respond label small {font-size:10px;}
#respond input {margin-bottom:10px;padding:5px 0px;margin:0 10px 10px 0;background:#6F6753;color:#F7EEE9;}
#commentform input{width:99%;}
#respond input#commentSubmit {width:100px;padding:5px 0px;background:#B7CD2C;color:#fff;margin:10px 0px;font-weight:bold;cursor:pointer;}
textarea#comment{background:#6F6753;width:99%;margin:0px 0px;padding:5px 0px;color:#F7EEE9;}
.comments .avatar-image-container img {max-width:50px;}
.comments .comments-content {margin-bottom: 16px;}
.comments .comment-block {margin-left: 75px;position: relative;border: 1px solid #DDD;padding: 10px;min-height: 83px;}
.comments-number{background: none repeat scroll 0 0 #00AEEF; border-radius: 10px 10px 10px 10px; color: #FFFFFF;    float: right;    font-size: 10px;    height: 20px;    line-height: 2em;    position: static;    text-align: center;    width: 20px;}
.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQUMHjxx4XfOWv0BmT_hjqqYqm7poO-apQ_Yxpn5B6UrUTQsMLrmvW2jF5jbW3LOGs3YpRQCoI_FhGba3xtcyjJ5aymnSG8d7zdDwyMGkMyjiQQptiIpwnmBjBxZzCUk6a9xn5Y9Sb3r4/s1600/gravatar.gif);}
.comments .avatar-image-container img[src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDL1hTUCzCq2nob0OXW8KO7gqX4Y_B4bfbEghTdMsnFGpVzarR3wvrq2mYVfxhmQ3Zqe37n3p2LC29Vyfr58lDTq2bCmXA0xXkCry4AVQYR2xs-dgsJGWdhXuyT59gMXFDNH9M_RpRJAaD/s1600/b16-rounded-namkna-1.gif"] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDHeGA6Bi03ZjBUrzBTL2pk6ASbAuipOjHXtOrMctgCDeOBvaj7fj3GaMi2RsZZKYtzipdgGnEBad5XqvzAcyUt9TxrCLFXrUlTluc2Dr8vDIAif6iRq8xxGRkshHHjLsD1K8kCHmR54HK/s1600/gravatar-namkna.blogspot.com.gif);}
5- Lưu mẫu lại và xem kết quả nha.