تقسيم الفوتر الى ثلاثة خانات لمدونات بلوقر

تحت تسيمة: فوتر,فوتر البلوقر,تقسيم فوتر البلوقر,التحكم في فوتر البلوقر,تقسيم خانتان الى ثلاث لمدونات البلوقر

تقسيم الفوتر الى ثلاثة خانات

بسم الله الرحمن الرحيم والسلام عليكم ورحمة الله تعالى وبركاته  في هدا الدرس انشاء الله سنتعرف على طريقة تقسيم الفوتر الى ثلاث خانات نسبة الى بعض القوالب التي تحتوي على خانتين للفوتر فقط لا ن معضم قوالب المدونات تحتوي على على ثلاثة خانات مما يضفي الى المدونة بعض الرونقة وللحصول على قالب بثلاثة فوترات انصحك باتباع الخطوات التالية ,مع العلم ان الدرس سهل وليس معقدا وقد بسطته ليفهمه المبتدئ والخبير اتمنى ان اوفق في الشرح:

1.     اولا قبل كل شيء نأخد نسخة احتياطية للقالب واحفضها في حاسوبك

2.     وادا كان عندك ادوات في الفوتر انقلها الى السايدر بار  اسمح الله ان تفقدها

 "اضغط على الصورة لتظهر بالحجم الكبير"

·        ادهب الى تصميم تحرير Html

وابحث عن الكود التالي:

]]></b:skin>

واضف فوقه الكود التالي:

#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;

}

السطر الملون هو ستايل لخلفية الادوات التي ستضعها في الفوتر .

بعد دلك ابحث عن الكود التالي:

<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'/>

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

المصدر

مدونة عربي كاش² "عنوان الموضوع : صنع فوتر بثلاث خانت لمدونات بلوقر "