[Update] Add Stylish Background In Author Comments In Blogger

Blog design is very important thing to impress your viewer.Today we will learn how to add stylish background in author comments and make it highlight.May be you have seen stylish highlighted background of admin comment on blog of some on.Yes it is impressive and viewers can focus more easily on admin comments.

why to highlight author

If you are using blogger template, which are very simple but we can make them stylish for changing background by adding some widgets and modifying the template to our requirement.the background of author comment in templates given by blogger is very simple and not highlighted.We have plus point in blogger that we can change author background by editing the template.It makes your blog more stylish.

In the above image you can see the sample of this widget.The author reply is highlighted and background is changed.All the comment of admin author become highlighted and background become replaced with new stylish one.You may have more than one author but this will work properly.The background color is sliver light and blue colored admin is highlighted. 
Also:Add image hover effect in blogger

How to change background of author comment

step 1:First login to blogger account

step 2:Edit template, click inside template are and press ctrl+f 

step 3:New search box appear at the top right corner.

Then find this code

</body>

step 4:Now paste the given code above </body>

<!--author comment background start-->
<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/AVvXsEjh8FB0YzCL21cOMyRt8DYQ2UkHP-MMdBJiV86SbzUu4S2nWReUj4wT5aP_MfkGtM34lmxTS7eagfV5l8MoZ0gCF_FzWh6mi__IkiMZfvZKhfFtmo9WCcOw2BfAjCbtGXoA4ydyMiZoFeDE/w140-h126-p/admin-comment-button.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://mx-machine.blogspot.com"> Widget</a>
<!--author comment background ends-->

step 5:save the template and go  to you blog post where author comment are present then check that background of comments changed.If you face any problem please inform me.

Share this post