تفعيل 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 وعلى ضرورة اختيار الإضافات القوية والشاملة !

وحتى لا أتركك بسؤال لماذا تكرر هذا الكود أربع مرات فالجواب لأن الموضع الأول والموضع الثالث خاصة بقالب الجوال ، والثاني والرابع خاصة بقالب سطح المكتب ، والأول والثاني خاصة بنظام التعليقات العادي ، والثالث والرابع خاصة بنظام التعليقات المترابطة .. امم !!

تحياتي العاطرة 

.