الجمعة، 6 نوفمبر، 2009

كيف تضع كود او اكواد في صندوق تحرير رسائل مدونة بلوجر ؟ طريقة وضع وكتابة اكواد HTML او PHP في مدونة بلوجر ونشرها ...

قراءة للموضوع

إخواني الأعزاء ، أحيانا عندما تتصفح في بعض المدونات او المواقع واقصد المدونات التعليمية أو التي تقدم طرق إضافات وتحسينات لمدونات بلوجر تجد أن بعض المواضيع تحتوي على أكواد بداخلها فتاتي إليك فكرة أن تنشر هذا الموضوع في مدونتك فعندم تقوم بنسخ ولصق هذا الموضوع مباشرة ونشرة تظهر لك رسالة بالخطاء فلا تستطيع . إذاً ما الحل لهذه المشكلة ؟
اليوم يا إخواني الكرام ، سأشرح طريقة وضع أكواد HTML او PHP أو أي أكواد اخرى بداخل مواضيع مدونة بلوجر أي بداخل صندوق محرر الرسائل الذي يتكون من وضع ( تأليف ) ووضح ( تحرير html ) انظر الصورة أدناه ، المشكلة انه لو انت قمت بنسخ أي كود من أي موقع مثلا وقمت بلص الكود مباشرة في صندوق الرسائل لكي تنشره للقراء فسيتم معالجته على انه كود HTML ويتم ترجمته من طرف المتصفح وتظهر رسالة خطاء عند نشر الرسالة ولن يظهر أبدأ .

(اضغط على الصورة لتكبر )



إذاً الحل لهذه المشكلة اتبع الخطوات التالية :

( نعطي مثال عن الكود الموجود في الموضوع السابق كيف تعمل فهرس للمدونة )

اولا : كتابة اكواد HTML بداخل مواضيع مدونة بلوجر .

1 - قم بكتابة الكود الذي تريده أو قم بنسخة ثم قم بفتح الموقع التالي : ( http://centricle.com/tools/html-entities/ ) بعد فتح الموقع قم بلصق الكود في الجدول كما هو موضح في الصورة التالية :

(اضغط على الصورة لتكبر )


2 - بعد لصق الكود في الجدول كما هو موضح في الصورة أعلاه ، نقوم بالضغط على زر ( encode ) الموجود اسفل الجدول ينتج لك كود جديد معدل كما هو موضح في الصورة التالية :

(اضغط على الصورة لتكبر )




3 - قم بنسخ الكود المعدل من الجدول كما هو موضح في الصورة أعلاه ، ثم قم بلصقة في صندوق محرر الرسائل ( صندوق المواضيع ) عندما تعمل معاينة أو نشر للموضع يظهر بشكل جيد للزوار وبدون أي مشاكل . انظر الصورة التالية :

(اضغط على الصورة لتكبر )



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

ثانياً : تنسيق الاكواد في مدونة بلوجر :

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

1 - ادخل الى تحرير HTLM في لوحة تحكم مدونتك ، و ابحث لنا عن الكود التالي:


]]></b:skin>

2 - واضف قبلة الكود التالي :

#code {

padding:5px;

border:1px dashed;

background-color:#a4ddff;

direction: ltr;

text-align: left;

height:100px;

overflow-y:scroll;

}

* اللون الازرق في الكود هي خلفية لون اطار الكود
* اللون الاحمر في الكود هو ارتفاع اطار الكود


ثم قم بعمل حفظ .

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

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

3 - اضغط على HTML في صندوق تحرير الموضوع. ثم نبحث على الكود الذي قمنا بلصقة واضف بداخله إطار ( الخلية ) كما هو موضح في الصورة التالية : ( الصورة توضح مكان الكود في صندوق تحرير HTML واكواد إطار الخلية فوقة وتحته ليظهر لنا بتنسيق جيد ، لذا ضروري اضغط عليها لتتكبر )

(اضغط على الصورة لتكبر )


واليكم كود اطار الخلية الذي باللون الاحمر لتسهيل عملية النسخ لكم :

<div id="code">
<script src="http://sites.google.com/site/taliblogsite/file/blogtoc-min.js"></script>
<script src="http://italib.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>




مثال عن النتيجة بعد النشر انظر الصورة التالية :


(اضغط على الصورة لتكبر )







أتمني من الله العلي القدير أن الدرس سيفيدكم ويرشدكم عن ضالتكم التي تبحثون عليها ، والى اللقاء في موضوع آخر ،،
استفساراتكم وتعليقاتكم مرحبا بها ،،،

المصدر : مدونة الناشرون العرب

10 التعليقات:

NIZAR QADI يقول...

شرحك رائع يا أخوي..

جزاك الله خير

yasser esmail يقول...

اخى العزيز

لى طلب وبصراحه انا تعبت ومش عارف الاقيه

ارجو منك اعطائى طريقه وضع اكواد فى الموضوع فى مربعات زى مانت حاططها كده فى الموضوع

وشكرا جزيلا

ستارت فوركس يقول...

شكرا جزيلا

وداد يقول...

شرح رائع جدا

وكنت ابحث عن هذه الطريقة

والحمد لله نفذتها عندي بالمدونة

جزاك الله خير

يشرفني زيارتك لمدونتي

http://wedadsalah.blogspot.com/

gamezer يقول...

السلام عليكم شكرا لك

لو سمحتم اريد رأيكم في طريقة وضع الاشهارات

http://aprenderxspanish.blogspot.com/

غير معرف يقول...

هههههههههههههههه

غير معرف يقول...

شكرا يا برنس انت كونت بتشرح درس تانى ولا ايه

mazika2day يقول...

(*_ّ)

Oussama Dzmind يقول...

بارك الله فيك،موضوع رائع
تم،يمكنك مشاهدة التطبيق عنابالدخول الى "أضفنا لمدونتك"
dzmind.blogspot.com

Yasser يقول...

http://www.krokeh.com/
موقع كروكيه
سيتم التطبيق