المعاينات والمرفقات
لقد تطرقنا مسبقاً عن تفعيل نظام تعليقات DISQUS لكن ما لم نتطرق له هو الأدوات المساعدة في التفاعل مع هذا النظام , لنظام تعليقات بلوجر كثير من الأدوات وأضفنا كثير منها لكن نظام تعليقات DISQUS له أدوات خاصة من برمجة الشركة نفسها بفضل الله قمت بعمل بعض التعديلات على بعضها لتحسينا وستعرض عليكم في هذا الموضوع سنعرض كل آداة وشرح التعامل معها لكن في البداية هناك عامل مشترك بين كل الادوات وهو معرف الموقع كل موقع يضاف الى DISQUS له معرف خاص به أنت من يكتبه عند تسجيل الموقع لكن عموما يمكن أن تحصل عليه بالطريقة التالية قم بالدخول لموقع DISQUS ولوحة التحكم ثم قم بإختيار إسم موقعك وانسخ المعرف كما في الصورة التالية
أول آدة أكثر المعلقين تفاعلاً
قم بوضع الكود التالي في آداة 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
ثاني آداة آخر التعليقات
نفس طريقة التركيب
<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
قم بزيادته او إنقاصه فهو عدد الاحرف التي تظهر من التعليقات
الآداة الثالثة التبويبات المجمعة
أيضا تركب بنفس الطريقة وهذه الآداة هي الأداتين السابقتين في آداة واحده وهي من تنسيق الشركة لم أتدخل في التنسيق سوى بوضع إطار لها لضبطها لان تعريب تلك الآداة وضبطها كالأدوات السابقة يسبب بعض المشاكل في بعض القوالب فجعلتها كما هي وهي تعمل جيداً
<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
الاشتراك في:
تعليقات الرسالة (Atom)
السلام عليكم ورحمة الله وبركاته
ردحذفأشكرك أخي الغالي عمرو على هذه الأدوات الرائعة والمتميزة
وما أعجبني هو إمكانية التنسيق عليها جزاك الله خير
في أمان الله
وعليكم السلام ورحمة الله وبركاته
حذفوجزاك الله بالمثل أخي الغالي بدر
ولا تحرمنا من مرورك العطر يا طيب
شكراا لك على الإضافة المميزة أخي الغالي
ردحذفسؤالي لك هو كيفية الحصول على ذلك الإطار الذي تضع بداخله أكواد الـ HTML
لقد بحثت كثير بحيث أريده شبيها بالذي تملكه
أي قابل للتمرير مع إمكانية تعديل لون االأكواد
أهلا بك أخي الكريم
حذفبالنسبة لطلبك راجع هذا الموضوع
http://cnmu.blogspot.com/2013/02/blockquote.html
تم أخي الكريم؛؛
ردحذفشكراا على المتابعة!!
اداة ما اشتغلت عندي :(
ردحذفالآداة تعمل جيداً أخي الكريم
حذفتأكد من ان نظام disqus مفعل لديك ويعمل جيداً وتأكد من وضع المعرف الخاص بالنظام مضبوط