سلسلة تحديث قالب المدونة: عمل ثلاثة أعمدة للفوتر

سلسلة تحديث قالب المدونة: عمل ثلاثة أعمدة للفوتر

ربما لاحظنا في الآونة الأخيرة العديد من المدونات ذات ثلاثة أعمدة للذيل ويعد هذا التصميم شائعا هذه الأيام مما يخدمك في إضافة إعلانات أدسنس أو... 9:03:00 م

ربما لاحظنا في الآونة الأخيرة العديد من المدونات ذات ثلاثة أعمدة للذيل ويعد هذا التصميم شائعا هذه الأيام مما يخدمك في إضافة إعلانات أدسنس أو ربما آخر التعليقات وآخر المقالات لسهولة وصول الزائر لتحديثات الموقع .
وتعد طريقة عمل ثلاث أعمدة للذيل من أسهل ما يكون وبخطوات بسيطة وسهلة نوجزها في الآتي :

أولا وقبل أي شيء نوصى بعمل نسخة احتياطية من القالب الحالي مثلما تعلمنا سابقا .

ثانيا : ابحث عن الكود التالي عن طريق مفتاحي "ctrl+f" :

<div id=’footer-wrapper’>

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

</div>

استبدل الكود باللون الأزرق بالكود التالي :

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/> </p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

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

</div>

والآن ابحث عن الكود التالي لإضافة ستايل الفوتر الجديد :

]]> < /b:skin>

ثم أضف قبلة هذا الكود :

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;

}

ثم اضغط على "Save Template" وبعدها اذهب الى "Page Elements" لترى جزء الفوتر او الذيل مقسم إلى ثلاثة اعمدة لتضيف الية ما تريد ....
وبالتوفيق للجميع