Tuesday, October 14, 2014

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.


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---> 
Author Badge


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.
    edit blogger template
  • 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

1 comment:

  1. Most Welcome Cindy Dy. Keep visiting and sharing iTTimesbd.com for more helpful iT related Post.

    ReplyDelete