Comment style that was given by default of blog still looks very simple and less attractive to the users who come to give an opinion on the comment form. I think we still need a visual to excite what we do. That is why you need styling comments on blog to make it looks more attractive for the user who came to our blog. Surely the main reason is the content of the article post to be commented or asked by the users.
Blogger itself already provides threaded comment system inside your blog with the database and the security system for the blog. Perhaps you decide to use comment form of facebook plugin, it's up to your assessment and taste. But here I would prioritize what has been provided by blogger itself, at least to reduce the third party of my blog that I created. Here we just need to make the style of threaded comment system on the blog.
The picture above is a display of the comment blog by default if any users give comments. The thumbnail picture who comment (image avatar) looks not fit, especially if you use a border on the image content, which may be seen just a half of the image avatar. And the other side the display of comment looks less attractive generally. In this case i will make the new style to the image avatar so that looks better or fit inside and give the style to for the comments that was written by the users and finally exciting another user to give a comment.
1. Go to the blogger dashboard, then click the on the template>edit html. In the script code of the template, press Ctrl+F inside then typing ]]></b:skin> which is the sign of the end tag of the skin template that you use. We are going to put the css styles of threaded comments as additional css by put just above ]]></b:skin>
2. Once you knew the position placement, now you can copy the following script is rather long. You can edit on the part marked with description inside, especially for the color that you want to adjust by the template that you use.
Threaded comment css script :
.comments{clear:both; margin-top:10px; margin-bottom:0;font-family:tahoma; line-height:18px;
font-size:13px}
.comments .comments-content{margin-bottom:16px; font-weight:normal; text-align:left}
/* For button style */
.comments .comment .comment-actions a,.comments .comment .continue a
{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
text-align:center;
text-decoration:none;
color: #fef4e9;
background: #84633E;
background: linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -webkit-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -moz-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -o-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -ms-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
-svg-background: linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
height:26px;
line-height:26px;
font-weight:normal;
cursor:pointer
}
.comments .comments-content .comment-thread ol
{list-style-type:none;
padding:0;
text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em; margin-left:40px; background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
/* color for the name who was commented and comment date */
.comments .comments-content .user a
{color:#003399;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author
{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a
{color:#003399;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
/* header block background color */
.comment-header
{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions {position:absolute;right:0;top:0}
.comments .comments-replybox {border:none;height:230px;width:100%}
.comments .comment-replybox-thread {margin-top:0}
.comments .comment-replybox-single {margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a {display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle {cursor:pointer;display:inline-block}
.comments .comments-content .loadmore {cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded {max-height:0;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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
/* maximum size avatar image or avatar wrapper*/
.avatar-image-container{background:url(http://agratitudesign-template.googlecode.com/svn/trunk/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:65px !important;max-width:65px !important;max-height:65px !important}
/* avatar image size*/
.comments .avatar-image-container img
{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
/* color comment block*/
.comments .comment-block
{margin-left:65px;
position:relative;border:5px solid #e3e3e3;border-radius:6px;
-webkit-box-shadow:inset 0px 0px 2px #000;
-moz-box-shadow:inset 0px 0px 2px #000;
box-shadow:inset 0px 0px 2px #000;
}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
Changes the css style if you need, to make the style comments on your blog match to the template blog that you are using. The next article is how to create recent comments widget on the sidebar.
Related Articles
hello there, I do think your site may be having program compatibility problems. whenever I take a gander at your website in Safari, it
ReplyDeletelooks fine however, if opining in IE, it has some covering issues. recently wanted to give you snappy heads up! nice shearing
www.jicstech.com
Really what a wonderful blog you posted. Thanks for sharing this informative information with us.
ReplyDeleteMahipalpur Escorts
Escorts in Vasant Vihar
Karol Bagh Escort Service
Call Girls in Connaught Place
Escorts Service in Dwarka
Malviya Nagar call girls