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

معاينة الإضافة 

معاينة

طريقة تركيب الإضافة 

أولا, نبحث عن الوسم ]]></b:skin> ثم نضع الأكواد التالية فوقه مياشرة

/* CSS Notification commente Disqus by: nak1ha.com */
.header-1 {background:#fff;border-bottom:1px solid #ddd;height:30px;padding:15px;overflow:hidden}
.header-1 h4{font-size:15px;float:right;margin:-5px 0;color:#555}
.header-1 img{float:left}
.notif-show{position:fixed;top:10px;right:10px;z-index:9999999;color:#fff!important;background:#444;padding:10px;font-size:13px;border-radius:4px}
#disqus-notif.active{right:0}
#disqus-notif{position:fixed;background:#fff;z-index:9999999;width:30%;border-left:3px solid #e2e2e2;top:0;right:-500px;bottom:0;transition:all .7s ease-in-out}#overlay-1.active{background:rgba(53,58,61,.9);position:fixed;z-index:9999999;overflow:hidden;width:100%;height:100%;top:0;left:0}.close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;left:100%;top:-7px;visibility:hidden;opacity:0;transition:all 250ms ease-in-out}.close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-80px,0,0);transform:translate3d(-80px,0,0)}
.close-1{position:fixed;margin-right:31%;margin-top:20px;font-size:35px;font-weight:700;color:#fff!important}
#RecentComments{display:block;width:100%;margin:0 auto;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:90%;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:10px 0px 7px 10px;width:32px;height:32px;padding:0;float:right;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2e9fff;font-size:12px}
#RecentComments p.dsq-widget-meta a:hover{color:#2e87e7}
#RecentComments li.dsq-widget-item{margin:0;padding:4px 6px 0;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#2e87e7;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;margin-top:8px;color:#2e9fff;font-weight:700;font-size:14px}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
.count-1{background:#ED1E24;padding:2px 5px;font-size:11px;border-radius:3px;position:absolute;top:-8px;left:-20px}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:&#39;&#39;;position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:&#39;&#39;;font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
@media screen and (max-width:480px) {#disqus-notif{width:100%}.close-1{margin:0;color:#444!important}}

ثانيا, نبحث عن الوسم <body> أو <body في حالة عدم وجود الأول

<a class='notif-show' href='javascript:;'><i class='fa fa-comments-o'></i><span class='count-1'> جديد ! </span></a>
<div id='overlay-1'></div>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='إغلاق'>&#215;<span class='close-text'>إغلاق</span></a>
<div class='header-1'><h4>إشعارات</h4><a href='https://disqus.com' target='_blank' title='Disqus'><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6oAWtGCG5ez1X8InoBa3jrJ1-2b10FZD6XLeryT2rTXuymq-L05Ql6lZC_Kcg-4YyUcWYT3_GHSTAdDgOjJHV5blgFMIDate5JQwqDCp_TE1VmM4GCSpWGI13cHrSJxsOUcUhR-USvw8r/s1600/disqus-1.png'/></a></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://mdwn-nkh.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>
</div> 

غير mdwn-nkh بمعرف حسابك على ديسكس.
ثالثا, إبحث عن الوسم </body> وضع فوقه مباشرة الأكواد التالية.

<script type='text/javascript'>
//<![CDATA[
// Notif Komentar Disqus
$(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})});
$(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})});
//]]>
</script>

رابعا, هذا الكود يمكنك إضافته أسفل الوسم <head> في حالة عدم ظهور أيقونة الإشعار في الإضافة أما في حالة ظهورها فلا داعي من إضافتها لأنها ستكون مضافة من قبل في قالبك.

<link type='text/css' rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'/>