صندوق ٱخر تعليقات ديسكس على بلوجر عائم

السلام عليكم، نظام التعليقات ديسكس يعني اي شخص يعرفه ولو جديد في عالم التدوين والمدونات انا شخصيا استخدمته سابقا في قالب مدونتي السابق ولكن تعليقات بلوجر بواسطة json feeds يمكننا استخراج اخر التعليقات ولكن بلوجر سمحت لنا بقراءة اكوادها الغير مشفرة واستخدام بيانات تخص المدونة عكس ديسكس ولكن المذهل ان ديسكس موفرة هذه الأداة من ادواتها الرسمية فلهذا درس اليوم عن اداة آخر التعليقات بزر عائم جميل ولأن ليس هناك مأشرحه سنتطرق لطريقة التركيب. 

طريقة التركيب

اول خطوة الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث عن هذا الوسم ]]></b:skin> ثم قم باضافة هذه الاكواد فوقها 
/* Notification commente Disqus by: https://btechnomee.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:&#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> اي اي اخر القالب.

<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/AVvXsEjQqx0dqp4hcfarptwR8RYvTAsZEYKLQTPGg82P1g76rwxSMM8TsOk3lsPX4sYyVXZ0NP8owqnoMfwBmJbk_8BuyVKDOPkbIQASmvX-IHcGOaSQ27lDg0q9DC9JjcTEsRS5BGTS3PGSPAQF/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://technomee.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> 


ملحوظة : قم بتغيير technomee بمعرف الخاص بك.

ثالثاً قم بالبحث عن <body/> ضع فوقه قبله هذه الاكواد وتكون اسفل السابقة:

<script type='text/javascript'>
//<![CDATA[
// Notifcthion 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>

في حالة مواجهة مشكلة عدم ظهور ايقونة الاشعار في الاضافة هذا لعدم وجود مكتبة Font Awesome في قالبك و لاضافتها قم بالبحث عن </head> و ضع هذا الكود فوقها.

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

الى هنا نكون قد انتهينا من درس اليوم إذا واجهك اي شئ قم بطرحه في التعليقات.
Next Post Previous Post
No Comment
Add Comment
comment url