متابعين كوليكا ويب الاعزاء اليوم معانا طريقة احترافية جديدة لإضافة إشعار منبثق لتعليقات ديسكس باحترافية، يقوم بالانبثاق من الجانب حينما نقوم بالضغط عليه و اظهار تعليقات ديسكس بطريقة احترافية، لا تقلق هذه اضافة خفيفة و سهلة التركيب هي بنا نتطرق الي الشرح احبائي الاعزاء. 😍
طريقة التركيب
عن هذا الوسم ]]></b:skin> الان قم باضافة هذه الاكواد قبلها ( فوقها ) :
ثانياً قم بالبحث علي <body/> الان قم باضافة هذه الاكواد قبلها ( فوقها ) :
/* CSS Notification commente Disqus by: colica-web.blogspot.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:'';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:'';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/> الان قم باضافة هذه الاكواد قبلها ( فوقها ) :
<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='إغلاق'>×<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/AVvXsEiYkvaMUvcj9OpBIEkBu6nXGs6tRP0mdJsreZYBECEleNCQ9D4PIuWInyULxMLP3F9BEq89zh2zBsSrXWSXUhZpAvL1lx_kzBDNAKJLcmacRdyh58kl-SYWQbBySbNqm17MtYtvCY5FhWGM/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://ColicaWeb.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>
ملحوظة : قم بتغيير ColicaWeb بمعرف ديسكس الخاص بك.
ثالثاً قم بالبحث عن <body/> ضع فوقه قبله هذه الاكواد:
في حالة مواجهة مشكلة عدم ظهور ايقونة الاشعار في الاضافة هذا لعدم وجود مكتبة Awesome في قالبك و لاضافتها قم بالبحث عن <body> و ضع هذا الرابط فوقها.
<script type='text/javascript'>
//<![CDATA[
// Notifcthion Colica-Web 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>
في حالة مواجهة مشكلة عدم ظهور ايقونة الاشعار في الاضافة هذا لعدم وجود مكتبة Awesome في قالبك و لاضافتها قم بالبحث عن <body> و ضع هذا الرابط فوقها.
<link type='text/css' rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'/>
إذا واجهك اي شئ قم بطرحه في التعليقات.
