دورة تصميم ستايلات بلوجر
الادلة
الدرس 5 : تصميم فوتر مدونة جميل | دورة تصميم ستايلات بلوجر
10:22 ص | مرسلة بواسطة
العربي |
8
التعليقات
8
التعليقات
السلام عليكم و رحمة الله، بعد انقطاع طويل في دورة تصميم ستايلات بلوجر
و ذلك لظروف عائلية، اليوم نواصل، و بعد درس تصميم سايد بار جميل ننتقل اليوم الى
تصميم فوتر مدونة احترافي و نضع فيه اشياء جميلة و تزيد المدونة ابداعا و احترافية.
يمكنك ان تترك فوتر مدونة كما هو و تضع فيه بعض الادوات الجميلة، لكن في هذا الدرس
سنقوم بصنع فوتر بـ 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>
-) لرؤية مثال حي عن الدرس:مدونة تجارب نووية
-)لتحميل الستايل في هذه المرحلة:من هنــــا
ارجو ان تستفيدوا من هذا الدرس، و اعذروني في هذه الفترة و ادعولي
و ان شاء نواصل، بارك الله فيكم.
و ذلك لظروف عائلية، اليوم نواصل، و بعد درس تصميم سايد بار جميل ننتقل اليوم الى
تصميم فوتر مدونة احترافي و نضع فيه اشياء جميلة و تزيد المدونة ابداعا و احترافية.
يمكنك ان تترك فوتر مدونة كما هو و تضع فيه بعض الادوات الجميلة، لكن في هذا الدرس
سنقوم بصنع فوتر بـ 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>
-) لرؤية مثال حي عن الدرس:مدونة تجارب نووية
-)لتحميل الستايل في هذه المرحلة:من هنــــا
ارجو ان تستفيدوا من هذا الدرس، و اعذروني في هذه الفترة و ادعولي
و ان شاء نواصل، بارك الله فيكم.
التسميات:
الاشتراك في:
الرسائل (Atom)