تركيب نظام تعليقات blogger-facebook-disqus إحترافي.

الخميس، 8 نوفمبر 2018

اقرأ ايضا

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

مميزات الإظافة
- ثلاث أنظمة للتعليق blogger-facebook-disqus مع توفر إمكانية التبديل بينهم أو إخفاء أحدها.
- تخصيص كامل من صفحة التخطيط
- سريع ومتجاوب مع جميع المتصفحات الحديثة والشاشات الصغيرة.
- خاصية إظهار التعليقات بالتزامن
- شكل أنيق مع توفر ثلاث ألوان رئيسية للزر المسؤول عن - إظهار التعليقات

تركيب الإظافة

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

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

الخطوة الأولى

قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير Edit HTML
إضغط في وسط محرر الأكواد ثم F + Ctrl لإضهار مربع البحث
بإستعمال الزر C +Ctrl للنسخ و V +Ctrl للصق قم بوضع الأكواد في المكان المناسب

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

الخطوة الثانية

قم بالبحث عن هذا العنصر ثم إستبدل كامل الحاوية بكود html التالي..

ملاحظة مهمة

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

الآن بعد إيجاده قم بالتحديد عليه من البداية حتى النهاية كما في الصورة ثم قم بإستبداله بالكود التالي..

HTML

قم بالبحث عن هذا المعرف Blog1 من خلال قائمة الأداة أو إبحث عن هذا العنوان رسائل المدونة الإلكترونية ثم أسفل الحاوية مباشرة أضف كود html التالي..

ملاحظة مهمة

الكود الذي نبحث عنه هو عبارة عن أداة رسائل المدونة ستجد بدايته في الغالب هكذا ونهايته وسم الإغلاق كما في الصورة الأتية

لاحظ وسم الإغلاق في الصورة أي أننا أسفله مباشرة نضع الكود التالي..

HTML
              
                
                  التعليقات غير مسموحة هنا
                  NONE
                  facebook
                  ضع معرف الفايسبوك هنا
                  disqus
                  orange
                  Not-comments
                  ضع معرف ديسكس هنا
                  skin

قم بالبحث عن هذا الوسم ]]> فوقه أي قبله قم بوضع كود css التالي..

HTML
 /*----comments  [blogger-facebook-disqus]-----*/
