domdomrung

Notifications Comments Blogger Google Plus Modified

Google plus notification display it very  interesting.But if the notification would be more interesting to blog again, right, oh yes it works is to display the comments in a blog entry into a notification.So if there is some sort of notification enter comments. almost the same on facebook anyway. 


If you are having problems with installing please ask in the comments, although many code but it's a good result so that no number is entered comments. such notice in sosmed like that.



1. First add the JQuery above the </ head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
2. ADD CSS before ]]></b:skin> or </style>   

/* Notifikasi Komentar*/
#show-total {
position:absolute;
top:5px;
right:285px;
z-index:9999;
cursor:pointer;
float:right;
}
.total-show {
background-color:#FF0000;
color:white;
padding:1px 5px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url(&#39;http://2.bp.blogspot.com/-iW9KOBpdaEQ/U7NJFUtfHaI/AAAAAAABpdY/HB_NlYjIRkI/s1600/notif.png&#39;);
display:block;
position:absolute;
top:12px;
right:300px;
opacity:.5;
z-index:999;
transition:all 0.4s ease-out;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuiSalZcU-Qj6Hj8RRq96EkPlcV1gwZDaoyWXJgcfcwRcbooYIQMZ_vf8Q6T-ZKM_gVDr7HFJ3cnwivcuUE0pDzMnT9VdcdB-GGKMGAgNQEiiKhTnrD7WIgvcmedr662wMoME7NEmzoag/s1600/lonceng.png&#39;);
display:block;
position:absolute;
top:12px;
right:300px;
opacity:.5;
z-index:999;
transition:all 0.4s ease-out;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
  width:300px;
  position:absolute;
  top:61px;
  right:-381px;
  z-index:999;
  background-color:#192028;
  padding:15px 13px 25px 15px;
  color:#666;
  font-family: Arial, Sans-serif;
  border-top:8px solid #ff6c60;
  transition:0.5s ease;
}
#cm-wrapper:before {
content:&quot;&quot;;
width:0;
height:0;
position:absolute;
top:-24px;
left:6px;
border:8px solid transparent;
border-color:transparent transparent #ff6c60;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#comments-container {
  color:#666;
  font-family: Arial, Sans-serif;
}

#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}

.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
width: 7px;
    background-color: #111;border-radius:3px;
}
.vscrollerbar {
width: 7px;
background-color: #444;border-radius:3px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:3px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:3px;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.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 #28313b;
  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 50px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#168980;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:50px}
.cm-outer img {
  display:block;
  float:left;
  background:#8fa2cb url(&#39;http://img1.blogblog.com/img/anon36.png&#39;) no-repeat 50% 50%;
  overflow:hidden;
  border-radius:100px;
  position:absolute;
  top:10px;
  left:0;
  border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#168980;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}

.bg_hitam{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index:99;
        opacity:.30;
}
img.cm-smiley  {
  float:none;
  position:relative;
  display:inline-block;
    width:12px !important;
    height:12px !important;
    top:2px;
    border:none;
    border-radius:2px;
background:none;
}
3. Save the following code just above the </ body>

<script src='https://googledrive.com/host/0BxgcAWWTg9yaOUZyemdqc3lScjA' type='text/javascript'/><div id='notif' title='Notifikasi'/><div id='notif2' title='Notifikasi'/><div class='bg_hitam' id='bg'/><div id='cm-wrapper'><div class='flexcroll' id='cm-scroll'><div id='comments-container'/></div></div><div id='show-total'/><script type='text/javascript'>//<![CDATA[var originalTitle = document.title;var cm_config = {home_page: "http://www.mybloggertricks.org/",max_result: 18,t_w: 50,t_h: 50,summary: 9999,new_tab_link: false,ct_id: "comments-container",new_cm: " Komentar Baru!",interval: 30000,alert: true,alert: function(total) {document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';document.title = '(' + total + ') ' + originalTitle;}};$('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-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();});});setTimeout(function() {$('.jsfiddle-demo').each(function() {$(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);//]]></script><script src='https://googledrive.com/host/0BxgcAWWTg9yaTTB1dFFQMHktaWc' type='text/javascript'/>
Labels: ,