كيف تصمم فوتر ( Footer ) جميل بثلاث خانات اسفل مدونة بلوجر ؟

قراءة للموضوع

بسم الله الرحمن الرحيم اخواني الاعزاء بعد شرح طريقة اضافة شريط آخر مواضيع ( مقالات ) في مدونة بلوجر اليوم نبداء بموضوع آخر وهو كيفية تصميم فوتر ( footer ) لمدونة بلوجر بثلاث خانات اسفل المدونة ثم نقوم بوضع اشياء جميلة فيه لنجعل المدونة ابداعية واحترافية نوعا ما ، طيب قبل ان نبداء بشرح الخطوات النظر مثال بالصور التالية لكي تعرف فوتر ( footer ) المدونة :

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

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

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

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

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

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

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

]]></b:skin>
</head>

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

#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 ) عن الكود هذا في مدونتك :

<b:section class='footer' id='footer'/>

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

<div id='footer-columns'>

<div class='column1'>

<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>

</b:section>

</div>

<div class='column2'>

<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>

</b:section>

</div>

<div class='column3'>

<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>

</b:section>

</div>

<div style='clear:both;'/>

</div>

<b:section class='footer' id='footer'/>

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

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

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

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






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

<center><a href="http://arab-editors.blogspot.com">الصفحة الرئيسية</a> |

<a href="http://arab-editors.blogspot.com/rss.xml">خلاصة RSS</a> |

<a href="arab-editors.blogspot.com/2009/10/blog-post_23.html">اتصل بنا</a> |

<a href="about us link">عن المدونة</a> |

<a href="privacy link">privacy</a></center>

* العنوان الذي باللون الاحمر في الكود أعلاه هو عنوان مدونة ( المحررون العرب ) أستبدله الى عنوان مدونتك .

أرجو ان تستفيدوا من هذا الدرس وأي استفسار او سؤال نحن نرحب بتعليقاتكم عليه ،،،،