Here we will override your default comment styles with our custom CSS code. We will customize almost everything from profile avatar images to reply and delete links. All I want from you is careful implementation of the easy steps below:
- Go To Blogger > Template
- Backup your template - You must keep a backup of your copy if incase you wanted to undo steps
- Search for this piece of code:
<b:includable id='threaded_comment_css'>Click the highlighted region to expand its code. You will now need to replace all the CSS code inside <style> and </style> with the following styles:
- /* Fancy Blogger Threaded Comments by MBT starts */ .comment-thread ol {
counter-reset: mbt-comments;
}
.comment-thread li:before {
content: "\25C4"counter(mbt-comments) "\25BA";
counter-increment: mbt-comments;
font-size: 16px;
position: relative;
top: 100px;
font-weight: bold;
font-family: arial, georgia;
color: rgb(199, 199, 199);
left: -110px;
padding: 4px 8px;
}
.comment-thread ol ol {
counter-reset: mbt-comments-sub;
padding-top: 20px!important;
margin-bottom: 25px;
}
.comment-thread li li:before {
content: counter(mbt-comments) "." counter(mbt-comments-sub);
counter-increment: mbt-comments-sub;
font-size: 14px;
position: relative;
top: 100px;
left: -80px;
}
.comments .comments-content .comment-thread ol ol {
padding: 0px 10px 40px 40px;
border: 1px solid #ddd;
box-shadow: 3px 4px 9px rgb(218, 218, 218);
margin-top: 10px;
}
.comments .comments-content .comment-thread ol ol li {
margin-bottom: -40px;
}
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em; border:0px !important;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
width:88%; margin-left:70px;
}
.comment-form {
max-width: 100%;
clear: both;
}
.comments .comments-content .comment-thread ol li {
margin-top: -30px;
}
.comments .comment .comment-actions a {
cursor: pointer;
color: rgb(46, 46, 46);
padding: 2px 3px 2px 30px;
Position: RElative;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 12px;
font-weight: 700;
margin-right: 15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiffZz4e9JspsRHmRbo8lCK7S8k7E8RXzmbz0VrmrsMrPlvQuzbBfJIivHk1Ad-uZlyAgSp_hxe3ulKlJCuWDo2rGZ_TBE9Lq-TimHVE6GXcU7hk5WQARH6omz57HwO8n95fkhTrWNkF3c4/s1600/reply.png) no-repeat 9px 0px;
float:right;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .comment-thread ol li {
border-bottom: 0px dashed rgb(196, 196, 196);
margin-bottom:25px
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px;
font-size:12px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border:0px;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-weight: 700;
font-size: 14px;
font-family: 'Open Sans Condensed', sans-serif;
color: #333!important;
}
.comments .comments-content .icon.blog-author{
position: absolute;
top: 52px;
right: -36px;
margin: 5px 0px 0px 0px !important;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFZE6_GPEbkN65NpBPTS4yxEGsTCL7GcjyQ-BxbxmEDbpjSE4W2oHSBFIPEwhSe1K8gr_rOXix-Tz8AkNq7j3cUEXaYyTRafWRBNZ_rqA74bQWaZaa5VmrQz5ifsZG24zYFZHH124TBuBS/s320/aDMIN.png") no-repeat scroll 0% 0% transparent;
width: 90px !important;
height: 90px !important; }
.comments .comments-content .datetime, .comments .comments-content .datetime a {
margin:0px;
display: block;
line-height: 30px!important;
font: italic 11px georgia;
width:180px;
}
.comments .comments-content .datetime a {
text-decoration:none;
}
.comments .comments-content .comment-header
{
margin:0 0 15px 10px;
}
.comments .comments-content .comment-content {
margin: 0 0 10px -50px;
}
.comment-header a {
color:#333;
}
.comment-header a:hover {
color:#666;
}
.comments .comments-content .comment-content {
text-align:justify;
text-align: justify;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 13px;
border: 1px solid #ddd;
padding: 20px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: none;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
margin-top: 15px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
box-shadow: 2px 2px 0px rgba(0,0,0,0.13)
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
.comments .comments-content .comment-replies {
margin-top: 3em;
margin-left: 40px;
font-size: 12px;
}
.comments .comments-content .comment-replies a {
color: #333;
}
/* For Animating Comment Header*/
.trigger {
margin-top: 3px;
font-weight: bold;
color: #A1A1A1;
cursor: pointer;
float: right;
font-size: 12px;
margin-right: 10px;
}
.triggeractive {
color:rgb(255, 5, 5);
}
.toggle_container {
overflow: hidden;
clear: both;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin-top: 10px;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
/* Fancy Blogger Threaded Comments by MBT ENDS*/
Make these Customizations:
To be honest you will need to use browser inspector to fill up all the missing gaps in alignment and styling. Since every template is coded differently therefore there will be slight difference in how this Design appears on your blog. So use Chrome and its inspect element to perfect things.
- The yellow highlighted parts represent the Hexadecimal code for the two arrows that surround the Comment Counter Number. You can change this if you know how to edit the content property else leave it default.
- The brown highlighted code represents the icon next to reply and delete link. you can replace it with your own custom image link if you wish.
- The green highlighted code represents the Admin Ribbon. You can change it also if you wish
- Leave all other styles default because they will blend a light background very nicely unless your blog has a black background.
4. Next search for this #comments h4 and replace this CSS ID completely with this one:
- #comments h4{ color: #4E555A;
font-size: 25px;
font-family: 'Open Sans Condensed', sans-serif!important;
line-height: 1.6em !important;
font-weight: bold;
margin: 20px 0 50px 0px;
padding: 5px 0 5px 55px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsc3XoUTGJiXnNi_Nvr0bSQScpAGby43XKfZC5FFq9-mDoUEZjp5A7JQPTXHZX_QZgGWmLlgS6br5RMEPlqbRVHbU4X3PfjzgyYZcN-CYO6-LdpPQpz2DwXvGzTcRSOenq3HzfdFVwt6N-/s1600/mbt-postcomment.png) no-repeat 5px 10px;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.13);
border: 2px dashed #DDD;
border-radius: 4px;
}
5. Save your template and you are half done!
0 Comments:
Post a Comment