Google+ Style Sticky Comments Bar for Blogger with Auto Refresh & Notification

Google+ Style Sticky Comments Bar for Blogger with Auto Refresh & Notification

14
data:blog.title
notification

Generally when we sign in to our Google Blogger account then we can see a notification bell where we get information about number of sharing's or added back to you by others and some notification from Google. So I have created this notification and integrated with recent comments widget. By adding this widget a notification bell will appear at the top right side of your blogger template. And when you click on it this will display recent comments. And if you get new comments then it will automatically notify you with the number of comments with yellow color.

comments

The main features of this widgets are-

  • You can save your space by using this recent comment widget.
  • It's looking very professional and Google+ style. You can instantly understand if anybody made new comment on your blog.
  • Customized Color Blue and black added to make the comment body more attractive.
  • Sticky comment bar which will scroll with mouse from top to bottom.
  • Automatically refresh to notifying the new comments.
I hope by using this you will get a new experience. So let's proceed to the tutorial.  

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Now click on Edit HTML-> Unfold code  

Step 3
 Now Find this code ]]></b:skin> by pressing Ctrl+F 
   
Step 4 Paste the below code  Before/above ]]></b:skin>  

/*Recent Notification by http://www.bloggerspice.com */
#show-total {
  position:fixed;
  top:8px;
  right:288px;
  z-index:9999;
  cursor:pointer;
    float:right;
}
  .total-show {
    background-color:#f1c40f;color:white;padding:2px 6px;font-size:11px;border-radius:4px;font-weight:bold;
  }
#bsnotif {cursor:pointer;}
#bsnotif:before {
  content: url('http://1.bp.blogspot.com/-y3r9wq1xbv8/UomjyXNe8vI/AAAAAAAAFKU/Agg_ktTrSY4/s1600/BS+Bell.png');
  border:1px solid #b6b5b5;
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;
  opacity:.5;
  z-index:9997;
  transition:all 0.4s ease-out;
}
  #bsnotif:hover:before {
  opacity:1;
}
  #bsnotif2 {cursor:pointer;display:none}
