شرح عمل قائمة اقسام منسدلة CSS3

السلام عليكم ورحمه الله وبركاته

انهاردة هنشرح برنامج جميل و مفيد لأصحاب المدونات لعمل قائمة في اعلي المدونة نضع بها اقسام المدونة بتقنية CSS3

الآن وجدت برنامج سهل جدا في التعامل وبه قوائم مجانية سوف نستعملها لعمل القوائم كما فى الصورة التاليه ---->
         


البرنامج اسمة

css3menu

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



هنختار الشكل في اليمين اسمة blue لأنه لا يحتوي علي صور ولا يتعبنا في عمل القوائم

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

نضغط عليPublish
ونحفظ العمل باي اسم

سوف يظهر عندنا ملفين هما:
1/ ملف ذو الامتدادhtml سوف نفتحة بكليك يمين علية ونفتحة باختيار notepad
وناخذ مافية Copy ونضعة في اداة
عن طريق الذهاب الي تصميم ثم عناصر الصفحة ثم اضافة اداة بلغة html/javascript

ونضعها تحت الهيدر مباشرة او فوقه حسب ما تريد

2/ الملف الثاني سوف يحتوي علي style.css



نفتحة ايضا بالنوت بادnotepad

ونضع الكود كاتالي:



نذهب الي تصميم ثم مصمم النماذج



ثم نختار ((متقدم))

ونذهب لاخر اختيار ونضع كود الcss

ونحفظ القالب

ثم نذهب الي المدونة سوف نجد القائمة قد تمت بالفعل وظهرت

لتحميل البرنامج

اضغك هنا
http://css3menu.com/css3menu-setup.zip

ثم ضع اسمك وايميلك..سوف يبدأ التحميل

حجم البرنامج حوالى 19 ميجا

الى هنا ينتهى شرحنا

اتمني ان اكون قد وفقت في شرحه

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

شرح اضافة اداة اسفل الهيدر

السلام عليكم و رحمة الله و بركاته درسنا اليوم هو اضافة اداة اسفل الهيدر فى المدونة 

احنا عارفين ان اغلبنا بيعتمد على قوالب جاهزة و معظم هذه القوالب لم تكن بها اداة اسفل الهيدر لذلك 

عملت الدرس ده عشان نضع اداة اسفل هيدر المدونة و عمل ذلك نتبع الآتى :-
               
اولا :- 
 نذهب الى تصميم ثم تحرير HTML
نأخذ نسخة احتياطية من القالب( تحسبا لوقوع اى اخطاء)
ثم نضغط علي ctrl+f 
ونبحث عن الكود التالي

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title=Your Blog 
Title(Header)' type='Header'/>
</b:section>
</div>

ثم نضيف الكود التالي تحت هذا الكود

<!-- New widgets container Start -->
<b:section class='NewContainer' id='NewContainer'/>
<!-- New widgets container End -->

ثم احفظ القالب
سوف تجد (اضافة اداة) ظهرت تحت الهيدر