السلام عليكم و رحمة الله تعالى و بركاته .
متابعي و زوار موقع عصام ويب . حياكم الله ، أهلا و سهلا بكم جميعا في هاته المقالة الجديدة الذي استغل مطلعها بالشكر و الثناء لكم جميعا على وفائكم و نسأل الله تعالى أن يديمها علينا و يجعلها خالصة لوجهه الكريم .
اليوم سنتناول درس جديد و موضوع حصري -| نسأل الله لكم التوفيق |- .
هاذا الموضوع ليس للمبتدأ نوع ما فهاته المرحة بحاجة الى الإلمام بمتطلبات و أساسيات لغات البرمجة . سنحاول التبسيط قدر المستطاع حتى نوفر لكم موضوع فريد من نوعه كما عودناكم . فأهلا مرة أخرى إلى بوابت الإحتراف .
هاذه المادة التعليمية مخصصة لـ:
- لكل من يريد تحويل ملف html الى blogger بلوجر.
- لكل من يريد تصميم و تطوير قوالب بلوجر بإحتراف.
قبل 04 سنوات من اليوم كنت ابحث عن مقالة مماثلة تساعدني على الأقل في معرفة الأمور اللازمة لبلوغ حلمي و هو خلق قالب بلوجر ولو بسيط يكون من إنتاجي و تصميمي الخاص . و كنت سأصبح فخورة بذلك . لكن المحتوى العربي الذي تشمأز منه الأنفس و هو عبارة عن نسخ لصق .
نأخذ مثال : مثلا مدونة تطرح قالب بلوجر خام | جاهز للبدأ | لكن صاحب المدونة لا يفقه حتى في طريقة التعديل و التركيب . و هاذا ما صعب الأمر كثير . جعلني هاذا الأمر أتخر قرابة 04 أشهر من أجل التمكن من اللغة الأنجليزية و الإنتقال بحلمي وراء البحار . لا يمكنني وصف شعوري و أنا أسبح في المواقع الأجنية | الإتقان - التخصص - العمل بالضمير | .
المحتوى العربي الأغلبية مواقعهم عبارة عن إختصار روابط إعلانات - تفاهات .
المحتوى العربي الأغلبية مواقعهم عبارة عن إختصار روابط إعلانات - تفاهات .
تصميم قالب بلوجر :
إذا كنت تنتضر وجود برنامج من نوع ما يقوم بتصميم الفوالب و التعديل عليها بضغطة زر ، فهاذا أمر رائع، لكن الأمور لا تسير على هاذا الشكل فتصميم أو تحويل ملف html الى ملف قالب على هيأت xml بحاجة إلى مجموعة من الطرق سنتطرق لها واحدة واحدة .
في بداياتي كان التصميم بالنسبة لي على شكل إضافات و تحسينات بالإضافة إلى القليل من التأثيرات و الملحقات . يمكنك الإطلاع عليها جميعا . لكن أنت بحاجة غلى المزيد لتقوي مهاراتك.
لذلك يجب معرفة كيف تسير و طبيعة عمل هاته اللغات | الجافا و html و css | هاته اللغات كافية كبداية .
تحويل ملف و صفحة html إلى xml | قوالب بلوجر خلال دقائق:
المتطلبات:
- لغة html | ضرورية |
- لغة css | ضرورية |
- لفة xml | إختيارية |
- لغة الجافا js | إختيارية |
- أيضا Responsive Framework | إختياري |
- برنامج Notepad++ | إختياري |
بلوجر يدعم ملف و لغة واحد xml لذلك أنت بحاجة إلى تغير إسم الملف من html إلى xml و ذلك لتسهيل رفعه إن شئت ، أو يمكنك نسخه مباشرة إلى الصفحة .
لا تقلك سيصبح الأمر أكثر سهولة . لأن أغلب الأكواد سيتم إضافتها تلقائيا من طرب بلوجر فهاذا ما يسهل علينا المهم ، لذلك كنت سريع و أنت تبرمج .
إفتح ممحرر الأكواد الخاص بك و إنسخل داخله أكواد html الخاصة بك ، و إحفظه بالإسم الذي تريد لكن لا تنسى .xml في الأخير.
كن ذكي و ركز خلال نسخ الأكواد التالية :
إحذف جميل الأكواد الموجودة داخل <head> و إستبدلها بالكود التالي:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html><html class='no-js' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'> <!--<![endif]-->
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
في نهاية </head> ضع الكود التالي
<b:skin><![CDATA[
/**ضع جميع أكواد css الخاصة بك هنا**/
]]></b:skin>
و الآن جب علينا تخصيص جسم العرض الخاص بالقالب من الرأس إلى قسم تذييل الصفحة. و إلا لن يم عرضه تلقائيا لذلك نحن بحاجة إلى إضافة ما يساعك على العرص التلقائي دون تدخل منا .
لإنشاء قسم أنت بحاجة إلى إضافة هاذا الكود البسيط
<b:section></b:section>
يجب قبل ذلك التعرف على الفرق بين الأقسام و الإضافات :
القسم هو النطاق أو المنطقة حيث يمكن وضع عنصر واجهة مستخدم أو أكثر. لإضافة عنصر واجهة مستخدم نحتاج إلى عدم إضافة رمز ، نحتاج إلى إضافة قسم فقط. يبدوا أن الأمر مفهوم .لإنشاء قسم أنت بحاجة إلى إضافة هاذا الكود البسيط
<b:section></b:section>
لكنه ليس كافي أنت بحاجة إلى إضافة class و id و عدد الإضافات و غيرها
شاهد المثال التالي :
<b:section class='section_name' id='section_name' maxwidgets='1' showaddelement='yes'></b:section>
يجب التنويه ألى أنه يجب عليك إضافة مكان الإسم والشهار الخاص بالموقع في مكان header يمكنك مشاهدة المثال التالي :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='' type='Header'></b:widget></b:section>
يبقى إضافة main و هو مكان عرض المواضيع
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'>
</b:widget></b:section>
الشريط الجانبي: ضع الكود التالي داخل الجزء الخاص به كما ذكرنا سابقا .
<b:section class='sidebar' id='sidebar' preferred='yes'></b:section>
تذييل الصفحة : الشريط الجانبي FOOTER
<b:section class='footer' id='footer' preferred='yes'></b:section>
إذا أردت إضافة المزيد ! نعم بكل بساطة يمكنك ذلك .
يرجي التنهيو إلى أن هاته الأمور غير كافية أنت بحاجة إلى :
يرجي التنهيو إلى أن هاته الأمور غير كافية أنت بحاجة إلى :
- تخصيص CSS
- تخصيص Meta تاج
- تخصيص Schema.
- تخصيص التصميم الديناميكي الخاص بعرض البيانات | أضن أنه سيكون مرفق داخل html الخاص بك |
موضوع مُفيد ومهم اخي عصام مدونتك إحدى المدونات القلائل التي يستفاد منها المدون حقيقه وليس إطراء بوركت على مجهودك.
ردحذفشكرا لك أخ خالد
حذفونأمل أن نكون عند حسن الظن دائما
مدونة تستحق المتابعة والله❤️💝 إذا عرفت أن أنزل فيديو قريبا سوف اعمل لك اعلان💗💖
ردحذفمرورك يكفينا صديقي 💙
حذفياربت دورة مفصلة عن تصميم قوالب بلوجر
ردحذفقريبا ان شاء الله صديقي
حذفممكن مصدر تعلمك الانجليزي
ردحذفمرحبا بك أخ محمد
حذفكنت أشاهد الأفلام كثيرا من زمان
ثم أخذت بعض الكورسات
شكرا اخي
حذفممكن سكربت تفعيل القالب عبر الid
انت الافضل اخ عصام
ردحذفدروسك غاية في الروعة
اتمنى منك ان تعطينا شرح تصميم قالب عصري بسيط