div#Blog1 div#comments{display:none;}
.threaded-comments-wrapper{background:white;position:relative;overflow:hidden;display:block;width:100%;padding:20px 8px;margin-bottom:30px;clear:both;}
button#commentsshow{color:white;cursor:pointer;width:100%;display:block;padding:10px 16px;font-size:17px;line-height:1.3;outline:0;outline-offset:0;border:0;border:0 solid transparent;font-family:inherit;font-weight:400;letter-spacing:inherit;}
p.Not-comments{position:relative;padding:10px;margin:10px auto;text-align:center;font-size:14px;font-weight:bold;color:#d2d2d2;background:#f5f5f5;display:block;}
.c-icons{width:100%;display:block;position:relative;padding:0;margin-bottom:20px;}
.c-container{position:relative;overflow:hidden;display:block;clear:both;padding:0;}
.c-icons span{margin:0 5px;cursor:pointer;text-align:center;width:25%;width:-webkit-calc(100% / 7);width:calc(100% / 7);height:30px;padding:0;text-transform:uppercase;list-style:none;position:relative;overflow:hidden;display:inline-block;vertical-align:top;background:#eaeaea url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcvSWofzFYD23D-mCUqKC1_qQx7pqaSwNgKUcS__zgMQXUar5xFI7YviSgIW850s01_gBZpYKwVCnmDjwo6Sw2hKNmMIGN_UdzNKylFW5V_boowlV1o11IOvuX958qoLeUjFCQ0koQEbGR/s1600-r/comments.png) no-repeat;-webkit-border-radius:100px;-moz-border-radius:100px;-ms-border-radius:100px;-o-border-radius:100px;border-radius:100px;}
.tab-cont{display:none;}
.tab-active{display:block;}
.ico-act.blo{background-color:#FFA611!important;}
.blo{background-position:center -36px!important;}
.ico-act.fbc{background-color:#5176C5!important;}
.fbc{background-position:center -2px!important;}
.ico-act.dsq{background-color:#656C7B!important;}
.dsq{background-position:center -70px!important;}
.plus{background-position:center -104px!important;}
.ico-act.plus{background-color:#DD4E42!important;}
iframe#comment-editor{height:300px;max-height:300px;width:100%;}
.cmt_iframe_holder,.cmt_iframe_holder iframe{width:100%!important;display:block!important;}
div#disqus_thread iframe{height:auto!important;}
/*------border radius-------*/
button#commentsshow,p.Not-comments{border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
/*------box shadow-------*/
button#commentsshow{-webkit-box-shadow:0 6px 15px rgba(0,0,0,0.16);-moz-box-shadow:0 6px 15px rgba(0,0,0,0.16);-ms-box-shadow:0 6px 15px rgba(0,0,0,0.16);-o-box-shadow:0 6px 15px rgba(0,0,0,0.16);box-shadow:0 6px 15px rgba(0,0,0,0.16);}
button#commentsshow:hover,.c-icons span:hover{-webkit-box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);-moz-box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);-ms-box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);-o-box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);outline:0;}
/*linear-gradient*/
.btn-Showcomments-orange{background:#ffa610;background:-webkit-linear-gradient(50deg,#ffc410,#ffa610);background:-moz-linear-gradient(50deg,#ffc410,#ffa610);background:-ms-linear-gradient(50deg,#ffc410,#ffa610);background:-o-linear-gradient(50deg,#ffc410,#ffa610);background:linear-gradient(40deg,#ffc410,#ffa610);}
.btn-Showcomments-blue{background:#1fffac;background:-webkit-linear-gradient(50deg,#1fffac,#3aa2ff);background:-moz-linear-gradient(50deg,#1fffac,#3aa2ff);background:-ms-linear-gradient(50deg,#1fffac,#3aa2ff);background:-o-linear-gradient(50deg,#1fffac,#3aa2ff);background:linear-gradient(40deg,#1fffac,#3aa2ff);}
.btn-Showcomments-red{background:#fcb615;background:#1fffac;background:-webkit-linear-gradient(50deg,#754597,#ff4848);background:-moz-linear-gradient(50deg,#754597,#ff4848);background:-ms-linear-gradient(50deg,#754597,#ff4848);background:-o-linear-gradient(50deg,#754597,#ff4848);background:linear-gradient(40deg,#754597,#ff4848);}
/*------error btn-------*/
#postCommentSubmit{background-color:#ffa610;border:1px solid #ffa610;color:#fff;font-weight:bold;margin:0 0 6px 8px;}
/* Responsive */
@media screen and (max-width:768px){.c-icons span{width:25%;width:-webkit-calc(100% / 4);width:calc(100% / 4);}}
/*ipad + ipad mini------*/
@media screen and (max-width:320px){.c-icons span{margin:0;width:33.3333%;width:-webkit-calc(100% / 3);width:calc(100% / 3);}}
/* iphon 4/5 + nok lumia 520 */

قم الآن بحفظ التعديلات وتوجه إلى صفحة التخطيط قم بتحديث الصفحة وستلاحظ ظهور أداة جديدة بإسم blogger-facebook-disqus ستجدها مباشرة أسفل أداة رسائل المدونة الإلكترونية .. ماتقوم به هو تحريرها لتظهر لك الإعدادات كما في الصورة التالية ثم إتبع التعليمات في الأسفل.

التعديل على الأداة

العنوان blogger-facebook-disqus المحدد بهذا اللون من خلاله نستطيع التحكم في ترتيب أو عرض كل نظام كالآتي..
1- إذا غيرنا الترتيب سيظهر كل صندوق على حسب الموضع الذي نختاره مثلا نريد وضع فايسبوك في المقدمة سنجعل العنوان هكذا facebook-blogger-disqus
2- إذا أردنا حذف نظام تعليقات معين يكفي أن نحذف إسمه مثلا نريد حذف ديسكس سنجعل العنوان هكذا blogger-facebook

الإسم disqus المحدد بهذا اللون نقوم بالضغط على تعديل ثم نضع معرف ديسكس الخاص بنا مكان الرابط لتشغيل نظام التعليقات ديسكس ولاتنسى الضغط على حفظ.

الإسم facebook المحدد بهذا اللون نفس العملية لتشغيل نظام التعليقات فيسبوك نقوم بوضع معرف التطبيق الخاص بنا مكان الرابط ولاتنسى الضغط على حفظ.

الإسم skin المحدد بهذا اللون خاص بتغيير لون زر إظهار التعليقات ليتماشى مع لون القالب نقوم بالضغط على تعديل ثم نضع أحد الأسماء التالية
لجعل الزر برتقالي متدرج نضع الإسم orange
لجعل الزر أزرق متدرج نضع الإسم blue
لجعل الزر أحمر متدرج نضع الإسم red

الإسم Not-comments المحدد بهذا اللون هو من بين مميزات هذه الأداة فعند إخفاء نظام التعليقات من خلال إعدادات المنشور مثلا في صفحة الأرشيف أو إتصل بنا أو تدوينة معينة سيبقى زر إظهار التعليقات ظاهر لكن عند الضغط عليه سيعطيك رسالة مفادها [ التعليقات غير مسموحة هنا ] تستطيع تغيير نص الرسالة بمايناسبك من خلال هذا الإعداد... ولمعاينة ذلك قم بزيارة صفحة الأرشيف الخاصة بنا من هنا والتي نمنع فيها التعليقات.

تجريـــــــــــــبي

الخميس، 8 نوفمبر 2018