Add Like Thumb in Blogger Comment Box

comment like

You would see in CommentLuv widget thumb icon and if anybody like a comment then they can click on it to thumbs up. This thumb like helps other visitors to identify which comment is best or others found helpful. There is 2 benefit of this trick that blogger and visitors can understand which comment is logical and important as well as blogger can easily identify the genuine commentator. There are many spammer who just comment only  for backlinks so by using this trick you can easily discourage spammer. On the other hand genuine commentator will motivate to comment and they will actively connect with your blog.

The main aim of this trick is to give likes on your visitors comments by other readers or visitors.

blog comment

Though we have found this in CommentLuv widget but now we will learn that how to add this thumb like in Blogger default commenting system. Generally this code will add reaction in blogger comment box. We have seen in default blogger template some reaction option such as funny, interesting, cool. So I will add this reaction in blogger comment box instead in blog posts. So for adding this trick in your blogger template please follow the below tutorial.


Step 1 Log in to your Blogger Account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  ?

Step 3 Now find ]]></b:skin> by Pressing Ctrl+F 

Step 4 And Paste the below code above ]]></b:skin> 

/*Trick by www.bloggerspice.com */
.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTERKX2-FqYDDBH_4rsGm4J4QRun1ZfCj-6QBxf86uoV3ZRltRa2GilPEZKlQCANWrgEQdWTc-zRifEFuQYPiBjEym_TVuDkjI8avXH0vAT-OIZLoAUD2G5j7wy56mrMeZoyt_ghmJ_jTK/s1600/BS+like.png) no-repeat}

Step 5 Now find code like below

(function() {      var items = <data:post.commentJso/>;

Step 6 And Replace the above code with  below code block

var items_copy=[];(function() {var items = <data:post.commentJso/>;items_copy=items;

Step 7 Now find <data:post.commentHtml/>by Pressing Ctrl+F 
  
Step 8 Now paste the below code after/below <data:post.commentHtml/>

<script type='text/javascript'>var likeurl='<data:blog.url/>';//<![CDATA[for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'<div class="like-cm" onmousemove="likecom('+gl+')"><div id="like-cm'+items_copy[i].id+'"></div></div>';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='<iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"><\/iframe>'}}//]]></script>

If you face any problem then feel free to leave a comment below. I will help you to install it in your blog. 


EmoticonEmoticon