#bsnotif2:before {
  content: url('http://1.bp.blogspot.com/-y3r9wq1xbv8/UomjyXNe8vI/AAAAAAAAFKU/Agg_ktTrSY4/s1600/BS+Bell.png');
  border:1px solid #b6b5b5;
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;
  opacity:.5;
  z-index:9997;
  transition:all 0.4s ease-out;
}
  #bsnotif2:hover:before {
  opacity:1;
}
#bs-wrapper {
  width:352px;
  position:fixed;
  top:61px;
  right:-381px;
  z-index:9999;
  background-color:#222;
  padding:15px 13px 25px 15px;
  color:#666;
  font-family: Arial, Sans-serif;
  border-top:8px solid #0BAAF4;
  transition:0.5s ease;
}
#bs-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
left:58px;
border:8px solid transparent;
border-color:transparent transparent #0BAAF4;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#bscomments-container {
  color:#666;
  font-family: Arial, Sans-serif;
}
#bscomments-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
}
  .cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  position:relative;
  border-top:1px solid #333;
  border-bottom:1px solid #111;
  margin-right:10px;
}
.cm-outer code {
 color:#a6a658;
    font-size:11px;
}
  .cm-outer li.selected {
    border-left:4px solid #fffe8c;
}
  .cm-outer li:first-child {
  border-top:none;
}
  .cm-outer li:last-child {
  border-bottom:none;
}
  .cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 60px;font-size:12px;font-weight:normal !important;}
  .cm-header a {color:#04BDFA;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {
  display:block;
  float:left;
  background:#8fa2cb url('http://4.bp.blogspot.com/-mo1J0h7bNss/UomkmGX3JnI/AAAAAAAAFKw/LOWcvur3AJI/s1600/BS+anon.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:100px;
  position:absolute;
  top:10px;
  left:0;
  border:3px solid #3d464f;
}
.BS-Notif-footer {margin-top:7px;}
.BS-Notif-footer a {color:#04BDFA;text-decoration:none;}
.BS-Notif-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='http://1.bp.blogspot.com/-YIbzE9h6c1E/Uomj0AuXrnI/AAAAAAAAFKc/EqSSkKllzbo/s1600/BS+openid.gif'] {
content: url(http://2.bp.blogspot.com/-qmTXacYtxKU/Uomj91RBZnI/AAAAAAAAFKk/-j45gU0tQMQ/s1600/BS+gravatar.png);
}



Optional Step

Step 5 Now find </head> by Pressing Ctrl+F 

Step 6 And Paste the below code above </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Note: if you already added this JS code in your template then don't follow  step Optional step.

Step 7 Now find </body> by Pressing Ctrl+F   

Step 8 And Paste the below code above </body> and save your template


<div id='bsnotif' title='Notification'></div>
<div id='bsnotif2' title='Notification'></div>
<div class='bs-ground' id='bg'></div>
<div id='bs-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='bscomments-container'></div>
</div>
</div>
<div id='show-total'></div>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://bloggerspice.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "bscomments-container",
    new_cm: "Blogger Spice!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#bsnotif').click(function(){$("#bs-wrapper").css({right: "0px"});$("#bg, #bsnotif2").show();$("#bsnotif").hide();});$('#bsnotif2').click(function(){$("#bs-wrapper").css({right: "-381px"});$("#bg, #bsnotif2").hide();$("#bsnotif").show();});$('#bg').click(function(){$("#bs-wrapper").css({right: "-381px"});$("#bg, #bsnotif2").hide();$("#bsnotif").show();});document.getElementById('bsnotif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#bs-wrapper").css({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
//]]>
</script>
<script src='http://bloggerspicebd.googlecode.com/files/BS%2BNotification.js' type='text/javascript'/>




Customization

  • Replace http://bloggerspice.com  with your blog URL
  • Change max_result: 18, digit to select the number of Comments to display 

Source


  • http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html
  • http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html



If you face any problem the feel free to leave a comment below. I will reply you as soon as possible. 
Google+ Style Sticky Comments Bar for Blogger with Auto Refresh & Notification
4 Stars stars - "Google+ Style Sticky Comments Bar for Blogger with Auto Refresh & Notification" Generally when we sign in to our Google Blogger account then we can see a notification bell wh...

Post a Comment

Oh bro I was forget it..But I regularly communicate with Brother Taufik Nurrohman. Because I am learning from him. And He already knows about it.

Thankx bro Rabbi..Your post is awesome And blog template design is so beautiful..
Plz inform me that how can i expand both site of blogger home page?????..Reply soon..

Hi Salim..find out #outer-wrapper { ......width:1100px;............. here width maybe 1000px or 970px whatever. Now increase the 1100px or 1200px in your template. it will increase as well.

i like it bro. But Kang ismet is angry to you see the post here http://blog.kangismet.net/2013/11/jadilah-pencuri-pintar.html

Hi Cindy thanks for information..But I have added his blog link in credit section. So I don't know why he has done this? :-?

oh,,, I just knew that this turns out to mean kang ismet.
Greetings ok.

Awesome cheer

Hello Sir h r u?
sir i'm pasting all these script in my blog but sir he is not working in my blog please help me my blog is this
http://urdupoetryjoke.blogspot.com/

and sir i'm trying other blog on hoe page url he is showing all comment

Hi Saira...This widget will not work in your blog because you are using Tabbed comment Blogger+Facebook comment. And this widget replaced original blogger comment system. Because I have check my code in my designed template where I am using Google+Facebook tabbed comment system but there this widget working smoothly.

Hi Thanks Mohammad Fazle Rabbi for reply.
sir see this http://zaatsezaattaak.blogspot.com/2014/12/buss-ek-baar-hi-dekhnay-gaya-tha-uss-ko.html link this blog using tabbed comment blogger+facebook same for me plz check again bro my link http://urdupoetryjoke.blogspot.com/

Hi Thanks Mohammad Fazle Rabbi for reply.
sir see this http://zaatsezaattaak.blogspot.com/2014/12/buss-ek-baar-hi-dekhnay-gaya-tha-uss-ko.html link this blog using tabbed comment blogger+facebook same for me plz check again bro my link http://urdupoetryjoke.blogspot.com/

I just checked your blog it is working fine.

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 *