تعلم كيف تصمم قالب مدونتك بسهولة 2015

تعلم تصميم قالب بلوجر الدرس الثاني

انشاء header و  menu bar

السلام عليكم اخوتي الكرام 

بعدما قمنا في الدرس السابق بدراسة المكونات الاساسية لأي قالب و انشانا الاكواد الاساسية اليوم ان شاء الله تعالى سنقوم بانشاء جزئين  وهما الهيدر header و
 مينيو بار menu bar و قبل ذالك هناك بعض اكواد ال cssالضرورية التي يجب علينا ادراجها لكي  تاخذ  أجزاء وادوات القالب هذه القيم في حال لم نقم بتخصيصها
- أعرف أن الامر يبدوا معقدا لمرة الاولى لكن بعدما نواصل الدروس سوف تعتاد عليها و يكون في مقدورك ان تعملها لوحدك دون اي مساعدة فما عليك سوى التركيز و متابعة الدوس و العمل عليها وذالك بتطبيق كل ما تقراه .

- ملاحظة هامة :

لقد قمت بانشاء ملف كامل و وضعت فيه كل اكواد ال css الأساسية فما عليك سوى ان تحمله من الرابط التالي :

تحميل ملف ال css

هنا

بعدما تقوم بتحميل الملف  تقوم بالذهاب الى المدونة التجريبية ثم الذهاب الى قالب ثم الى تحرير html وبعدها تقوم بمسح الاكواد الموجودة ثم تقوم بعملية نسخ الملف الذي حملته و تلصقه وتقوم بعملية الحفظ و تذهب الى عرض المدونة و ستحصل على صفحة و بها خلفية سوداء فاتحة

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

ام الان فساشرح لك الكواد الموجودة في القالب و بعدها نكمل الدرس:

اكواد ال cssيتم وضعها داخل الوسم 

<b:skin><![CDATA[   تضع هنا ال css          ]]></b:skin>

-----------------------------------------------

Blogger Template Style

Name:  

Designer: bouyardane

URL: /*تضع عنوان المدونة */

----------------------------------------------- */

هذه الاكواد تشير الى معلومات عنك اي تضع اسمك و عنوان مدونتك

اما فيما يخص باقي الاكواد فهي قيم افتراضية تكون في اي قالب تحدها لتاخذ بها ادوات القالب اي انك تقوم بتحديد نوع الخط الذي تظهر به الكتابة في الدونة والخلفية الافتراضية لمكونات المدونة وغيرها من تنسيقات القالب لكي تتحكم في الادوات والعناصر الخاصة بالمدونة 

مما يتكون اي قالب ؟

اخي الكريم يجب ان تعلم ان المحتويات الخاصة باي قالب هي عبارة عن صناديق و هو الاصر الذي سوف نعمل عليه بكثرة

وسم الصندوق هو كالاتي

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='' locked='true' title='' type='Header'></b:widget>

</b:section>

   

---