تفعيل BBcode لإدراج الوسائط والصور والابتسامات وتنسيقات النص في نظام تعليقات بلوجر !!

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


ماهي أكواد 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

مدونة كن داعيا للخير يقول... 11 فبراير، 2013 8:07 م

موضوع جديد ومفيد
شكرا جزيلا

Emad Adel يقول... 11 فبراير، 2013 10:50 م

موضوع أكثر من رائع .. لكن مهما تطور نظام تعليقات بلوجر فأنا سوف أبقى أستخدم Disqus

غير معرف يقول... 11 فبراير، 2013 10:55 م



ت4 انت معلم كبييييييييييييييييييييير

غير معرف يقول... 11 فبراير، 2013 10:56 م

شكرا ليك على تلبية طلبى يا استاذ جاسر بس رموز الابتسامات لزن تتكتب من اليسار الى اليمين عشان تظهر

غير معرف يقول... 11 فبراير، 2013 10:57 م

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

غير معرف يقول... 11 فبراير، 2013 10:58 م

حلووووووووووووووووووووووووووووووووووووووووووو

غير معرف يقول... 12 فبراير، 2013 4:11 ص

واااااااووووووووو ت8 ت8

[color="red"]شكرا أخي[/color]


[b]موضوع جديد ومفيد[/b]

‎Mohamed Ahmed Abdullah Anan يقول... 12 فبراير، 2013 6:43 ص

الف مليون شكر ودائما مبدع أستذ جاسر تقبل أحترامى وتقديرى ت4 ت4

جاسر الحربي يقول... 12 فبراير، 2013 8:20 ص

[COLOR="DarkGreen"]السلام عليكم

@ مدونة كن داعياً : العفو ، شاكر لك ومقدر.

@ عماد عادل : Disqus نظام تعليقات جيد ومتين ، لكن أرى أن الاستغناء عن الطرف الثالث استراتيجية حكيمة ع2

@غير معرف: شكراً لك ، أنا على قد حالي غلبان م6

@غير معرف 2: أكتب رابط مدونتك لأعاين المشكلة ، التعارض قد يكون سببه مدونتك ، وإلا فالإضافة تعمل كما ترى في المدونة التجريبية.

@غير معرف 3: أنت أحلى ج4


@غير معرف 4: العفو

@ محمد أحمد : العفو أخي الكريم ، جزاك الله خير على طيب مقالك وحسن تعقيبك ب8


تحياتي العاطرة[/COLOR]

سفير النت يقول... 12 فبراير، 2013 8:46 ص

[b]ما شاء الله اخوي جاسر
رحم الله الديك
اضافه جميله جداً التعليق في المدونه

اسعدك ربي
اخوك سفير النت

[url="http://hglphdgd.blogspot.com/#axzz2K0wZiNyY/"]مدونة سفير النت للبرامج المشروحه[/url]

[/b]

جاسر الحربي يقول... 12 فبراير، 2013 11:12 ص


أهلاً وسهلاً يا سفير النت ، وجزاك الله خير على الدعوة الطيبة ب3

aouiss abdelhak يقول... 13 فبراير، 2013 1:38 م
أزال أحد مشرفي المدونة هذا التعليق.
جاسر الحربي يقول... 13 فبراير، 2013 1:45 م

