طريق تثبيت تعليقات Disqus فى قائمة جانبية فى بلوجر

من اهم انظمة التعليقات التى تتوافر فى المواقع والمدونات هى تعليقات Disqus هذه التعليقات رائعه جدا حيث أنه توفر أكثر من وسيله لتسجيل الدخول للتعليق على الموضوع ، وفى موضوع اليوم سوف أوفر لكم طريق تثبيت تعليقات Disqus فى قائمة جانبية فى بلوجر.

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

طريق تثبيت تعليقات Disqus فى قائمة جانبية فى بلوجر

اما فى موضوع اليوم لمن يستخدم تعليقات Disqus او سوف يستخدمها سوف  أوفر لكم اضافة رائعه لوضع اخر تعليقات Disqus فى قائمة جانبية فى بلوجر ، وذلك سوف يكون من السهل عليك متابعة التعليقات الجديده على المدونة ، لم يريد طريق تثبيت تعليقات Disqus فى قائمة جانبية فى بلوجر.

إقرأ ايضا : حل مشكلة صور الابتسامات لا تعمل فى التعليقات

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

معاينة

صورة من الإضافة

طريق تثبيت تعليقات Disqus فى قائمة جانبية فى بلوجر

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

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

الأن سوف تبحث عن هذا الوسم</head>وتقوم بوضع الكود التالى فوقه ايضا.

<style type='text/css'>
/* Animation */
@keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}
/* Recent Comments Disqus */
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}
.header-1 h4{font-size:18px;float:right;color:#fff}
.header-1 img{float:left}
.notif-show{position:fixed;top:10px;right:10px;z-index:997;color:#fff!important;background:rgba(0,0,0,0.2);font-size:16px;font-weight:normal;width:auto;padding:6px 8px;cursor:pointer;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:2px;transition:all .6s}
.notif-show:hover{background:#2e9eff;animation:rubberBand 1s}
#disqus-notif{position:fixed;background:#fff;z-index:999;width:25%;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-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:15px;top:-7px;visibility:hidden;opacity:0;transition:all .5s}
#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:6px;font-size:35px;font-weight:700;color:#fff}
#disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}
#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:right;max-height:95%;overflow:auto;overflow-x:hidden}
#RecentComments img.dsq-widget-avatar{margin:0 0 0 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:#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:1px solid rgba(0,0,0,0.08)}
#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:700;font-size:14px;margin:7px 0 0 0;float: right}
#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}
#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}
#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}
#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
@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}#disqus-notif .close-text{display:none}}
</style>

الأن سوف يكون عليك أن تبحث عن هذا الوسم</body>وتقوم بوضع الكود التالى فوقه.

إقرأ ايضا : طريقة انشاء صفحة اتصل بنا تدعم الصفحات المسرعه AMP

<a class='notif-show' href='javascript:;'><i class='fa fa-bell'/></a>
<div id='overlay-1'/>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='اغلق'>&#215;<span class='close-text'>اغلق</span></a>
<div class='header-1'><h4>اخر التعليقات</h4><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjagiGCAO3hjApiCd-_TlrhDcU-RNllPPBRf85kua9o4_7I06ovUqYxZqXKz-nIFtkCVN6FAfqBLxfu-AU4bxmyU2NymR4BWc7BmggDURHXfLTru82fP5UAAQvoh9AULiWxdzFPcXsWkbCG/s1600/Disqusq.png' title='Disqus'/></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://wdbloog.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>

سوف يكون عليك تغيير wdbloog فى الكود بمعرفة تعليقات Disqus يمكنك مراجعة الموضوع الذى رابطه فى اول الموضوع هذا وسوف تعرف المعرف للتعليقات

الأن ايضا سوف يكون عليك وضع الكود التالى فوق نفس الوسم</body>ايضا فى مدونتى

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

إقرأ ايضا : طريقة تغيير لون شريط المتصفح على الهاتف لمدونات بلوجر

بعد ذلك سوف يكون عليك حذف القالب ومبروك عليك الإضافة الجديده

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .

شارك المقال