نظام تعليقات بلوجر بسيط ويؤدي الغرض بشكل أرى أنه جيد جداً، ولكن أحياناً تريد إضافة صورة توضيحية فلا يسعفك نظام تعليقات بلوقر إلا بمجرد وضع رابط الصورة، كذلك مشكلة إدراج كود في نظام تعليقات عربي .. الخ.
الإضافة التي سأقدمها بمشيئة الله تمكن نظام التعليقات ( العادية أو المترابطة ) من إدراج الوسائط كمقاطع اليوتيوب وفيمو والصور والصوتيات ، وأشهر تنسيقات النصوص كالألوان والحجم، أيضاً إدراج الأكواد ، بالإضافة إلى ابتسامات استخلصتها من برنامج المحادثة الواتس آب. . .
ماهي أكواد BBcode ؟ وما فائدتها ؟
إذا كنت عضواًُ في منتدى فلا شك أنك استخدمت BBcode !، وهي لغة ترميز خاصة اشتهرت في تعليقات المنتديات، ميزتها الرئيسية تفادي استخدام أكواد HTML التي قد تضر بالنظام مثل أكواد META ، وبالتالي هي تقيّد استخدام الأكواد بحسب ما يسمح به مدير الموقع ، أكواد BBcode تُفسر في المتصفح بما يقابلها من أكواد HTML. تستخدم BBcode الأقواس المربعة فلكي تكتب نص عريض مثلاً تكتبه هكذا:
[b] نص عريض [/b]
رغم أن اسلوب كتابة BBcode شبه موحد ، لكن هناك للأسف اختلافات طفيفة تؤثر في ترميزها بين منتدى وآخر، لذلك نجد أن كل موقع يضع دليل لطريقة كتابة الأكواد.
ما فائدة هذه الإضافة
الإضافة التي سنستعرضها لمدونات بلوقر تُفعل أكواد BBcode في نظام التعليقات سواء النظام العادي أو نظام التعليقات المترابطة ، بالإضافة إلى ايقونات الوجوه المعبّرة ( الابتسامات ) والتي استخلصتها من برنامج المحادثة الشهير WhatsApp ، وبالمناسبة الإضافة مبنية من إضافة الابتسامات المشتهره. دمجتها بأداة ترميز HTML لأهميتها. يمكن تجربة الإضافة من خلال الصفحة التالية :
طريقة تركيب الإضافة إلى مدونة بلوقر
قبل إغلاق وسم body مباشرة ، أي قبل </body> قم بنسخ الكود التالي:
<b:if cond='data:blog.pageType == "item"'> <script src='http://alblogger2010.appspot.com/bbcode/bbcode.js' type='text/javascript'/> </b:if>
السطر الثاني يُضَمّن رابط الإضافة يمكنك تنزيله ورفعه في حسابك الخاص، أو يمكن استخدام هذه الإضافة ان شئت، وللإخوة الراغبين في التعديل أيضاً يمكنهم ذلك أيضاً :)
وضعت الإضافة في جملة شرطية لتظهر فقط في مواضيع المدونة ؛ حتى لا تكون عبء على الصفحة الرئيسية للمدونات وبما أنها أصلاً خاصة بنظام التعليقات الذي لن يتواجد في الصفحة الرئيسية.
تركيب دليل لأكواد BBcode والابتسامات
تعرفنا على تركيب الإضافة البسيط لكنك لن تترك زائر مدونتك بدون أن تعرفه بطريقة استخدام الأكواد ورموز الايقونات ، كذلك مربع أداة الترميز لاكواد HTML. يمكنك تركيب دليل لمدونتك بأي طريقة تعجبك ، ولكن لا يمكنك تجاوز إصلاح ضروري وهام لرسالة التعليقات في نظام التعليقات المترابطة والذي عرضته هنا: إصلاح مشكلة موضع "رسالة نموذج التعليق" في نظام التعليقات المترابطة . إذا لم تقم بهذا الإصلاح فببساطة ستشوه نظام تعليقات مدونتك فإما أن تصلحه أو تنتظر بلوقر ! ، ان أردت تركيب دليل بسيط ومباشر فأقترح عليك هذه الطريقة:
اعرض القالب في وضع تحرير HTML ، وتأكد من توسيع القالب بوضع علامة صح عند الخيار " توسيع قوالب عناصر واجهة المستخدم " ، ثم ابحث عن الكود التالي:
<data:blogTeamBlogMessage/>
◄ ركز معي: سيتكرر هذا الكود في القالب أربع مرات ، قم بنسخ الكود التالي بعد الموضع الرابع مباشرة :
<style type='text/css'> .classname{box-shadow:inset 0px 1px 0px 0px #fff;background-color:#ededed;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777; font-family:arial;font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none !important;text-shadow:1px 1px 0px #fff} .classname:hover{background-color:#dfdfdf}.classname:active{position:relative;top:1px} </style> <a class="classname" href="#" onClick="window.open('http://blogger-forms.blogspot.com/2013/01/blog-post.html','bbcode','width=500,height=420')">ترميز HTML</a> <a class="classname" href="#" onClick="window.open('http://blogger-forms.blogspot.com/2013/01/bbcode.html','bbcode','width=520,height=620')"> رموز BBcode</a> <a class="classname" href="#" onClick="window.open('http://blogger-forms.blogspot.com/2013/01/smileys.html','bbcode','width=420,height=320')">الإبتسامات </a>
الدليل البسيط هذا عبارة عن أزرة أنيقه تفتح نوافذ منبثقة بواسطة الجافاسكريبت ولكن بطريقة تقليدية، الدليل عبارة عن صفحات كتبتها في مدونة خاصة بالإضافة أيضاً يمكنك حفظها أو استخدامها مباشرة مع العلم أنني قد أحدث الإضافة مع الدليل وبالتالي ستكون مستخدماً لآخر اصدار ان وجد :) . ان لم تعجبك الطريقة التقليدية في فتح النوافذ يمكنك إضافة تأثيرات صندوق الضوء Lightbox على النوافذ المنبثقة ، في مدونتي استخدمت إضافة colorbox وبما أنني استخدمها فهي لا تشكل عبء إضافي ، وهذا اثبات آخر على قوة colorbox وعلى ضرورة اختيار الإضافات القوية والشاملة !
وحتى لا أتركك بسؤال لماذا تكرر هذا الكود أربع مرات فالجواب لأن الموضع الأول والموضع الثالث خاصة بقالب الجوال ، والثاني والرابع خاصة بقالب سطح المكتب ، والأول والثاني خاصة بنظام التعليقات العادي ، والثالث والرابع خاصة بنظام التعليقات المترابطة .. امم !!
تحياتي العاطرة
.
التعليقات: 48
موضوع جديد ومفيد
شكرا جزيلا
موضوع أكثر من رائع .. لكن مهما تطور نظام تعليقات بلوجر فأنا سوف أبقى أستخدم Disqus
ت4 انت معلم كبييييييييييييييييييييير
شكرا ليك على تلبية طلبى يا استاذ جاسر بس رموز الابتسامات لزن تتكتب من اليسار الى اليمين عشان تظهر
شكرا ليك على تلبية طلبى يا استاذ جاسر بس رموز الابتسامات لزم تتكتب من اليسار الى اليمين عشان تظهر انا اول ماركب الكود فى مدونتى الزوار بهدولولى التعليقات محدش كان عارف يكتب الابتسامه ياريت تحاول تصلح الخلل ده يا استاذ جاسر وشكرا لك مره اخرى
حلووووووووووووووووووووووووووووووووووووووووووو
واااااااووووووووو ت8 ت8
[color="red"]شكرا أخي[/color]
[b]موضوع جديد ومفيد[/b]
الف مليون شكر ودائما مبدع أستذ جاسر تقبل أحترامى وتقديرى ت4 ت4
[COLOR="DarkGreen"]السلام عليكم
@ مدونة كن داعياً : العفو ، شاكر لك ومقدر.
@ عماد عادل : Disqus نظام تعليقات جيد ومتين ، لكن أرى أن الاستغناء عن الطرف الثالث استراتيجية حكيمة ع2
@غير معرف: شكراً لك ، أنا على قد حالي غلبان م6
@غير معرف 2: أكتب رابط مدونتك لأعاين المشكلة ، التعارض قد يكون سببه مدونتك ، وإلا فالإضافة تعمل كما ترى في المدونة التجريبية.
@غير معرف 3: أنت أحلى ج4
@غير معرف 4: العفو
@ محمد أحمد : العفو أخي الكريم ، جزاك الله خير على طيب مقالك وحسن تعقيبك ب8
تحياتي العاطرة[/COLOR]
[b]ما شاء الله اخوي جاسر
رحم الله الديك
اضافه جميله جداً التعليق في المدونه
اسعدك ربي
اخوك سفير النت
[url="http://hglphdgd.blogspot.com/#axzz2K0wZiNyY/"]مدونة سفير النت للبرامج المشروحه[/url]
[/b]
أهلاً وسهلاً يا سفير النت ، وجزاك الله خير على الدعوة الطيبة ب3
@aouiss : نسيت تغلق القوس باتسخدام [ ع8
مشكور على الموضوع القيم
[img]http://www.lynneforget.com/rose.png[/img]
سلام--ياوطني
كعادتك مبدع
عندي سؤال اخي جاسر هو خارج الموضوع بالنسبة لأكواد css الخاصة بتصميم اي قالب بلوجر ايهما افضل أن نرفع الاكواد على ملف خارجي على دروب بوكس مثلا او نبقيها كما هي ؟
في انتظار ردك اخي
تحياتي
[url="http://lamba-b.blogspot.com//"]مدونة لمبة[/url]
@عمر بن عبدالله : العفو أهلاً بك .
@ خلف : وعليك السلام ج6
@مدونة لمبة: لا الأفضل - في نظري - ابقاء خصائص css في القالب هذا أكثر اعتمادية من استخدام طرف خارجي مهما كان جيداً ك دروب بوكس . ثم لا تنسى أن دروب بوكس خدمة رفع ملفات وبالتالي قد تكون معرضه للحجب عند بعض المستخدمين.
@ مُنتحل حساب اسماء أن نضال :
أزال المؤلف هذا التعليق.
أزال المؤلف هذا التعليق.
انت بتمسح التعليق بتاعى يااااااااااااااااااااااد يا جاسر وربنا لاغزك
@السلتوح:
عزائي أنك حديث عهدٍ بوجبات "السيرلاك" ج4 ، لم أحذف تعليقاتك ولن أحذف تعليقاتك اللاحقة ، يا أحمق أنا أصنفها كـ " كرسائل غير مرغوب بها " أي سـبام لأساهم في نظافة بلوقر من أمثالك من الذين يعانون مشاكل نفسية معقدة.
.
.
بارك الله فيك أخي جاسر
موضوع رائع ت4
تحياتي لك
@ كن مدون :
وفيك بارك الله ، أهلاً بك ج2
السلام عليكم الى الاخر جاسر ما هي فائده الرسائل الغير مرغوب بها ؟
الابتسمات مش شغاله ليه يا اخ جاسر
وعليكم السلام ...
@أمير: تساعد في تصنيف تعليقات التافهين كـ سبام ، وبالتالي تحذف تعليقاتهم مباشرة عند تصنيفهم.
@غير معرف: أكتب رابط مدونتك
السلام عليكم احسك على الاضافة الرائعة ولاكن عندى اتفسار اخى الكرم عند اضافتها لمدونتى تعمل الاضافة على الموضعات التى ليس لها تعليقات وعندى موضوعات اخرى سابقة لها تعليقات ما بتظهر الاضافة عند بوكس التعليقات دا اول شيى
ثانيا الموضوعات اللى متواجدة فيها الاضافة بعد ما تجرب بها تعليق لايظهر الشكل ويطهر كودة ولا تظهر فى اى تعليق اخر لنفس الموضوع ومدونتى مدونة نجوم اف ام بث مباشر حتى ترى الاضافة بنفسك
اعتذر لطول استفسارى ومع كل شيء مشكوووووووور لان الموضوع جميل ت4
وعليكم السلام
جرب الإضافة في مدونة تجريبية أولاً ، ثم إذا نجحت فعلها في مدونتك ...
ت4
شكراً لك أخي جاسر على الإضافة الرائعة
الإضافة عملت جيداً في التدوينات التي ليس بها تعليقات
أمّا المشكلة في التدوينات التي تحتوي على تعليقات فتظهر فيها كما في الصورة التالية :[img]http://4.bp.blogspot.com/-F-poHguupdc/UbXXLUSFw-I/AAAAAAAARDc/UmJ7Aigy5ow/s1600/1.jpg[/img]
@عمر :
نعم هذه مشكلة فنية في التعليقات المترابطة وفي كل المدونات، وقد أشرت في هذه التدوينة طريقة لإصلاح هذه المشكلة ، ركز يا عمر ج5 :
[url="http://www.alblogger.com/2013/01/comment-form-message-fix.html"]إصلاح مشكلة موضع "رسالة نموذج التعليق" في نظام التعليقات المترابطة [/url]
آسف .. أنا ما ركزت ، أحسنت أخي جاسر ت4 ، تم حل المشكلة
ربي يخليك ويجعلكم الأفضل في عالم البلوجر
مشكوووووووووووووووووور ج7
السلام عليكم
شكرًا على الشرح
سؤال: هل لا تزال هذه الخاصية تعمل أم ماذا؟ ^^
لأني جربتها وما ضبطت معي ~_~
أخي الكريم أنا طبقت هاته الطريقة لو اشتغلت أكيد هاتكون الأروع و الأفضل في الـ bbcode على بلوجر
أولا يمكنك أن ترى عن الشكل الذي أعنيه
[url="http://bouyardane-designer.blogspot.com/2013/07/blog-post_22.html/"]مدونة بويردن[/url]
ما أريده هو لما يضغط المعلق على أيقونة b مثلا بتم كتابة الكود مباشرة داخل الفورم الخاص بالتعليق يعني بدون نسخ ولصق لتوفير الوقت وتسهيل عملة تزيين التعليق. أرجوا أن تكون فهمت فكرتي مع العلم أنني وضعت الجافا الخاص بالكتابة المباشرة على الفورم لقد اشتغلت معي عند تجربتها في ملف index.html بحاسوبي لكن لما عملتها على بلوجر لم اعمل ماهي المشكلة وهذا هو الكود الجافا :
var textareaName = 'commentBodyField';
مع العلم أنني قمت باستخراج الـ id الخاص بفورم بلوجر عبر الـ inspect element وهو commentBodyField لكن لم أعرف أين المشكلة ت2 ولقد أردت مشاركة هاته التجربة معك قد يمكننا تشغيلها بفضل مشاركة الأفكار وشكرا
المرجو الرد عي من هنا
alwanarabe@gmail.com
أو في تعليق
وعيدكم مبارك سعيد ت1
المرجو الرد أخي الكريم في انتظارك؟؟
ت5
أخي ما سبب عدم ظهور التعليقات في مدونتي http://aosan2.blogspot.com/ وظهور عدد التعليقات فقط
مشكور وجزاك الله خيراً
دردشة عراقنا
شات عراقنا
منتديات عراقنا
دردشة العراق
دردشة عراق اكس
منتديات عراق اكس
دردشة الحب
دردشة عراقنا
ت4
لم تعمل عندى للمعاينة http://www.arabdesigner.ml/2014/08/blog-post_30.html
شكرا لك
[url="http://ar-dis.blogspot.com/"]مدونة عرب ديزاينر[/url]
ليش استاذ جاسر تم حذف ملفات الاضافة وما بقت تعمل؟
.
بالأمس فقط نقلت الإضافة إلى محرك تطبيقات قوقل وهي تعمل بشكل جيد ، جربها !
لو سمحت كيف اضيف صوتيات في المشاركات
بحثت حتى مملت ولم استطيع
فهل من مساعدة يا مستر جاسر
@يارب ارحمنا:
الطرق كثيرة ، لكن جرب ترفع المقطع على box.com ثم اضغط بالزر الأيمن على ملف الصوتية واختر sharing ثم embed widget
ما يميز الموقع سعته الكبيرة ، ومشغل الصوت فيه متوافق مع جميع المتصفحات يعكس مشغلات الفلاش
يوتيوب:
[y]http://youtu.be/0KCLh2xKZhQ[/y]
يوتيوب:
[y]http://www.youtube.com/watch?v=0KCLh2xKZhQ[/y]
إرسال تعليق