السلام عليكم ورحمة الله تعالى وبركاته, زوار ومتتبعي مدونة ألجيريان جوست اللأوفياء سأشرح لكم كيفية إضافة تنبيه احترافي عند الضغط عليه تنبثق لك تعليقات ديسكس باحترافية من اليمين, تساعدك هذه الإضافة على معرفة آخر تعليقات مدونتك كما ستظهر للزائر تعليقات الزوار والذي سيجعله يعلق هو أيظا ليظهر في قائمة التعليقات, كما تعطي الإضافة لمسة جديدة لقالب مدونتك.
وبما أن إضافة جرس تعليقات بلوجر قد نشر من قبل في مدونات اخرى فقلت لما لا أنشر الخاصة بديسكس, فيمكن أن يحتاجها العديد من المدونين الذين يستعملون تعليقات ديسكس على مدوناتهم.
تتميز الإضافة باحترافيتها وتجاوبها على الهواتف وعلى جميع الشاشات, وتتوفر على زر غلق وفتح نافذة التعليقات بطريقة رائعة.
معاينة الإضافة
/* CSS Notification commente Disqus by: nak1ha.tk */.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> أو <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/AVvXsEiU5ktj53aaKJQ6j_Y4cLQpkdwrnKRbJ8ykj-ZFe4eRyK0QQOL8NQbVGkVv6sQlu97strk7Y_aUCLW5gCZd5Zyu2W4H3tgrX5KaHTDP_rZxyVLPFJuTvBzepVmaOx5LJYlmkBIQeZVa17_T/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://nak1ha.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>
غير nak1ha بحسابك الخاص بالديسكاس
ثالثا, إبحث عن الوسم </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> في حالة عدم ظهور أيقونة الإشعار في الإضافة أما في حالة ظهورها فلا داعي من إضافتها لأنها ستكون مضافة من قبل في قالبك.
وأخيرا, إحفظ القالب ومبروك عليك الإضافة
0 التعليقات:
إرسال تعليق