seo Threaded comments - Blogger simple and beautiful 2013
on Friday, March 08, 2013
|
Seo Master present to you:  This is a default style for Thread Comments Blogger. Comment thread hierarchy with CSS for Blogger - blogspot, improved from Blogger + Duy Pham hope it fits the style the majority of blog. First, save a copy of the original template to prevent uncertainties. After that, go to the HTML editor, delete all old Threaded comments apply CSS in your template. Continuing insert this code before ]]> </ b: skin>/* 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} Source: http://bloggersviet.blogspot.com2013, By: Seo Master
|
Labels: Comment, css3
This is a default style for Thread Comments Blogger. Comment thread hierarchy with CSS for Blogger - blogspot, improved from Blogger + Duy Pham hope it fits the style the majority of blog. First, save a copy of the original template to prevent uncertainties. After that, go to the HTML editor, delete all old Threaded comments apply CSS in your template. Continuing insert this code before ]]> </ b: skin>
