العبور: كيف تصمم فوتر footer

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

1 - صورة من قائمة ( عناصر الصفحة ) قبل عمل الخانات في الفوتر المدونة :

اضغط الصورة لتكبر

2 - صور بعد عمل الخانات في فوتر ( footer ) للمدونة ( من جهة لوحة التحكم وايضا من جهة المدونة ) :

اضغط الصورة لتكبر

الآن وبعد معرفتك للمثال وما المقصود بفوتر footer المدونة نبداء بشرح خطوات عمل الخانات الثلاث في فوتر المدونة :

1 - قم بحفظ نسخة احتياطية لستايل المدونة لتتجنب اي مشاكل قد تحصل لا سمح الله وايضا اذا كانت عندك ادوات قمت باظافتهم من سابق في فوتر مدونتك قم بنقلهم الى العمود الجانبي ( side bar ) للمدونة .

2 - من لوحة التحكم اذهب الى قائمة ( التخطيط ) ثم الى ( تحرير HTML ) وابحث ( Ctrl +f ) عن الكود التالي :

]]>

ثم قم باضافة الكود التالي فوقه مباشرة :

#footer-columns {

border-top:1px solid #999999;

clear:both;

margin:0 auto;

background: #ffffff;

}

#footer-columns h2 {

margin: 1.6em 0 .5em;

font: bold 16px Arial;

padding:10px;

background: #ffffff url(http://img159.imageshack.us/img159/9099/toolbg.jpg) no-repeat center right;

color: #9b2d15;

}

.column1 {

padding: 0px 5px 3px 5px;

width: 30%;

float: left;

margin:3px;

text-align: right;

}

.column2 {

padding: 0px 5px 3px 5px;

width: 31%;

float: left;

margin:3px 3px 3px 5px;

text-align: right;

}

.column3 {

padding: 0px 5px 3px 5px;

width: 30%;

float: right;

margin:3px;

text-align: right;

}

.addwidget {

padding: 0 0 0 0;

}

#footer-columns ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

#footer-columns li {

margin:0;

padding-top:0;

padding-left:0;

padding-bottom:.25em;

padding-right:15px;

text-indent:-15px;

line-height:1.5em;

}

body#layout #footer-columns {

width: 100%;

margin-left: auto;

margin-right: auto;

}

body#layout .column1 {

width: 32%;

float: left;

}

body#layout .column2 {

width: 32%;

float: left;

}

body#layout .column3 {

width: 32%;

float: right;

}

* السطر الذي باللون الاحمر في الكود اعلاه هو ستايل خلفية عنوان الادوات التي ستضعها في الفوتر ، غير فيه اذا حبيت ستايل آخر او اتركه على ما هو عليه في الكود . ثم قم بالضغط على زر حفظ القالب والى هنا انتهيا من وضع ستايل الخانات الثلاث .

3 - قم بالبحث ( Ctrl + F ) عن الكود هذا في مدونتك :

ثم استبدله بالكود التالي :

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

ب ) كيفية وضع قائمة وصلات مفيدة للزوار اسفل المدونة :

في اسفل المدونة الالكترونية من الافضل ان يجد الزائر مجموعة وصلات تفيده في التعرف اكثر على المدونة، مثل وصلة اتصل بنا، و خلاصة RSS والصفحة الرئيسية ... الخ . لذا سنضع الان مجموعة وصلات جميلة اسفل المدونة.

* من قائمة تخطيط ثم عناصر الصفحة اضغط على اضافة اداة ثم قم باختيار اداة HTML / javascript. انظر الصورة التالية :