طريقة إظهار أكواد HTML أو java داخل تدويناتك في البلوجر

حقيقة هذه الأيام تكاسلت كثيرا على هذه المدونة ، أصبحت لا أدخلها إلا مرة كل يومين فقط لقراءة تعليقات الزوار أو لمشاهدة ترتيب المدونة ، وأظن أن هذه أنانية مني اتجاهكم لذلك أنا أعتذر من كل زوار المدونة على هذا التقصير ...
قبل الدخول في الموضوع أريد أن أشير إلى أن أحد الإخوان والذي لم أتشرف باسمه لحد الآن هو من سبق و قام بسؤالي عن هذا الموضوع ولولاه لما كنت أكتبه الآن .
حسنا لندخل في الموضوع الآن ، الموضوع وببساطة كما هو العنوان سيقوم بتوضيح طريقة إظهار كود سواء HTML أو java في تدوينتك ، ومن المعروف أنه عندما تقوم بكتابة كود HTML أو java في موضوع فإنه لا يظهر والسبب في ذلك هو أن محرر HTML يعتبره خطأ في التدوينة وبالتالي فإنه يتغاضى عن ترجمته ، لكن نحن لا نريد من المحرر أن يقوم بترجمة الكود بل بإظهاره كما هو وللقيام بهذا سنحتاج المرور من عدة خطوات لن أقول أنها صعبة لكنها تحتاج بعض التركيز لكي تخرج النتيجة كما نريدها ، أظن أن فكرة الموضوع قد وصلت لذلك سأبدأ في شرح خطوات العمل ، والنتيجة ستكون كما الصورة التالية :

الخطوة الأولى وكما هو معتاد قم بأخذ نسخة احتياطية من قالب مدونتك حتى نتجنب أي كارثة لا قدر الله ، وللقيام بذلك توجه إلى التخطيط ثم تحرير HTML ثم تزيل قالب المدونة كامل .

الخطوة الثانية : اذهب إلى قالبك من خلال تخطيط ثم تحرير HTML ثم قم بالتعليم على خانة توسيع قالب المدونة ، بعد التوسيع اضغط على CTRL+F من أجل البحث عن الكود التالي :

]]></b:skin>

الخطوة الثالثة : بعد الوصول إلى الكود السابق قم بإضافة هذا الكود فوقه ، مهم قم بإضافته فوق الكود السابق .

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

الخطوة الرابعة : تأكد من أنك حصلت على نتيجة تشبهة الصورة التالية :
إن حصلت على نتيجة مشابهة ، قم بمعاينة القالب إن لم يظهر أي خطأ فهنيئا لك لقد نجحت في إضافة الكود ، ماعليك الآن سوى حفظ القالب ، والإستعداد إلى الخطوة النهائية .
لكن قبل ذلك لنتوقف قليلا مع الكود الذي أضفناه قبل قليل ، هذا الكود هو عبارة عن أمر يقوم بتأطير الكتابة التي نريدها بواسطة إطار مميز لتلك الكتابة ، وأن تعمدت قول الكتابة وليس كود html لأنه يقوم بتأطير أي شيء يوجد بداخله سواء كتابة أو كود html أو كود java أو حتى صورة .
تستطيع من خلال هذا الكود أيضا أن تتحكم في شكل الإطار ولونه وأبعاده وسمكه ، والصورة التي أمامكم توضح تلك الخواص القابلة للتعديل وهي سهلة للغاية .
لكن السؤال الأهم والضروري وهو كيف أتحكم في الكتابة داخل الإطار وخارجها وقت ما أريد ؟ ، أو بمعنى أصح هو كيف أعلم أنني أكتب داخل الإطار وليس خارجه ؟ .
الإجابة سهلة وهي أن هناك كود آخر يقوم بمناداة الكود السابق لكي يقوم بتأطير الكتابة التي نريدها ، والكود كالتالي :

<pre></pre>

ولكي تظهر الكتابة يجب أن نضيفها داخل <pre> و </pre> وأي كتابة خارج هاذين الكودين ستظهر بشكلها الطبيعي .
وهذه صورة مثال عما أتحدث عليه :

وهذه النتيجة :

الخطوة الخامسة والأخيرة : ما قلته في الخطوة الرابعة ينطبق على الكتابة بالحروف فقط ، أما الكتابة بأكواد html أو java فإليكم الطريقة .
سنحتاج بشكل مستمر إلى أداة postable وهي أداة لا غنى عنها في الوقت الحالي ، وهي تقوم بتحويل الأكواد إلى ما يسمى بالأكواد الصديقة للـ html .
ولكي تستوعب ما أتحدث عنه قم بالتالي : قم بنسخ أي كود يقع تحت عينيك حاليا ، توجه إلى أداة postable قم بلصق الكود داخل المستطيل واضغط على MAKE IT FREINDLY ، ستجد أن الكود قد تحول إلى كتابة غير مفهومة وهذا ما نريد بالضبط أن نصل إليه .

تلخيص لخطوات العمل بكاملها :
بعد أن تصيف الكود إلى قالبك في الخطوات الأولى والثانية والثالثة ، قم بحفظ القالب .
الآن إذا أردت أن تكتب موضوع في مدونتك والموضوع يحتوي بداخله على أكواد فيجب أن تقوم بالتالي :
حول الكود الذي تريد أن تكتبه في موضوعك إلى كود صديق من خلال أداة postable .
الكود الذي حصلت عليه ضعه داخل الكودين التاليين <pre> و </pre> ، من خلال وضع تحرير HTML وليس وضع تأليف .
وهكذا سيظهر الكود مأطر وبشكل سليم داخل التدوينة ، والصورتين في الخطوة الرابعة توضحان الطريقة والنتيجة .

انتهى الموضوع بحمد الله ، وتذكر أن الردود مفتوحة لأي استفسار ، ملاحظة أو حتى انتقاد