الدرس 43 : طريقة إضافة أداة أخر التعليقات لنظامي التعليق بلوجر و ديسكس

بسم الله الرحمان الرحيم

السلام عليكم أحباء ومتابعي مدونة منبع المعلوميات

اليوم راح أطرح لكم إضافة جديدة و هي عبارة عن أخر التعليقات المنشورة . تعرض هذه الإضافة أخر التعليقات المنشورة تلقائيا و من دون إعادة تحديث الكود . حسنا نمر إلى فائدة هذه الإضافة البسيطة و التي تخفي وراءها ميزة رائعة حسنا نقول أني دخلت مدونة مركب عليها هذه الإضافة أجد تعليق هيك "أحسنت يا أخي موضوع جميل" سأريد فورا أن أعرف الموضوع و لماذا أعجبه . و هكذا تربح منه زيارة لموضوعك .و لقد نشرت أيضا طريقة إضافة ترتيب المتابعين في التعليق من هـــنـــا .

حسنا نمر الأن إلى معاينه حية للإضافة :
يمكنكم رؤيتها عبر هذا الرابط من هـــنـــا

حسنا البعض سيقول لي "ولكن أنا نظام التعليقات الخاص بي هو ديسكس كيف راح أعمل ؟" حسنا لهيك نحنى علمنا كودين واحد لنظام تعليقات بلوجر العادي و الأخر لديسكس 


طريقة التركيب :
بالنسبة لنظام تعليقات بلوجر
أولا ندخل لتخطيط ثم إضافة أداة ثم

HTML/JavaScript إضافة وظيفة طرف ثالث أو شفرة أخرى إلى مدونتك الإلكترونية. بواسطة Blogger

و نضع هذا الكود

<style type="text/css">.latest_recent_comments {  list-style: outside none none;  margin: 0;  padding: 0;}.latest_recent_comments li {  border-bottom: 1px dashed #ddd;  display: block;  float: right;  padding: 8px 0;  width: 100%;}.avatarImage {  display: block;  float: right;  margin-left: 5px;}.avatarImage img {  background-color: #fff;  box-shadow: 0 0 1px #444;  padding: 3px;}.avatarRound img{border-radius:100%;}.latest_recent_comments a {  background-color: #444;  color: #fff;  display: inline-block;  float: right;  font-size: 12px;  height: 20px;  line-height: 20px;  padding: 0 8px;  text-align: center;  text-decoration: none;}.latest_recent_comments span {  color: #444;  display: block;  float: right;  font: 12px/1.4em tahoma;  padding: 5px 2px 0 0;  text-align: right;}.latest_recent_comments span a {  background-color: transparent;  color: #000;  display: inline-block;  float: left;  font: 12px tahoma;  height: auto;}</style><script type="text/javascript">//<![CDATA[ var numComments  = 10,showAvatar  = true,avatarSize  = 50,roundAvatar = false,characters  = 30,showMorelink = true,moreLinktext = "المزيد »",defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",hideCredits = true;//]]></script><script type="text/javascript" src="https://googledrive.com/host/0B9wf6r4PTnMiTFBiOTFkcmhabHM"></script><script type="text/javascript" src="http://cnmu.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=24"></script>

حسنا بعض التعديلات على الكود :
أولا : تعديل عدد التعليقات بتغيير العدد 10 بالعدد المناسب
ثانيا : تعديل حجم الصورة بالتعديل على العدد 50 بالحجم المناسب
ثالثا : تعديل عدد الحروف التي ستظهر من التعليق لأنه هناك تعليقات أطول من اللازم و هذه تعدلها حسب الطول يلي تحتاجه يعني مش من عقلك و يمكنك التعديل عليها عير التعديل على 30
رابعا : في حالة أردت إخفاء صور المعلقين يمكن ذلك عبر تغيير true ب false
خامسا : تعديل لون الخلفية الخاصة بصورة المعلق عن طريقة تغيير #444 

حسنا كان ذلك بالنسبة لنظام تعليقات بلوجر نمر الأن إلى ديسكس :

أولا : يمكنكم إضافة هذا النظام للتعليقات عبر هذا الشرح من هـــنـــا

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

نفس طريقة تركيب نظام بلوجر

و الكود هو هذا

<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://sourceinformatics.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=48&excerpt_length=100&hide_mods=1"></script></div>

حسنا بعض التعديلات البسيطة على الكود :

أولا : تعديل ظهور صور المعلقين غير 0 ب 1

ثانيا : تعديل عدد التعليقات التي ستظهر غير 5 بالعدد الذي تريده

ثالثا : تعديل حجم الصورة غير 48 ب الحجم الذي تريده

رابعا : تعديل لون الخلفية غير #fff بالكود اللون الذي تريده

خامسا : لا تنسى تغيير sourceinformatics بمعرفك على ديسكس

هنا إخواني الكرام يكون درسنا قد إنتها و إلى اللقاء .