Add A Dissimilar Background For Writer Comments Inwards Blogger's Threaded Comments
Monday, April 20, 2020
Edit
In this tutorial nosotros volition larn how to highlight the writer comments in addition to thence that they volition convey a dissimilar background color, border, or anything that makes them stand upward out from the others. To attain this, nosotros postulate to add together a code inward the Blogger's template in addition to to modify the mode according to our preferences.
Step 2. Click anywhere within the code expanse in addition to endeavour to detect - using CTRL + F keys - this tag:
Step 3. Just to a higher house it, glue the next code:
Border:
The trouble marked inward orangish represents the border's style.
What it tin live on done:
The trouble marked inward bluish represents the background's style. You tin utilization a patently color or an image. By default there's a combination of both (a white transparent picture amongst a grayness patently color).
To change/add:
Font Color:
To modify the font's color, supplant the #444444 color value inward light-green amongst your own. (you tin utilization this tool to detect the hex code of your desired color)
Font Size:
Modify the value inward cerise past times increasing/decreasing the "12" value inward company to modify the size of text.
Step 4. Now Save your Template.
To customize the entire mode of threaded comments, delight banking concern correspond my previous tutorial on How to Customize Comment's Background, Font Color in addition to Border inward Blogger.
How to highlight writer comments inward Blogger:
Step 1. Go to Template, click on Edit HTML
Step 2. Click anywhere within the code expanse in addition to endeavour to detect - using CTRL + F keys - this tag:
</body>
Screenshot:
Step 3. Just to a higher house it, glue the next code:
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
business office highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px enterprise #FFA500')
.css('background','#F1F1F2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
Customizing the Author Comments:
Border:
The trouble marked inward orangish represents the border's style.
What it tin live on done:
- 1px - you lot tin growth the value to modify the border's thickness
- solid - modify the border's mode to dotted, dashed, inset, kickoff etc.
- #FFA500 - this is the border's color value, modify it amongst your ain color
The trouble marked inward bluish represents the background's style. You tin utilization a patently color or an image. By default there's a combination of both (a white transparent picture amongst a grayness patently color).
To change/add:
- a dissimilar color: supplant the #F1F1F2 value amongst your ain (use this tool to detect the hex code of your desired color)
- an image: supplant the defaul url http://www.blogblog.com/1kt/transparent/white80.png with that of your picture
Font Color:
To modify the font's color, supplant the #444444 color value inward light-green amongst your own. (you tin utilization this tool to detect the hex code of your desired color)
Font Size:
Modify the value inward cerise past times increasing/decreasing the "12" value inward company to modify the size of text.
Step 4. Now Save your Template.
To customize the entire mode of threaded comments, delight banking concern correspond my previous tutorial on How to Customize Comment's Background, Font Color in addition to Border inward Blogger.