آخر التعليقات مع الإشعارات

إضافة جديدة تتعلق بآخرالتعليقات لكن هذه المرة مع ميزة جديدة وهي الإشعارات الإضافة تظهر إشعارات مباشرة مع نشر اى تعليق جديد بشكل تلقائي وهو مفيد جداً للمدونات التي تكون التعليقات جزء أساسي من نشاطها وهي أيضاً جاذبة للقارئ لكي يتصفح التعليقات الجديد مما يزيد من الزيارات وبإذن الله تنال إعجابكم يمكنك أولا رؤية المعاينة الحية من الرابط التالي

معاينة

والآن مع التركيب : تركب الإضافة في آداة HTML/JavaScript

<style>
#cnmucount {
  margin: -4px -49px;
  z-index: 9997;
  position: absolute;
}
#show-total {
  position: absolute;
  cursor: pointer;
  display: block;
  z-index: 9999;
}
.total-show {
  background-color: #0098d9;
  border-radius: 4px;
  color: white;
  display: block;
  font-size: 11px;
  font-weight: bold;
  height: 15px;
  margin: -7px -16px 0 0;
  text-align: center;
  width: 34px;
  z-index: 9999;
}
#bsnotif {
  background: url("https://lh5.googleusercontent.com/-7Ouuw-OGP3s/VBprcytb9sI/AAAAAAAAEuw/buM-muBUBkQ/s24/comment.png") no-repeat scroll center center #bbb;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  height: 24px;
  padding: 3px 4px;
  width: 24px;
  z-index: 9997;
  position: absolute;
}
#bsnotif2 {
  background: url("https://lh5.googleusercontent.com/-7Ouuw-OGP3s/VBprcytb9sI/AAAAAAAAEuw/buM-muBUBkQ/s24/comment.png") no-repeat scroll center center #0098d9;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  height: 24px;
  padding: 3px 4px;
  width: 24px;
  z-index: 9996;
  position: absolute;
}
#bs-wrapper {
  width:352px;
  position:fixed;
  top:30px;
  z-index:9999;
  background-color:#fff;
  padding:0 13px 0 0;
  color:#666;
  left:-369px;
  font-family: Arial, Sans-serif;
  border:4px solid #0098D9;
  border-left:none;
  transition:0.5s ease;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#cnmucomment-container {
  color:#666;
  font-family: Arial, Sans-serif;
}
#cnmucomment-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width: 5px;
    background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #444;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.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:right;
}
  .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-bottom:1px dashed #777;
  margin-left: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:#555;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 60px 8px 0;font-size:12px;font-weight:normal !important;}
  .cm-header a {color:#0098D9;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#555;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-right:60px}
.cm-outer img {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMl-_bYOJjy6ey2QSB0DzmmXSiC2HuxuCRp20QzcU6t85dm82eg63X3yZRuMIP0GszsJtTpd35TuBsDMurw-3oCA39nP02dOYXF9ICxY7NDV0vTLPRQ5g2rQAnE1HEmYNltI6SS_UVRoxc/s1600/BS+anon.png") no-repeat scroll 50% 50% #ddd;
  border-radius: 100px;
  box-shadow: 0 0 2px #222;
  display: block;
  float: right;
  overflow: hidden;
  padding: 2px;
  position: absolute;
  right: 0;
  top: 10px;
}
.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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPzU0mAYkGM33VzB4UU_zdQl_7ysYQ_n1BK6O3ieL1oW1q83b_GhcumPj61RiyvVXrRurM4MBh8bs0L4GWshpkFHfZYj9YOtD-UqsfwirFkdsVUfzqxK00w2TAGZUicgtSPOZgUXDfMwl9/s1600/BS+openid.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9LceTKaZRNdE-eO8LBfEzT-FQ1_bysrnhOxqtn1_6tvtYqX89_58W48tzXoexaFrimsAhrifvlAimp9x_voRHJp4wTNMFXfwBbcA0CUyB2W1SG5UeAacdzfvNCbmOKC9fZLOVfC1wVZTS/s1600/BS+gravatar.png);
}
.bs-ground{
        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;
}
.myframe {
  display:none;
  width:100%;
  height:265px;
  margin-bottom:5px;
  border-radius:5px;
}
.jsfiddle-demo {
  display:block;
  width:100%;
  height:250px;
  border:1px solid #bbb;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNYhvdMhVnL52U2fwKV33WVhTFz-duN9DdoF8LlQwQkkv_ekaoNgDuGoge8lMn_4AcWnR8eT-szT5ftu_-S0l_WoNbVYiUC4CHHkBtGlHnxUj17v2yESW9Wk0e_NJkFJFry4A159UNmp5W/s1600/bs+loading+dot.gif') no-repeat 50% 50%;
}
.sticky {
    position: fixed;
    top: 80px;
    z-index: 100;
    border-top: 0;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<div class='bs-ground' id='bg'></div>
<div id='bs-wrapper'>
<div id="cnmucount">
<div id='bsnotif' title='Notification'></div>
<div id='show-total'></div>
<div id='bsnotif2' title='Notification'></div>
</div>
<div class='flexcroll' id='cm-scroll'>
<div id='cnmucomment-container'></div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://cnmu.blogspot.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "cnmucomment-container",
    new_cm: " تعليقات جديدة ",
    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({left: "0px"});$("#bg, #bsnotif2").show();$("#bsnotif").hide();});$('#bsnotif2').click(function(){$("#bs-wrapper").css({left: "-369px"});$("#bg, #bsnotif2").hide();$("#bsnotif").show();});$('#bg').click(function(){$("#bs-wrapper").css({left: "-369px"});$("#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({left: "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='https://cnmu.googlecode.com/svn/trunk/2014/comment-Notification.js' type='text/javascript'></script>

أولا إستبدل هذا الرابط http://cnmu.blogspot.com برابط مدونتك
هذا #0098D9 هو اللون الخاص بالأداة عدله باللون المناسب لقالبك
الكود الاخضر يمكنك ازالته ان كان لديك مكتبة جي كويري في قالبك
تجربة موفقة تحياتي