|
|
Note: Since, different blogger templates are coded by different
designers. Therefore, we want you to first get rid of all the previous
CSS coding that you are using from the styling of your comments.
How to Exactly Find Which CSS Class to Edit:
Before, we teaches you how to style your comments, it is essential to
get few tips or tricks to see how you can exactly find that which CSS
Class or ID You should be editing to get the job well-done. Google
Chrome and Mozilla Firefox come with some bunch of handy tools for web
developers. The tool “Inspect Element” is a magic wand for a developer.
Simple Hover your mouse over any element on a web page, right click and
select “Inspect Elements”. Now a new panel would appear at the bottom of
your screen. It would be separated into two rows. In the first row, you
will see the Source code and CSS coding in other. You can edit the CSS
to test few things like Margin, padding, background color and etc. You
can even add your custom CSS in a Certain Id. It is like your very own
developing tool. Though, the moment you will refresh the page everything
would be back to normal. To make permanent changes, you have to use the
same CSS in the StyleSheet of your template.
Styling Post Author Avatar:
The avatar is a kind of image that represents your identity. However,
sometimes a person might like to have rounded avatar rather than having a
simple rectangular one. The implementation is pretty much like just can
be done with CSS and all that you need is the following chunk of CSS
coding. You can also add your own custom style
.comments .avatar-image-container, .comments .avatar-image-container img {width: 48px;max-width: 40px;height: 40px;max-height: 48px;background: #FFF;float: left;border-radius: 50%;-moz-border-radius: 50%;margin: 0 10px 0 0;}#comments .avatar-image-container img {border: 1px solid #ddd;}.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;}
To stylize your avatar with round shape you can just use the following
code, just paste it in the CSS coding of your template (TIP: Go to
Blogger.com >> Template >> Edit HTML >> Search for
Skin and above it paste the following code).
Styling Comment Body in Blogger:
Styling the comment body for the users as well as the author is
something, that gives life to your system. It allows the things to work
in a systematic manner. It holds everything together. For Example, a
user left a comment since the body was not well-formed the text
overflowed. Therefore, it is essential to give proper padding and
margins so that everything looks neat and clean.
#comments {background-color: #fff;
padding-top: 20px;
border-top: 1px solid #ddd;
}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
margin-left:60px;
width:490px;
}
.comments .comment-block,.comments .comment-thread.inline-thread .comment {
border:1px solid #ddd;
background:#fff;
background-color:#fff;
padding:10px;
padding-right:0px;
padding-left: 0px;
}
.comment-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.thread-chrome.thread-expanded .comment-header {
width: 412px;
margin-left: 15px;
}
.comments .comments-content .comment {
width:100%;
line-height:1em;
font-size:13px;
margin:15px 0 0;
padding:0;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 22px;
overflow: hidden;
}
.thread-chrome.thread-expanded .comment-content {
width: 380px;
line-height: 22px;
overflow:hidden
}
.comments .comment-thread.inline-thread .comment-actions {
display: none;
}
.item-control.blog-admin {
display: none;
}
.comments .comments-content .comment-replies {
margin-top:0;
}
.comments .comment-content {
line-height: 1.4em;
padding: 15px;
}
.comments .comment-thread.inline-thread {
padding-left: 0px;
}
.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 #d2d2d2;
width:10px;
height:0;
}
.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 .continue {
border-top:0;
width:100%;
}
#comment-editor {
width:98%!important;
}
.comment-form {
width:100%;
max-width:100%;
}
Here is the example of a code that can be used. You can customize it according to your desire needs.
Styling Comment Author Name and Meta:
The Blogger platform has the robust functionalities that could help you
in designing the comment author name as well as the Meta information.
This allows the designers to customize the date, time and the name of
the author. Here is a sample code that you can simply copy and paste
into the StyleSheet of your template.
You can also add your custom styles like can alter the fonts, color,
size and anything that you like. Whatever you imagine can be applied to
your design.
#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 {line-height: 30px;margin: 0;padding: 20px 0 14px 10px;font-size: 18px!important;text-transform: uppercase;font-weight: 400!important;color: #444;}.comments .user a {color: #444!important;font-size: 18px;line-height: 25px;text-transform: capitalize;margin-top: 20px;font-weight: 600;padding-left: 15px;}.comments .comments-content .datetime {cursor: pointer;float: right;padding-top: 6px;padding-right: 20px;}.icon.user {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY68Q8tL69OlkRV0jvi7D4-Zp-R3-rbhQfcYlcNUmycN7693soKmsKequh5SzaruxgMI16A36rMg6pzvU6Ejp8eCrEcxji3piY9uzKfDIPCcYF59hQAoFMRGcQR01meuBaR427QuDj8lPd/s1600/online.png) no-repeat;height: 12px;width: 16px;display: inline-block;margin: 0 0 -4px 6px;}.comments .comment-thread.inline-thread .user a {font-size:13px;margin: 0px;padding: 0px;}
Styling Comment “Reply” button in Blogger:
Almost all blogger templates have a reply button on comments. However,
it only works with threaded system. Now a day, all the default blogger
templates are connected with threaded comments. So here is the example
of the CSS that you can directly copy paste in the StyleSheet of the
template.
.comment-actions {background: #f2f2f2;padding: 8px;margin-left: 435px;border: 1px solid #ddd;float: right;margin-top: -30px;margin-right: 5px;}.comment-thread a {color: #777;}.comments .comment .comment-actions a:hover {text-decoration: underline;}
Styling Post Author Comments Different from others:
Most often you have seen that the comment of the post author is
highlighted with different backgrounds or a small tag like ‘Editor” or
an additional badge is assigned to their name. This helps users to
identify the real author.
This can be done with the help of .icon.blog-author that helps you to
stylize the comments of the post author differently. Here is the example
that you can directly copy and paste in your StyleSheet.
.comments .comments-content .icon.blog-author {display: inline-block;height: 18px;margin: 0 0 -4px 6px;width: 18px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixmbGLs4J1adSghs5RhFAiDSKg3tOIXigf6HQrwuXlaaGOTEhLW0MTFCSeA8XwXdiBiB2DZDgtUB79VdITOqymO7t-Du8ShWwzQfAOHvSvtPL_nCY0KoV9xS2dm7rYVLgWvSbs6uENVKUo/s1600/Verificon.png);}
We hope this tutorial has helped you in learning how to create a custom
style commenting system in blogger. If you face any difficulty or has
any suggestion for us then feel free to let us know by leaving a comment
below.
0 comments:
Post a Comment