تثبيت اشعارات Disqus بزر الصعود والنزول

تثبيت اشعارات Disqus بزر الصعود والنزول

يوجد الآن مشاهدة التعليقات : 3

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

كيفية تثبيت صندوق تعليقات DISQUS الجديدة تضمن زر العودة إلى الأعلى. ربما أنت تعرف بالفعل بهذه الإضافة هل رأيتها بمدونة؟ وخاصة المواقع التي تستعمل تعليقات ديسكس
تحتوي الإضافة على زر صعود ونزول تتوسطها ايقونة الإشعارات كل ذلك متجاوب لأفضل تصفح على الأجهزة الأخرى
واليوم سنتعرف على طريقة الحصول عليها بتركيبها مباشرة على القالب، تابع معي بعد المعاينة
إقرأ أيضًا
تثبيت تعليقات DISQUS على بلوجر

شرح طريقة التركيب
1. المظهر >> تعديل HTML
2. ابحث بإستعمال CTRL+F عن </head>
3. ضع الكود التالي قبله
<style type='text/css'>
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}.header-1 h4{font-size:18px;float:left;color:#fff}.header-1 img{float:right}#scrollToTop .notif-show{color:#54a0ff;transition:all .6s}#scrollToTop .notif-show:hover{color:#2e86de}.notif-show:hover i{animation:rubberBand 1s}#disqus-notif{position:fixed;background:#fff;z-index:999;width:23.5%;top:0;right:-769px;bottom:0;transition:all .5s}#disqus-notif.active{right:0}#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}#disqus-notif .close-1{position:fixed;    margin-top:16px;color:#fff;transition:all .3s}#disqus-notif .close-1 i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#disqus-notif .close-1:hover i{transform:rotate(360deg)}#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}#RecentComments img.dsq-widget-avatar{margin:0 10px 0 0;width:32px;height:32px;padding:0;float:left;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:#ced6e0;font-size:12px}#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:2px solid rgba(0,0,0,0.08)}#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:400;font-size:14px;margin:7px 0 0 0}#RecentComments a.dsq-widget-user:hover{color:#2e87e7}#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}#RecentComments .dsq-widget-item pre{position:relative;background-color:#f1f2f6;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}#RecentComments .dsq-widget-item pre code{color:#000;padding:0}#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}#RecentComments .dsq-widget-comment p a{color:#ced6e0}#RecentComments .dsq-widget-comment p a:hover{color:#a4b0be}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}}
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:30px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}#scrollToTop a{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;font-size:.9rem;margin:5px auto;padding:14px 16px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}#scrollToTop a:hover{color:#747d8c;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}#top{position:absolute;top:0}#scrollToTop li:nth-child(1){animation:slideInTop .5s}#scrollToTop li:nth-child(2){animation:slideInRight .5s}#scrollToTop li:nth-child(3){animation:slideInDown .5s}
</style>
4. ابحث عن </body> ثم ضع الكود التالي بعده
<div id='overlay-1'/>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='أغلق'><i class='fa fa-times'/></a>
<div class='header-1'><h4>إشعارات</h4>
</div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ar1web.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>
<ul id='scrollToTop'>
<li><a class='ripplelink' href='#top' title='الى الأعلى'><i class='fa fa-chevron-up'/></a></li>
<li><a class='notif-show ripplelink' href='javascript:;' title='Open Disqus Notifications'><i class='fa fa-bell'/></a></li>
<li><a class='ripplelink' href='#bottom' title='الى الأسفل'><i class='fa fa-chevron-down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
// Notif 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")})});
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>
5. غير ar1web بإسم تعليقاتك على ديسكس
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 3 تعليقات:

  1. عودة حميدة واتمنى لك النجاح والاستمرار فى تقديم كل جديد ومبروك على الدومين الجديد -😊-

    ردحذف
  2. شكرا لك اخي ولتشجيعك المستمر، وفقك الله ايضا

    ردحذف
  3. صديقي , الاضافة لا تظهر لي في الموقع
    لقد ظفتها كما كتبت في الشرحك , ولكن لا تظهر لي , ماهو السبب

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم