أدوات آخر التعليقات واكثر المعلقين تفاعلا لنظام DISQUS

أدوات آخر التعليقات واكثر المعلقين تفاعلا لنظام DISQUS

المعاينات والمرفقات

Disqus Recent comments most commenter widget
لقد تطرقنا مسبقاً عن تفعيل نظام تعليقات DISQUS لكن ما لم نتطرق له هو الأدوات المساعدة في التفاعل مع هذا النظام , لنظام تعليقات بلوجر كثير من الأدوات وأضفنا كثير منها لكن نظام تعليقات DISQUS له أدوات خاصة من برمجة الشركة نفسها بفضل الله قمت بعمل بعض التعديلات على بعضها لتحسينا وستعرض عليكم في هذا الموضوع سنعرض كل آداة وشرح التعامل معها لكن في البداية هناك عامل مشترك بين كل الادوات وهو معرف الموقع كل موقع يضاف الى DISQUS له معرف خاص به أنت من يكتبه عند تسجيل الموقع لكن عموما يمكن أن تحصل عليه بالطريقة التالية قم بالدخول لموقع DISQUS ولوحة التحكم ثم قم بإختيار إسم موقعك وانسخ المعرف كما في الصورة التالية

QISQUS Site ID

أول آدة أكثر المعلقين تفاعلاً

DISQUS Top Commenters Widget


قم بوضع الكود التالي في آداة HTML/Java Script
<style>
#topcommenters {
  text-align: right;
  padding: 10px;
  background: #fff;
  border: 2px solid #bbb;
  border-radius: 10px;
}
#topcommenters ul {text-align: right;}
#topcommenters img {float: right;padding: 0 5px;}

li.dsq-widget-item:hover{background:#E1F4FE;}
</style>
<div id="topcommenters" class="dsq-widget">
<script type="text/javascript" src="http://cnmu.disqus.com/top_commenters_widget.js?num_items=5&hide_mods=1&hide_avatars=0&avatar_size=48"></script>
</div>
كما قلت في البداية تم إعطاء تنسيق لتلك الادوات وهذا شرح طريقة تنسيق هذه الآداة
هذا اللون #fff  هو لون خلفية الآداة
وهذا لون الإطار #bbb
هذا اللون الذي يظهر عند تمرير الماوس #E1F4FE
قم بتغير الرقم 0 الى 1 إن أردت إخفاء صور المعلقين
الرقم 5 هو عدد المعلقين الظاهرين
الرقم 48 هو حجم الصور يمكنك تصغيرها بوضع الرقم 32
الرقم 1 غيره الى 0 إن أردت أن تظهر تعليقات المدير في الآداة
وطبعا إستبدل cnmu بمعرف مدونتك في DISQUS

ثاني آداة آخر التعليقات

DISQUS Recent Comments Widget


نفس طريقة التركيب
<style>
#recentcomments {
  text-align: right;
  padding: 10px;
  background: #fff;
  border: 2px solid #bbb;
  border-radius: 10px;
}
#recentcomments ul {text-align: right;}
#recentcomments img {float: right;padding: 0 5px;}

li.dsq-widget-item:hover{background:#E1F4FE;}
</style>
<div id="recentcomments" class="dsq-widget">
<script type="text/javascript" src="http://cnmu.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=48&excerpt_length=100&hide_mods=1"></script>
</div>
والتنسيق بنفس الطريقة هناك إختلاف واحد فقط وهو الرقم 100
قم بزيادته او إنقاصه فهو عدد الاحرف التي تظهر من التعليقات

الآداة الثالثة التبويبات المجمعة

DISQUS Combo Widget


أيضا تركب بنفس الطريقة وهذه الآداة هي الأداتين السابقتين في آداة واحده وهي من تنسيق الشركة لم أتدخل في التنسيق سوى بوضع إطار لها لضبطها لان تعريب تلك الآداة وضبطها كالأدوات السابقة يسبب بعض المشاكل في بعض القوالب فجعلتها كما هي وهي تعمل جيداً 
<style>
#dsq-combo-widget.blue #dsq-combo-content .dsq-combo-box {border: 1px solid #bbb;}
#dsq-combo-widget.blue #dsq-combo-tabs li{border:1px solid #bbb; border-bottom:0;}
#dsq-combo-widget.blue #dsq-combo-tabs li{border:1px solid #bbb; border-bottom:0;}
#dsq-combo-widget.blue #dsq-combo-tabs li{border:1px solid #bbb; border-bottom:0;}
</style>
<script type="text/javascript" src="http://cnmu.disqus.com/combination_widget.js?num_items=5&hide_mods=1&color=blue&default_tab=people&excerpt_length=30"></script>
تنسيق هذه الآداة مختلف قليلاً
اللون الأحمر هو لون الإطار إستبدله في الأربع مرات
أما كلمة blue هي لون الآداة وهي تأتي بخمس الوان اختر ما يناسبك منهم فقط انسخ كلمة اللون الذي تريد واستبدلها باللون الموجود
هذه هي الخمس الوان
 blue grey green red orange
 اختلاف أخر وهو كلمة people
وهي تخص تبويب المعلقين الأكثر تفاعلاً وهو التبويب الاساسي الذي ستظهره الآداة عند دخول الموقع إن اردت اختيار تبويب آخر
يمكن إستبدال الكلمة بكلمة recent إن أردت تبوبي آخر التعليقات أن يصبح الأساسي
أو اختيار التبويب الثالث popular وهو تبويب إضافي يخص المناقشات الشائعة ولكن لا أنصح بجعله الإفتراضي نظراً لانه لو لا توجد مناقشات حديثة لن يظهر به شئ
وباقي التنسيق بنفس الطريقة
الرقم 5 هو عدد المعلقين والتعليقات الظاهرين
الرقم 1 غيره الى 0 إن أردت أن تظهر تعليقات المدير في الآداة
وفقكم الله جميعاً
تحياتي


تعليقات

7

- شاركنا بتعليق فتعليقك يخبرنا بمدى جدوى ما نقدمه
- تشجيعك أو النقد البناء عاملين أساسيين لتطوير محتوانا
- كذلك لو لديك سؤال حول محتوى الموضوع أو شئ نسينا ذكره يرجى مشاركتنا به

  1. السلام عليكم ورحمة الله وبركاته
    أشكرك أخي الغالي عمرو على هذه الأدوات الرائعة والمتميزة
    وما أعجبني هو إمكانية التنسيق عليها جزاك الله خير
    في أمان الله

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      وجزاك الله بالمثل أخي الغالي بدر
      ولا تحرمنا من مرورك العطر يا طيب

      حذف
  2. شكراا لك على الإضافة المميزة أخي الغالي
    سؤالي لك هو كيفية الحصول على ذلك الإطار الذي تضع بداخله أكواد الـ HTML
    لقد بحثت كثير بحيث أريده شبيها بالذي تملكه
    أي قابل للتمرير مع إمكانية تعديل لون االأكواد

    ردحذف
    الردود
    1. أهلا بك أخي الكريم
      بالنسبة لطلبك راجع هذا الموضوع
      http://cnmu.blogspot.com/2013/02/blockquote.html

      حذف
  3. تم أخي الكريم؛؛
    شكراا على المتابعة!!

    ردحذف
  4. اداة ما اشتغلت عندي :(

    ردحذف
    الردود
    1. الآداة تعمل جيداً أخي الكريم
      تأكد من ان نظام disqus مفعل لديك ويعمل جيداً وتأكد من وضع المعرف الخاص بالنظام مضبوط

      حذف