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

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


اليوم سأشرح طريقة وضع اكواد HTML او PHP او اي اكواد اخرى بداخل مواضيع مدونة بلوجر،

المشكلة انه لو انت وضعت الكود مباشرة في الموضوع، فسيتم معالجته على انه كود HTML و يتم

ترجمته من طرف المتصفح. و لن يظهر كما تريده. لذا لحل هذه المشكلة، اتبع الطريقة التالية.


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


اولا اكتب الكود الذي تريد، ثم قم بنسخه

و الصقه في هذا الموقع:

http://centricle.com/tools/html-entities/

ثم اضغط على encode مثل ما هو مبيّن في الصورة:



بعد ذلك ينتج لك كود جديد (معدّل من السابق).



قم بنسخه، و ضعه في الموضوع عادي جدا،

و عندما تنشر الموضوع سيظهر الكود بشكل جيد للزوار و بدون اي مشكل.


مثال عن النتيجة:

<hr>
<p>Arab publishers Blog</p>



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


عندما تضع الاكواد هكذا فقط، فانها قد تبدوا بشعة قليلا للبعض، و ماذا لو كان الكود يحتوي

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

بداخل اطار جميل و بالعرض و الارتفاع الذي نريده، تابع معي.


ادخل الى تحرير HTLM في لوحة تحكم مدونتك.

و ابحث لنا عن التالي:


]]></b:skin>



و اضف قبله التالي:


#code {

padding:5px;

border:1px dashed;

background-color:#a4ddff;

direction: ltr;

text-align: left;

height:100px;

overflow-y:scroll;

}



* خلفية اطار الكود

* ارتفاع اطار الكود


و قم بالحفظ.

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


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

ثم اضغط على HTML في صندوق تحرير الموضوع.



ثم ابحث عن الكود الذي وضعته.


و اضفه بداخل اطار (خلية) مستعملا تنسيق الاطار الذي وضعناه.

مثل ما هو موضح في الصورة:




شرح اكثر لما قمنا به:


<div id="code">

<hr>

<p>Arab publishers Blog</p>

</div>




مثال عن النتيجة، بعد النشر:


<hr>
<p>Arab publishers Blog</p>




ارجو ان يكون الدرس افادكم، و هو مهدى للاخ MEZOMASR، و بالتوفيق للجميع

في تطبيق الدرس، .