Tuesday, April 15, 2014

Highlight Author Comments in Blogger websites with CSS

Change Author Comments Color Style
Hi friends, you surely have seen on many blogs and websites whenever an Admin of the blog or website make a reply to your comments, its comment's color and style is changed from other comments. These admin styled Comments are the best way to make good relationship with blog visitors or Followers.
So do you have a blog and your blog is getting good traffic then your blog will also be getting many comments, that may be positive or negative related to your blog website content.


 If you want to highlight your comments in your blog website, then here is the trick to do that and make your comments stylish,colorful and recognizable to others.Here I am going to share the trick to highlight Author Comments in Threaded comments and this trick also work in basic commenting system. This is coded using simple CSS and Jquery.

How To change Author Comments style In Blogger

Learn how to change blogger admin comments style and color in blogger template using CSS and Jquery for better interaction with your blog's users in easy steps.

Step 1.  Login to Blogger >> Go to Dashboard >> Template >> Edit Html

Step 2.  Find </body> and copy the following code above it [Tip: Ctrl+F]
<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/AVvXsEgUCwe_QieE5CTKyqafaxfCjqNUBipAAmS415-nA_0R3MMAZj42LZPSAOhCCa_2ooO0-Hnse_Ljk1nr30JCAobEnEjk1fHCvybfuDxzb0DJ2M4sD6MNJTcIaVhmHizPwV8qzzKb1-yzEZ4/s1600/admin_comment1.png&quot;) no-repeat bottom right&#39;)
          .css(&#39;padding&#39;, &#39;10px&#39;);
          }
          $(document).bind(&#39;ready scroll click&#39;, highlight);
   });</script><a style="display:none" href="http://www.blogtipsuk.com" >Blogger seo tips</a>
Step 3.  Change red color bolded text according to your choice for border of the author comment.

Step 4.  Now save your template and you are done.

Congratulations you are done. If you enjoyed this article please like and share.

No comments:

Post a Comment