jamaa alhyane

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

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

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

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


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

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

المصدر




5 comments

comments
mester youness
المشرف
1 مارس 2012 11:29 م

موضوع جيد شكرا
يشرفنا ان تكون من متابعين
http://mastro-word.blogspot.com

رد
avatar
ALi EL Makhrout
المشرف
18 أبريل 2012 6:28 م

شكرا لك أخي أولا.
ثانيا، لم أجد هذا الكود :


!!!!
هل يوجد بديل ؟؟

رد
avatar
غير معرف
المشرف
27 سبتمبر 2012 11:45 ص

مفبيش اى حاجه حصلت لسه الصفحه زى ما هى
http://emugn5.blogspot.com/

رد
avatar
Wael Elyamani
المشرف
11 نوفمبر 2012 8:40 م

thanks
http://msr-news.blogspot.com/
http://egy-tvchannelsfree.blogspot.com/

رد
avatar
Wael Elyamani
المشرف
26 مايو 2014 12:37 ص

thanks too much
http://msr-hotnews.com

رد
avatar

أكتب تعليقك هنا وشاركنا برأيك .