Add Like Thumb in Blogger Comment Box

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 */
.like-cm{margin-top:15px;width:10px;height:10px;background:url( 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="[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. 
Open Comment Box
Rizwan Saharan says: 9/14/2013

Well Share brother this is very interested article and will help to check readers mind that they like our posts or they just come to our blog to post their blog links.
in that case this post will helpful.
Fazle Bro i want to ask you that how can we customize comment section?
I Mean I see you add one image and some texts above comment box how can i do that i really need that?
Waiting for your Positive Answer On that..

Mohammad Fazle Rabbi says: 9/14/2013

Hi Saharan. Thanks for your nice comment.I have already provide a tutorial about this. Please follow the below link to get the tutorial--

Rizwan Saharan says: 9/14/2013

Oh! Thanks Fazle Bro for your Fast Reply on my Issue.

Contact Form


Email *

Message *