Add Like Thumb in Blogger Comment Box

Add Like Thumb in Blogger Comment Box

3
data:blog.title
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(http://2.bp.blogspot.com/-QkxIAnGY3HQ/UjQoDO_xd3I/AAAAAAAAEqw/7iZbk9v4DtI/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. 
Add Like Thumb in Blogger Comment Box
4 Stars stars - "Add Like Thumb in Blogger Comment Box" You would see in CommentLuv widget thumb icon and if anybody like a comment then they can clic...

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..
Thanks.

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

http://www.bloggerspice.com/2013/01/add-image-and-message-above-blogger_28.html

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

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *