Add a Hide / Show Notification Bar With CSS Effects for blogger

Blogger lacks in many features.The main draw back is the limited features it provides.The comment system is  no exception to it.Threaded comments was a addition to the latest blogger comments making it a bit better than it was previously.Threaded comments also allows developers like me to freely customize it due it's open coding system.Previously I shared a method of Thanking Your Visitors for their Comments , after it went viral in almost all blogs , here is another superb trick of adding a non - facebook like button to your blogger threaded comments.So let's begin

Live Demo

Procedure 

• Go to blogger 
• Navigate to Template > Edit Html > Proceed 
• Tick mark Expand Widgets
• Search for 

var items = <data:post.commentJso/>

• Above that line you will  see this particular line 

(function() {

• No replace  (function() { with this code 

var items_copy=[];
(function() {

• Again search for this code : var items = <data:post.commentJso/> 
• Replace it with  

var items = <data:post.commentJso/>;
items_copy=items;

Note:- You can skip the above steps if you have already followed the steps from : Thank Your Visitors For Commenting.If so continue with the steps given below

• Add the following code to after<data:post.commentHtml/> tag in your template. 

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

•  Search for ]]></b:skin> and paste this code before it 

.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQfRxsRJDdd9kQ1PIe8K6jezJj1hwSojtSc8rDgtZcaYjmNtAHBsARoGvrX7eyoidZcCDEKkSevtIrH2dkeE-WJznKF1ON8j7Cw6ilb_KhC5Kn74lqzUuv6HBhruH5NzU1d5HxONJh9o/s10/like.png) no-repeat}

•  Save the template 

If you have any problems in using this trick , kindly use the comment box below and type in your difficulty.We will be glad to help you out

Written by Aman

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.