الدرس 5 : تصميم فوتر مدونة جميل | دورة تصميم ستايلات بلوجر

السلام عليكم و رحمة الله، بعد انقطاع طويل في دورة تصميم ستايلات بلوجر

و ذلك لظروف عائلية، اليوم نواصل، و بعد درس تصميم سايد بار جميل ننتقل اليوم الى

تصميم فوتر مدونة احترافي و نضع فيه اشياء جميلة و تزيد المدونة ابداعا و احترافية.


يمكنك ان تترك فوتر مدونة كما هو و تضع فيه بعض الادوات الجميلة، لكن في هذا الدرس

سنقوم بصنع فوتر بـ 3 خانات مثل ما هو موجود في مدونة الناشرون العرب.


1) صنع فوتر بثلاث خانات:





- اولا خذ نسخة احتياطية من ستايل المدونة حتى نتجنب الكوارث باذن الله،

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


- بعد ذلك:

التخطيط >> تحرير HTML


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

]]></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;

}

السطر الملون هو ستايل خلفية عنوان الادوات التي ستضعها في الفوتر، غير فيه مثلما تشاء.

و قم بالحفظ،، و نحن الان انتهينا من وضع ستايل الخانات الثلاث.


بعد ذلك ابحث عن:

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

و بعد ذلك قم بالحفظ،،


انتقل الان الى عناصر الصفحة.

و ستجد ان شاء الله ثلاث خانات في الفوتر لتضع فيها ادواتك مثل ما يحلو لك.


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

في اسفل المدونة الالكترون في من الافضل ان يجد الزائر مجموعة وصلات تفيده في

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

لذا سنضع الان مجموعة وصلات جميلة اسفل المدونة.


ادخل الى التخطيط >> عناصر الصفحة

و اضف اداة HTML جديدة في الفوتر.





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

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

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

<a href="contact link or email">اتصل بنا</a> |

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

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

-) لرؤية مثال حي عن الدرس:مدونة تجارب نووية

-)لتحميل الستايل في هذه المرحلة:من هنــــا


ارجو ان تستفيدوا من هذا الدرس، و اعذروني في هذه الفترة و ادعولي

و ان شاء نواصل، بارك الله فيكم.