شرح كامل للتعليقات التفاعلية في بلوجر

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

تعرف على أنظمة التعليقات وإختيار نظام يتناسب مع مدونتك

سينقسم هذا الموضوع لأربع مراحل وهم مرحلة الإعداد مرحلة التركيب مرحلة التنسيق مرحلة الضبط والصورة التالية سترافقنا في كل المراحل وسنتطرق لكل جزء فيها وسنبدأ مع

مرحلة الإعداد

قم بالدخول الى إعدادات مدونتك ثم إختار مشاركات وتعليقات

أول جزء وهو موقع التعليقات : سنجعله مضمن 

ثاني جزء وهو الخاص بمن يمكنه التعليق هذا يرجع لراحتك في التعامل ومحتوى مدونتك 

الخيار الأول : وهو انه يمكن لأى شخص التعليق هذا سيسمح لاى أحد ان يعلق على مواضيعك حتى لو لم يكن له أى بريد الكتروني
الخيار الثاني :  يسمح لفئات معينة للتعليق وهي التي تملك حسابات في مواقع محددة
الخيار الثالث :  لن يستطيع التعليق إلا من يملك حساب في جوجل
الخيار الرابع : لا يمكن لاحد غير الاعضاء والمقصود بالأعضاء هؤلاء الذين يظهرون في إضافة المتابعون لمدونتك هم فقط من يمكنهم التعليق فإختر ما تراه مناسباً لك

ثالث جزء وهو الخاص بالإشراف على التعليقات 

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

رابع جزء يهمنا في إعداد التعليقات هو رسالة التعليقات 

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

ننتقل لمرحلة التركيب 

سنقوم بتركيب التعليقات المترابطة التفاعلية بالشكل التالي 

أدخل الى تحرير قالبك وإبحث عن هذا الكود

وإستبدله بالكود التالي 

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

مرحلة التنسيق 

بإنتهاء التركيب ستصبح التعليقات التفاعلية تعمل في قالبك لكن ستكون بمظهر بسيط جداً إن كان يعجبك فلا تقوم بعمل تعديل أما إن لم يكن يعجبك فيمكنك تنسيقه وإخترت لكم نموذج خفيف وبسيط ويمكن ان تنسقه بما يتناسب مع مدونتك بسهولة 

ابحث عن هذا الكود ]]>

وأضف فوقه الكود التالي

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:right}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 5px 10px 5px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#E0DFDF;border:1px solid #A3A1A1;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-right:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:left;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;left:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-right:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-left:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://lh5.googleusercontent.com/-1FOOK-wkThg/U4rEEaJBlLI/AAAAAAAAEMA/vAhBcNCkp_4/s51/arrow.png) top left no-repeat;float:right;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-right:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}

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

نموذج 1  نموذج 2

تنسيق النموذج 

هذا اللون  #f1f1f1 هو لون رأس التعليق الذي يظهر به الإسم والتاريخ
هذا اللون  #e3e3e3 هو لون الإطار الخارجي وهو متكرر مرتين قم بتغيره فيهما
هذا اللون #E0DFDF هو لون أزرار الرد والحذف
وهذا لون #A3A1A1  الإطار الخارجي للأزرار
وهذا اللون #0E6284 هو لون إسم الكاتب والتاريخ وهو متكرر مرتين
فقط عدل الألون وسيصبح النموذج متوافق مع مدونتك تماماً أكواد الألوان

مرحلة الضبط 

مرحلة الضبط ستأخذنا الى نقطتين

النقطة الأولى عدم ظهور نموذج التعليق او صورة المعلق بشكل مضبوط 

والسببب يرجع الى أن بعض القوالب تكون بها أكواد لتنسيق التعليقات القديمة وتؤثر على التموذج الجديد فما الحل ؟
الحل أن نبحث عن الاكواد القديمة ونحذفها وستكون الأكواد تحمل نفس المعرف .comments
وسنجد كل كود منها يبدأ بقوس فتح { وينتهي بقوس إغلاق } لذا يجب تحديد الأكواد جيدا وطبعا لا تنسى نسختك الإحتياطية لتجنب أى مشكلة ملاحظة قد نجد كود ولكنه يبدأ بهذا الرمز #comments هذا لا نحذفه نبقي على هذا بالكامل من أول قوس الفتح الى قوس الإغلاق اما باقي  الاكواد نحذفها وهذا كله في حالة ظهور مشكلة في شكل التعليقات

النقطة الثانية رسالة التعليقات 

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

بعده بسطور سنجد هذا الكود  نضيف بجواره الكود التالي

ثم بعده بسطور قليلة اخرى نجد الوسم
نضيف قبله

وهذه صورة للتوضيح

قد تجد الكودين مضافين بالفعل وحينها نتجاوز هذا الجزء

ثم نبحث عن هذا الكود 

document.getElementById(domId).insertBefore(replybox, null);

ونستبدله بهذا

document.getElementById (domId). insertBefore (document.getElementById ('threaded-comment-form'), null);

ربما يكون الموضوع طويل بعض الشئ لكن فضلت ذكر كل ما يهمنا حول تعليقات بلوجر بحيث نستفيد منها جيدا 

موفقين بإذن الله