أقسام المدونة
- أخبار و منوعات
- ادارة المنتديات
- ادارة المواقع Site management
- ادوات و برامج
- البنوك الإلكترونية E-Banks
- التدوين و المدونات Blogger
- الربح من المدونات Blog Money
- المفضلات الجماعية Social Sites
- بيدفرتايزر Bidvertiser
- تحسين نتائج البحث SEO
- تقنيات جلب الزوار Traffic
- تويتر Twitter
- جوجل أدسنس AdSense
- جوجل ادوردز Google Adwords
- دورة تصميم ستايلات بلوجر
- صباح الخير أدسنس
- عروض الاستضافة و الدومينات Domain Names
- فرص للربح من الإنترنت
- قسم أسئلة الزوار Questions
- لقاءات و حوار Publishers Talk
- مواقع تحت الضوء
أرشيف مواضيع المدونة
أدلة مدونات
أضف موقعك إلينا
انسخ هذا الكود و الصقه في موقعك او
مدونتك:
www.adsense-pub.blogspot.com. يتم التشغيل بواسطة Blogger.
الادلة
الدرس 5 : تصميم فوتر مدونة جميل | دورة تصميم ستايلات بلوجر
10:22 ص | مرسلة بواسطة
العربي |
السلام عليكم و رحمة الله، بعد انقطاع طويل في دورة تصميم ستايلات بلوجر
و ذلك لظروف عائلية، اليوم نواصل، و بعد درس تصميم سايد بار جميل ننتقل اليوم الى
تصميم فوتر مدونة احترافي و نضع فيه اشياء جميلة و تزيد المدونة ابداعا و احترافية.
يمكنك ان تترك فوتر مدونة كما هو و تضع فيه بعض الادوات الجميلة، لكن في هذا الدرس
سنقوم بصنع فوتر بـ 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)
8 التعليقات:
6 أغسطس 2009 في 11:47 ص
يقول...اخي الكريم Best Max ادا سمحت اطلب منك ان تضع لي رابط تحميل ستايل مدونة تجارب نووية كاملة فقد أعجبتني كثيرا
7 أغسطس 2009 في 2:40 م
يقول...شكرا جزيلا اخي الكريم الله يخليك
17 أغسطس 2009 في 3:41 م
يقول...شكرا جزيلا اخي الكريم الله يخليك
22 أغسطس 2009 في 9:34 ص
يقول...اخي الكريم Best Max ادا سمحت اطلب منك طريقة وضع ادسنس داخل المقال بدون فاصل كبير بين المقال والاعلان وكل عام وأنت بخير بمناسبة شهر رمضان الكريم
7 سبتمبر 2009 في 3:42 م
يقول...اين انت Best Max ان شاء الله غيابك في خير
27 سبتمبر 2009 في 11:06 م
يقول...للأسف اخى اعطانى ايرور
22 أكتوبر 2009 في 10:30 ص
يقول...كيف يا صاحب المدونة توافق على نشر التعليقات ولا ترد عليها على الاقل قل لنا لا اعرف اجابة على استفساراتكم لكي نتوقف على ازعاجك بتعليقاتنا
8 مارس 2010 في 10:05 م
يقول...السلام عليكم
الثلاثة خانات ظهروا فوق بعض ما الحل ؟؟
إرسال تعليق