2009-02-16

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

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

HTML أو java

الخطوة الأولى وكما هو معتاد قم بأخذ نسخة احتياطية من قالب مدونتك حتى نتجنب أي كارثة لا قدر الله ، وللقيام بذلك توجه إلى التخطيط ثم تحرير 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 وليس وضع تأليف .
وهكذا سيظهر الكود مأطر وبشكل سليم داخل التدوينة ، والصورتين في الخطوة الرابعة توضحان الطريقة والنتيجة .

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

28 تعليقات:

egyphoto يقول...

متشكر جدا على الطريقة وانا على فكرة اسمى حسام

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

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

دمت بود

أحمد الرامي يقول...

أولا أخ حسام سعيد جدا بالتعرف إليك ، وثانيا سعيد بتواجدك في المدونة .

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

عباس يقول...

كالعادة تدوينة أخرى رائعة ومفيدة

أداة postable غاية في الروعة
جزاك الله كل خير لهذا الجهد

وكنت بجد متشوق خلال هذين اليومين لتدوينة جديدة من ابداعاتك
اتمنى يكون ما يمنعك عنا كل خير

أحمد الرامي يقول...

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

سعيد يقول...

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

ابن حجر الغامدي يقول...

السلام عليكم أخي شكرا لك على الموضوع

افتتحت منتدى عرب بلوقر

وأتمنى منك أن تكون أحد أعضاءه لنعمل على تطوير

مدونات العرب البلوقرية
هذا رابط المنتدى

http://br-arab.com/vb/

وأتمنى لك التوفيق

أخوك ابن حجر الغامدي

أحمد الرامي يقول...

الأخ سعيد
العفو أخي و أتمنى حقا أن أكون قد وصلت للدرجة التي تحدث عنها ، والإنسان مهما فعل فهو يظل يحاول لا غير .

الأخ ابن حجر
شكرا على الدعوة وانشاء سأقوم بزيارة المنتدى في أقرب فرصة ممكنة ، بالتوفيق أخي .

رضوان يقول...

شكرا لك أخي
في الحقيقة مدونة متميزة
دمت بود

روابط رائعة يقول...

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

ومدري وش الحل

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

إرشيد الجرايدة:

شكرا لك و الله طريقة حلة و مدونتك جميلة ورائعة

يعطيك العافية

الاردن-المفرق

New Project يقول...

السلام عليكم ورحمة الله وبركاتة
اهنيك على مدونتك الرائعة تصميم ومحتوى
وارجو زيارتك فى:
http://dalilblog.blogspot.com
وبالتوفيق

انثى ملائكيه يقول...

شكرا اخوي على الدروس القيمه وارجوا منك زيارة مدونتي
لتعطيني رايك ..

http://angelweman.blogspot.com/

أبو أنس Bassimane يقول...

السلام عليكم أخي الكريم شكرا لك على الجهود المعتبر ع


من خلال مواضيعك استطعت بحول الله أن أقوم بهذا العمل المتواضع
http://bassimane.blogspot.com/

migaboy يقول...

شارك معنا و كن ايجابيا
لمساندة قضية الشهيدة المصرية شهيدة الحجاب مروة الشربينى
ساهم معنا فى مدونة مروة الشربينى
http://marwa32.blogspot.com/
بقراءتك و تعليقاتك
ستجدون بالمدونة
جميع اخبار القضية
و البيانات
و تعليقات من على الانترنت
و تعليقات
و صور تخص القضية
شارك و ادعمنا بوقتك و جهدك لا بتعاطفك

قراءة لما بين السطور يقول...

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

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

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

sites like service يقول...

شكراااااا لك .....مقالتك اكثر من رائعه

whois domain find يقول...

شكرا على المدونه الجميلة و بالتوفيق دائما

جمعية كيان يقول...

مدونه رائعه جدااا....شكرا لك

how to do it easy يقول...

مشكور علي المدونه...كل التوفيق

eng.mohamed hassan badawy يقول...

مدونة جميلة بجد

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

الله يخليك ويوفقك في الدنيا والآخرة احبك ياشيخ

احبك احبك احبك ليا يومين افحط في النت عشان الدرس ده

maroc يقول...

شكرا لك والله ما قصرت
الملرجو زيلرتك هنا
www.pr0-pc.blogsopt.com.

∂ѕнαн يقول...

صرآحه مآفهمت شي !!
بس طلبتك تكفى آبغى آعرف كيف اضيف مقطع صوتي يعني اول مااحد يدخل ماي بلوق تشتغل كذا ادري انها تعلق وتثقل الصفحه بس كيف اذا تكرمت !!

∂ѕнαн يقول...

انا لي اسابيع افحط ومالقيت شي مفهوم انا مخي تفكيره بطططيء ..... ويينك !!!

Pro يقول...

http://tvmubacher.blogspot.com/
شكرا

warda Alert يقول...

يسلمو اديك اخي

إرسال تعليق