Note: Since, dissimilar blogger templates are coded past times dissimilar designers. Therefore, nosotros wish you lot to showtime decease rid of all the previous CSS coding that you lot are using from the styling of your comments.
How to Exactly Find Which CSS Class to Edit:
Before, nosotros teaches you lot how to trend your comments, it is essential to decease few tips or tricks to encounter how you lot tin precisely uncovering that which CSS Class or ID You should hold out editing to decease the undertaking well-done. Google Chrome as well as Mozilla Firefox come upwards amongst roughly bunch of handy tools for spider web developers. The tool “Inspect Element” is a magic wand for a developer.
Simple Hover your mouse over whatever chemical division on a spider web page, correct click as well as direct “Inspect Elements”. Now a novel panel would appear at the bottom of your screen. It would hold out separated into 2 rows. In the showtime row, you lot volition encounter the Source code as well as CSS coding inward other. You tin edit the CSS to examine few things similar Margin, padding, background color as well as etc. You tin fifty-fifty add together your custom CSS inward a Certain Id. It is similar your really ain developing tool. Though, the 2nd you lot volition refresh the page everything would hold out dorsum to normal. To brand permanent changes, you lot accept to utilization the same CSS inward the StyleSheet of your template.
Styling Post Author Avatar:
The avatar is a sort of picture that represents your identity. However, sometimes a somebody mightiness similar to accept rounded avatar rather than having a unproblematic rectangular one. The implementation is pretty much similar just tin hold out done amongst CSS as well as all that you lot demand is the next chunk of CSS coding. You tin also add together your ain 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 company #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 amongst circular shape you lot tin just utilization the next code, just glue it inward the CSS coding of your template (TIP: Go to Blogger.com >> Template >> Edit HTML >> Search for Skin as well as higher upwards it glue the next code).
Styling Comment Body inward Blogger:
Styling the comment trunk for the users every bit good every bit the writer is something, that gives life to your system. It allows the things to piece of occupation inward a systematic manner. It holds everything together. For Example, a user left a comment since the trunk was non well-formed the text overflowed. Therefore, it is essential to give proper padding as well as margins thus that everything looks nifty as well as clean.
#comments {background-color: #fff;
padding-top: 20px;
border-top: 1px company #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 company #ddd;
background:#fff;
background-color:#fff;
padding:10px;
padding-right:0px;
padding-left: 0px;
}
.comment-header {
border-bottom: 1px company #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 company #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 illustration of a code that tin hold out used. You tin customize it according to your wish needs.
Styling Comment Author Name as well as Meta:
The Blogger platform has the robust functionalities that could tending you lot inward designing the comment writer advert every bit good every bit the Meta information. This allows the designers to customize the date, fourth dimension as well as the advert of the author. Here is a sample code that you lot tin merely re-create as well as glue into the StyleSheet of your template.
You tin also add together your custom styles similar tin alter the fonts, color, size as well as anything that you lot like. Whatever you lot imagine tin hold out 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/AVvXsEjGwhEbSNuNCVryg1y_JXgLHtKSJ2ShveOd-uepNV_RIttmRhrftC5kE8crF_hcH0ui5JppylfKxEULfVROCotXCxOG3mm8q5GQISHEoLYKYsRsCzcv4AV6UytWnFYdkmZp7XkcC8tGyWuk/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” push clitoris inward Blogger:
Almost all blogger templates accept a respond push clitoris on comments. However, it entirely plant amongst threaded system. Now a day, all the default blogger templates are connected amongst threaded comments. So hither is the illustration of the CSS that you lot tin straight re-create glue inward the StyleSheet of the template.
.comment-actions {background: #f2f2f2;padding: 8px;margin-left: 435px;border: 1px company #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 frequently you lot accept seen that the comment of the post service writer is highlighted amongst dissimilar backgrounds or a pocket-size tag similar ‘Editor” or an additional badge is assigned to their name. This helps users to set the existent author.
This tin hold out done amongst the tending of .icon.blog-author that helps you lot to stylize the comments of the post service writer differently. Here is the illustration that you lot tin straight re-create as well as glue inward 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/AVvXsEj1JI385-4qgR11IT5WG3LD7QbTTMeHhcJrfXHUvjSxciem5yYdoGcelqI90BJ0irK05fWbG-SNTfylYyvMwhtOb8Kjst2UHdFz90pYzcIifttmcFWNzMes2kS9XF20y97l3FKdCeC-9GAK/s1600/Verificon.png);}
We promise this tutorial has helped you lot inward learning how to exercise a custom trend commenting organisation inward blogger. If you lot human face upwards whatever difficulty or has whatever proposition for us as well as thus experience gratuitous to permit us know past times leaving a comment below.
No comments:
Post a Comment