@aouiss‏ : نسيت تغلق القوس باتسخدام [ ع8

عمر بن عبد الله يقول... 13 فبراير، 2013 5:14 م

مشكور على الموضوع القيم
[img]http://www.lynneforget.com/rose.png[/img]

خلف-----الخزاعي يقول... 14 فبراير، 2013 12:06 ص

سلام--ياوطني

مدونة لمبة يقول... 15 فبراير، 2013 6:56 م

كعادتك مبدع
عندي سؤال اخي جاسر هو خارج الموضوع بالنسبة لأكواد css الخاصة بتصميم اي قالب بلوجر ايهما افضل أن نرفع الاكواد على ملف خارجي على دروب بوكس مثلا او نبقيها كما هي ؟
في انتظار ردك اخي
تحياتي
[url="http://lamba-b.blogspot.com//"]مدونة لمبة[/url]

جاسر الحربي يقول... 16 فبراير، 2013 7:40 ص


@عمر بن عبدالله : العفو أهلاً بك .

@ خلف : وعليك السلام ج6

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

@ مُنتحل حساب اسماء أن نضال :

جاسر الحربي يقول... 16 فبراير، 2013 7:50 ص

أزال المؤلف هذا التعليق.

جاسر الحربي يقول... 17 فبراير، 2013 10:24 ص

أزال المؤلف هذا التعليق.

غير معرف يقول... 19 فبراير، 2013 12:00 ص

انت بتمسح التعليق بتاعى يااااااااااااااااااااااد يا جاسر وربنا لاغزك

جاسر الحربي يقول... 19 فبراير، 2013 7:50 ص


@السلتوح:

عزائي أنك حديث عهدٍ بوجبات "السيرلاك" ج4 ، لم أحذف تعليقاتك ولن أحذف تعليقاتك اللاحقة ، يا أحمق أنا أصنفها كـ " كرسائل غير مرغوب بها " أي سـبام لأساهم في نظافة بلوقر من أمثالك من الذين يعانون مشاكل نفسية معقدة.

.
.





كن مدون يقول... 23 فبراير، 2013 8:12 ص

بارك الله فيك أخي جاسر
موضوع رائع ت4
تحياتي لك

جاسر الحربي يقول... 23 فبراير، 2013 2:37 م

@ كن مدون :

وفيك بارك الله ، أهلاً بك ج2

amer-tikrit يقول... 23 فبراير، 2013 10:21 م

السلام عليكم الى الاخر جاسر ما هي فائده الرسائل الغير مرغوب بها ؟

غير معرف يقول... 23 فبراير، 2013 10:55 م

الابتسمات مش شغاله ليه يا اخ جاسر

جاسر الحربي يقول... 24 فبراير، 2013 7:48 ص

وعليكم السلام ...

@أمير: تساعد في تصنيف تعليقات التافهين كـ سبام ، وبالتالي تحذف تعليقاتهم مباشرة عند تصنيفهم.

@غير معرف: أكتب رابط مدونتك

ahmed fawzy يقول... 21 أبريل، 2013 7:47 م

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

جاسر الحربي يقول... 22 أبريل، 2013 6:18 م

وعليكم السلام

جرب الإضافة في مدونة تجريبية أولاً ، ثم إذا نجحت فعلها في مدونتك ...

Nahri Adnan يقول... 26 مايو، 2013 5:48 ص

ت4

Omar Alazab يقول... 10 يونيو، 2013 4:40 م

شكراً لك أخي جاسر على الإضافة الرائعة
الإضافة عملت جيداً في التدوينات التي ليس بها تعليقات
أمّا المشكلة في التدوينات التي تحتوي على تعليقات فتظهر فيها كما في الصورة التالية :[img]http://4.bp.blogspot.com/-F-poHguupdc/UbXXLUSFw-I/AAAAAAAARDc/UmJ7Aigy5ow/s1600/1.jpg[/img]

جاسر الحربي يقول... 11 يونيو، 2013 2:39 م

@عمر :

نعم هذه مشكلة فنية في التعليقات المترابطة وفي كل المدونات، وقد أشرت في هذه التدوينة طريقة لإصلاح هذه المشكلة ، ركز يا عمر ج5 :

[url="http://www.alblogger.com/2013/01/comment-form-message-fix.html"]إصلاح مشكلة موضع "رسالة نموذج التعليق" في نظام التعليقات المترابطة [/url]

Omar Alazab يقول... 11 يونيو، 2013 3:18 م

آسف .. أنا ما ركزت ، أحسنت أخي جاسر ت4 ، تم حل المشكلة
ربي يخليك ويجعلكم الأفضل في عالم البلوجر

mohammed ahmed يقول... 12 يونيو، 2013 2:12 م

مشكوووووووووووووووووور ج7

Ahmed s يقول... 7 يوليو، 2013 9:01 م

السلام عليكم

شكرًا على الشرح

سؤال: هل لا تزال هذه الخاصية تعمل أم ماذا؟ ^^

لأني جربتها وما ضبطت معي ~_~

أسامة بويردن يقول... 7 أغسطس، 2013 12:24 ص

أخي الكريم أنا طبقت هاته الطريقة لو اشتغلت أكيد هاتكون الأروع و الأفضل في الـ 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

أسامة بويردن يقول... 8 أغسطس، 2013 9:14 ص

المرجو الرد أخي الكريم في انتظارك؟؟

محترفي بلوجر يقول... 9 يناير، 2014 8:36 م

ت5

احمد الشدادي يقول... 26 يناير، 2014 9:34 ص

أخي ما سبب عدم ظهور التعليقات في مدونتي http://aosan2.blogspot.com/ وظهور عدد التعليقات فقط

ara basta يقول... 6 فبراير، 2014 4:39 ص

مشكور وجزاك الله خيراً

دردشة عراقنا
شات عراقنا
منتديات عراقنا
دردشة العراق
دردشة عراق اكس
منتديات عراق اكس
دردشة الحب
دردشة عراقنا

Iheb Melki يقول... 17 أغسطس، 2014 6:31 م

مشكور ا غالي !
تعلم التدوين
دورة سيو
تعلم البرمجة
البرمجة بدون كود


دورة برمجة سكربت مقالات/أخبار بالـPHP - إبراهيم قديح

araby pro يقول... 3 سبتمبر، 2014 7:12 ص

ت4

araby pro يقول... 3 سبتمبر، 2014 7:13 ص

لم تعمل عندى للمعاينة http://www.arabdesigner.ml/2014/08/blog-post_30.html

jevara يقول... 12 سبتمبر، 2014 4:47 م

شكرا لك
[url="http://ar-dis.blogspot.com/"]مدونة عرب ديزاينر[/url]

Abdallah kamal يقول... 10 أكتوبر، 2014 8:12 م
أزال المؤلف هذا التعليق.
Saadoun Maram Al-Shammari يقول... 18 أغسطس، 2016 10:57 ص

ليش استاذ جاسر تم حذف ملفات الاضافة وما بقت تعمل؟

جاسر الحربي يقول... 18 أغسطس، 2016 2:35 م

.

بالأمس فقط نقلت الإضافة إلى محرك تطبيقات قوقل وهي تعمل بشكل جيد ، جربها !

يارب ارحمنا يقول... 29 أكتوبر، 2016 2:26 م

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

جاسر الحربي يقول... 2 نوفمبر، 2016 12:53 ص

@يارب ارحمنا:

الطرق كثيرة ، لكن جرب ترفع المقطع على box.com ثم اضغط بالزر الأيمن على ملف الصوتية واختر sharing ثم embed widget

ما يميز الموقع سعته الكبيرة ، ومشغل الصوت فيه متوافق مع جميع المتصفحات يعكس مشغلات الفلاش

إرسال تعليق



تابع صفحتنا في شبكة قوقيل بلس واقترحها :

تابع صفحتنا في الفيسيبوك:

ليصل جديدنا إلى بريدك تفضل بالاشتراك