How to Highlight Author Comment in Blogger!

In the previous post I had shown How to Add Badge on Author Comment in Blogger. As result of the author badge visitor can easily find out the author comment in your blog. Beside that there are several way you can highlight author comment in your blog. One of the way is highlighting author comment in blogger by changing the background color. In this post I'm gonna show how to highlight author comment background in blogger.

If you are blogging on blogger platform then you can highlight author comment by making change in background color. As a result of the trick the author comment of your blog will have different background color and border that will make it  different from other comment. To make this change you just need to add a simple code in your blog. Lets see the procedure...

Demo:

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.


Highlight Author Comment in Blogger:

• First Sign into your Blogger Account and go to Dashboard.
• Then click on Template and then click on Edit HTML button. You will land on the HTML page.
• Here in the HTML page find  </body>  tag and Paste the following code just Above it.


<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #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>


• Now click on Save Template button to apply it.

Customization:

• Border:
• To increase the border size, increase 1px value.
• To change border style, change solid to dotted, dashed, inset, outset etc.
• To change the border color, change #FFA500 code. (Use this Code Generator)
• Background:

• To change the background color, change #F1F1F2 code. (Use this Code Generator)
• To change the background image, Replace this URL http://www.blogblog.com/1kt/transparent/white80.png with your image URL.
• Font:
• To change the font color, change #444444 code. (Use this Code Generator)
• To change the font size, change the font size value '12px'.

Stay with www.iTTimebd.com for more IT related Post

How to Add Badge on Author Comment in Blogger!

There are lot of blogging platforms are available, but among them I like Blogger.com most, because in the blogger platform you can customized almost everything. And I have also published some post about blogger and blogging. In this post I am gonna share another interesting trick about blogger.com. Today I will show how to Add Badge on Author Comment. As a result of this trick all the comment made by the author will be highlighted.

• Related Post: Posts on Blogger Comments Customization

As I always say that comments are the best way for making an good relations with the visitors. And you should always replay to your visitors comments and visitors give more importance on blog's author comments. But if your blog gets a lots of comment then it is too difficult to find the comment made by the author. But if you add badge on the author comment in your blog then it will be very easy to everyone to identify the author's comment. Beside that it will make your blog more stylish, smart and attractive. Let's see how to do it...

               Demo---> 

After going through this post you will add a badge in your blog's author comment like shown in the above image.

• First Sign into your Blogger Account and go to Dashboard.
• Then click on Template and then click on Edit HTML button. You will land on the HTML page.
  
• Here in the HTML page find  </body>  tag and Paste the following code just Above it.


<script type="text/javascript">    $(function() {      function highlight(){        $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)          .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)          .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtk67BQLj9HRQON_bpOQm0Ze785ewUeBmMhyphenhyphenqQnTEqmQcgNevO1mNdkjSoNGLpam7j_0F5VCOw7V0KKb0vSU7T-Zmzavmx1txW5FZapleFFaZwGjggPd68WVZyU7aM0vqE7ALnfIdVAWFX/s1600/Author.jpg&quot;) no-repeat bottom right&#39;)          .css(&#39;padding&#39;, &#39;10px&#39;);          }          $(document).bind(&#39;ready scroll click&#39;, highlight);                       });</script>


• Now click on Save Template button to apply it.

Customization: If you want to use Author Badge of your own choice then just replace the Image URL in the above code. Image URL is in blue color.

That's it. Now view the post that contains author comment and you will see that the author comment is highlighted with badge.

Stay with www.iTTimebd.com for more IT related Post