إبحث في شبكة الإنترنت
بحث مخصص
كتاب زورو في رياضيات الربح من أدسنس
دورة تصميم ستايلات بلوجر
اليوم سأشرح طريقة وضع اكواد 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، و بالتوفيق للجميع
في تطبيق الدرس، خاصة المبرمجين العرب.
المشكلة انه لو انت وضعت الكود مباشرة في الموضوع، فسيتم معالجته على انه كود 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، و بالتوفيق للجميع
في تطبيق الدرس، خاصة المبرمجين العرب.
التسميات
الاشتراك في:
تعليقات الرسالة (Atom)
8 تعليقات:
الاثنين, أغسطس 17, 2009
يقول...شكرا لك مع أني أعلم أنك تحتاج أكثر من كلمة الشكر على هذا الموضوع الرئع أنت فعلا شخص رائع وصاحب شخصية جميلة وأتمنى لك التوفيق والنجاح أكثر وأكثر
كلماتي عاجزة عن شكرك وعاجزة عن تعبير مدى أحترامي لك وتقديري لك فأنت تذيد في نظري كل يوم أكثر وأكثر وتفاجئني بأجاباتك على الأسألة
وبما أنك أهديت هذا المقال لي وطبعا هذا شئ يشرفني جدا حبيت أن أكون أول المعلقين على هذا المقال الأكثر من رائع
أنا مش عارف أقول لك أيه أنت محتاج قصيده من الشعر والله بدون مجامله
ليس بيدي شئ أفعله لك غير الدعاء لك (ربنا يكرمك ويوفقك ويجازيك خيرا كما تفعل خيرا للأخرين وربنا معك )
وأن شاء الله أقدر أرد جزء من جميلك عليا في أقرب وقت
وأحب أنهي كلامي بذكر الحبيب المصطفى محمد "صلى الله عليه وسلم"
الاثنين, أغسطس 17, 2009
يقول...الأخ الكريم أنا تقريبا بحثت فى كل مدونتك الجميلة عن موضوع مهم جداً بالنسبة لى إلا إنه مش موجود والموضوع باختصار هو إنى عايز أقسم المدونة بتاعتى لتقسيمات فرعية تكون داخل التقسيمات الأساسية يعنى لما الزائر يضغط على أى من التسميات اللى فى السايدبار تظهر له التقسيمات الفرعية وليس المواضيع مباشرة يعنى أنا مثلا لو عامل مدونة كتب الكترونية والتصنيفات اللى فيها لو كانت قسم الكيمياء , قسم الفيزياء , قسم الأحياء قسم الإقتصاد قسم الكمبيوتر الخ.... عايز لما الزائر يضغط على قسم الكيمياء مثلاً يفتحله التصنيفات الفرعية اللى داخل قسم الكيمياء مثل الكيمياء الحيوية , الكيمياء العضوية , الكيمياء التحليلية الخ.... وبعد الضغط على أى واحد من الأقسام الفرعية دى يظهر تقسيم داخلى آخر أدق أو حتى تظهر المواضيع داخل القسم الفرعى ده مباشرة
وده عنوان مدونتى التجريبية علشان تلقى نظرة
http://bookseries4you.blogspot.com/
أخى منتظر ردك
الاثنين, أغسطس 17, 2009
يقول...الاخ MEZOMASR //
عفوا، و شكرا لدعاءك آمين يا رب العالمين.
و تحياتي ليك.
الاخ Eng.Ahmad Rashad //
لحد الان بلوجر لا يوفر هذه الخاصية في الوقت الحالي،
و ان شاء الله يتم توفيرها في المستقبل.
و يمكنك اقتراح ذلك من منتدى بلوجر الرسمي من هنا:
قسم الاقتراحات في منتدى بلوجر الرسمي
و تقبل تحياتي.
الخميس, أغسطس 20, 2009
يقول...و الله هذا الذي كنت أبحث عنه و لقد سألتك في قسم الأسئلة و إستفسارات.
بارك الله فيك
الاثنين, ديسمبر 21, 2009
يقول...السلام عليكم
شكرا على الشرح..لكن ارغب بإضافة مثل ساعةعلى واجهه المدونة
كيف ذلك وهل من الممكن استخدام كود مثل اكواد الجاف
او الهتمل فقط
تحياتي
الثلاثاء, ديسمبر 29, 2009
يقول...يوجد هذه الخاصية في الادوات الاضافية في بلوجر.
و يمكنك الوصول اليها، عن طريق الدخول الى عناصر الصفحة ثم، اضف اداة جديدة، ثم ابحث عن اداة ساعة، و قم باضافتها.
شكرا لمرورك و بالتوفيق.
الجمعة, أغسطس 20, 2010
يقول...السلام عليكم ورحمة الله وبركاته
اخى الفاضل جزاك الله كل خير على مجهودك الجبار اللذى يعطينا الحافز والمثابره على مواصلة المشوار
ولقد اعجبت كثيرا بشروحاتك اللذى سوف تساعدنى كثيرا لتطوير مدونتى التى مازلت اتخبط فيها ولكن مازال عندى ايمان بالله اى سوف اصل بحول الله وقوته فمازلت فى بداية المشوار وان شاءالله استفيد من دروسك وفى الختام اشكرك جزيل الشكر على ماتقدمه وصلى اللهم على محمد وعلى اله اجمعين اختك فيض
السبت, نوفمبر 20, 2010
يقول...شكرا
وياريت اعرف اكلمك ع الخاص
إرسال تعليق