The Design of your Blog is very important for your visitors to have more time to stay on your Blog because of the Goodness of the design of your Blog / Website. And there are also many styles / designs out there for blogger comment system but this is the one we made and we also changed the font to be better.
Also Read: How to put NumberPage on Blogger.
Why to change the Style of Blogger Comment ?
Changing the style or the design of your blogger blog comment system will add a bit more style to your Blog and will attract more visitors or you'll get your visitors coming back. But you should also make your content High quality so that will exactly happen to you.And because the default design of the blogger comment system is very simple. And over 70 % of Blogger / Blogspot bloggers are already using their customize threaded comment system for their blogs. So let's start this tutorial for our Trendy Comment Style for Blogger.
How to Change Threaded Comment Style on Blogger
- Go and Login to your Blogger Blog.
- Go to Templates > Edit HTML.
- Then Paste the below code below <head>.
<link href='http://fonts.googleapis.com/css?family=Trade+Winds' rel='stylesheet' type='text/css'/>
This is the script of the font we are using with our trendy threaded comment style for blogger.
- Then After that, Paste the code below above ]]></b:skin>.
/* Comment Design by TronicFlow.com---------------------------- */
.comments .comment-block {
background: #FFFFFF;
color: #000;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 2px solid #1573A3 !important;
font: 1em Oswald;
}
.comments .avatar-image-container, .comments .avatar-image-container img {
max-width: 1000%!important;
display: block;
max-height: 1000%!important;
width: 48px!important;
height: 48px!important;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-right: 10px;
}
.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;
margin-left: 5px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
#comments h4 {
display:inline;
line-height:40px;
padding:10px;
}
.comments .continue a {
background:#0d86cc;
text-align:center;
padding:10px 0;
display:none;
}
#comments h4,.comments .continue a {
text-transform: uppercase;
font-family: Oswald;
font-size: 24px;
font-weight: normal;
line-height: 25px;
margin-bottom: 35px;
}
.comments .comments-content .comment-content {
margin: 0;
padding: 20px;
padding-bottom: 30px!important;
padding-top: 15px!important;
border: 1px solid #d2d2d2;
}
.comments .user a {
font-family: 'Trade Winds', cursive;
color: #444!important;
font-size: 18px;
line-height: 25px;
text-transform: capitalize;
margin-top: 20px;
font-weight: 600;
}
.comments .comments-content .datetime {
cursor: pointer;
float: right;
padding-top: 6px;
padding-right: 20px;
}
.icon.user {
background: url(http://png-4.findicons.com/files/icons/195/office_men/16/man_dbrown.png) no-repeat;
height: 12px;
width: 16px;
display: inline-block;
margin: 0 0 -0px 6px;
}
.comments .comment-thread.inline-thread .user a {
font-size:13px;
margin: 0px;
padding: 0px;
}
.comment-actions {
background: #f2f2f2;
padding: 8px;
margin-left: 435px;
border: 1px solid #ddd;
float: right;
margin-right: 5px;
}
.comment-thread a {
color: #777;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .icon.blog-author {
display: inline-block;
height: 18px;
margin: 0 0 -2px 6px;
width: 100px;
background-image: url(http://png-2.findicons.com/files/icons/760/hand_drawing/16/user_admin.png);
}
.comment-editor{width:101%!important} .comment-form{width:100%;max-width:100%}
#content-wrapper2 { background-color:fff; border: 1px solid #ddd; margin-top: -90px; }
- Then just hit Save and you're Done.
TROUBLESHOOTING:
If the trendy comment style for blogger is not working, search your template codes if there are also same CSS codes and delete them, Because our code might be overiding the comment CSS code of your template.Final Words:
If you have any suggestions about the design of our threaded comment style for blogger, you can comment it out below and we'll try if it will fit to our comment design. You are free to share this article but make sure you give credits to us. Thanks and happy Blogging!
0 comentarios:
Post a Comment