إبحث في شبكة الإنترنت
بحث مخصص
كتاب زورو في رياضيات الربح من أدسنس
دورة تصميم ستايلات بلوجر
السلام عليكم و رحمة الله، بعد انقطاع طويل في دورة تصميم ستايلات بلوجر
و ذلك لظروف عائلية، اليوم نواصل، و بعد درس تصميم سايد بار جميل ننتقل اليوم الى
تصميم فوتر مدونة احترافي و نضع فيه اشياء جميلة و تزيد المدونة ابداعا و احترافية.
يمكنك ان تترك فوتر مدونة كما هو و تضع فيه بعض الادوات الجميلة، لكن في هذا الدرس
سنقوم بصنع فوتر بـ 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)
28 تعليقات:
الجمعة, يوليو 31, 2009
يقول...اولا اتمنى ان تكون بخير وان تكون الفترة الماضية قد مضتت على خير وان تتحسن احوالك العائلية
ثانيا احب اشرك على تعريفنا كيف نضيف ادوات جديدة اسفل القالب فهذا رائع
لكن هلا تحدثنا فى الموضوع القادم كيف وضعت خدمة اخر المقالات واخر التعليقات وخدمة تابعنى عبر تويتر وهكذا
ومنتظرين جديدك دائما
الأحد, أغسطس 02, 2009
يقول...أخي السلام عليكم و رخمة الله ممكن يا أخي أن تزكرنا بطريقة نزع الشريط الذي هو في أعلى المدونة القنبلة النووية
شكرا لك غلى الدس الجميل أخوك عجيب
الاثنين, أغسطس 03, 2009
يقول...الاخت سارا//
ان شاء الله.
الاخ عجيب//
ادخل الى تحرير HTLM
و ابحث عن الكود التالي:
<b:skin><
يقول...انا وضعت الكود الاول فوق b:skin والحمد لله ثم حفظت القالب
اما الكود التانى الذى يوضع بدلا من هذا الكود
sefooter
كل ما اضعه يعطينى رسالة خطأ "لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح. "
الخميس, أغسطس 06, 2009
يقول...اخي الكريم Best Max ادا سمحت اطلب منك ان تضع لي رابط تحميل ستايل مدونة تجارب نووية كاملة فقد أعجبتني كثيرا
الخميس, أغسطس 06, 2009
يقول...هذا هو الستايل مثل ما هو موجود:
تفضل:
http://www.megaupload.com/?d=KD0TP95Y
تحياتي لك
الجمعة, أغسطس 07, 2009
يقول...شكرا جزيلا اخي الكريم الله يخليك
الأحد, أغسطس 09, 2009
يقول...مشكور أخي الفاضل على هذا الموضوع الأكثر من رائع
وأقدر المجهود الكبير الذي قمت به
لكن لدي أستفسار صغير بعد أذنك (كيف يمكنك أظهار جزء من لغة HTML داخل صفحات مدونتك لكي يراها الزوار ؟)
أرجو منك الأجابة على السؤال وأكون عاجز عن الشكر
أخوك في الله محمود
الاثنين, أغسطس 10, 2009
يقول...الاخ MEZOMASR//
اكتب الكود الذي تريد، و بعد ذلك انسخه
و الصقه هنا:
http://centricle.com/tools/html-entities/
و اضغط على: encode
و بعد ذلك يظهر لك الكود بشكل معدل.
قم بنسخه و ضعه في الموضوع الذي تريد في مدونتك.
و ثم انشر الموضوع.
و سيظهر الكود عادي جدا بان الله
تقبل تحياتي.
الثلاثاء, أغسطس 11, 2009
يقول...ألف ألف ألف شكر أخي الكريم Best Max وربنا يكرمك ويعطيك المذيد والمذيد أن شاء الله أنت شخص فعلا لا يوجد مثلك وأنا فعلا أقدر مجهودك الكبير في حل مشاكلي وبأذن الله أقدر أرد جميلك ده
لدي سؤال آخر كنت مكسوف أقوله لك لأنه يعتبر فضول مني لكن حبيت أتحدث معك شوية لأني أعلم أنك سوف تفيدني فيجب على أن أستغل الفرصة الجميله دي
والسؤال هو : كيف يمكنك وضع هذا الجزء من كود HTML في صندوق منفصل عن الموضوع؟
مش عارف أقول لك أيه
شكرا جزيرا
الثلاثاء, أغسطس 11, 2009
يقول...اخي العزيز Best Max لي سؤال إذا سمحت كيف أزيل navbar كما فعلت انت في http://arab-publishers.blogspot.com و شكر أخي الكريم
الأحد, أغسطس 16, 2009
يقول...الاخ MEZOMASR //
يتم وضع الاطار عن طريق CSS بكل بساطة.
و كل ما عليك هو ان تضع الكود بداخل خلية و اعط الخلية الكود اي تنسيق تريد.
و اذا اردت المزيد من التفصيل انا ممكن اشرح لك بالتفصيل في موضوع منفصل، اخبرني و لا تقلق.
الاخ زكرياء //
لازالته بكل بساطة،،
ادخل الى تحرير HTML
ابحث عن:
body {
و اضف قبله:
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
و اي مشكلة اخبرني.
تقبلا تحياتي
الأحد, أغسطس 16, 2009
يقول...جزاك الله كل خير على الرد لكن للأسف لم أستطيع أن أفهم الخطوات فأرجوا بعد أذنك أن تشرح لي بلتفصيل وأنا أسف أن كنت سوف أتعبك معي
وشكرا جزيرا لك
وأتمنى لك التوفيق
الأحد, أغسطس 16, 2009
يقول...ان شاء الله، سأخصص جزء من وقتي لاشرح لك الفكرة بالتفصيل.
ابشر و بالتوفيق لك كذلك.
الاثنين, أغسطس 17, 2009
يقول...شكرا أخي الفاضل وأنا في أنتظارك وربنا يوفقك في الشرح أن شاء الله
عندي سؤال صغير كيف يمكنني أن أضع صوره برابط إلى مقال من مقالات مدونتي في السايد بار ؟
وشكرا جزيرا لسماعك أسئلتي
وكل عام وأنت بخير بمناسبة قرب شهر رمضان الكريم
الاثنين, أغسطس 17, 2009
يقول...شكرا جزيلا اخي الكريم الله يخليك
السبت, أغسطس 22, 2009
يقول...اخي الكريم Best Max ادا سمحت اطلب منك طريقة وضع ادسنس داخل المقال بدون فاصل كبير بين المقال والاعلان وكل عام وأنت بخير بمناسبة شهر رمضان الكريم
الأحد, سبتمبر 06, 2009
يقول...السلام عليكم
اخي الكريم شكرا لك على الدرس الرائع وكنت ابحث عليه من زمان لكن للاسف لم يفلح معي ولايمكن حفظ القالب
كما اني لم اجد الكود الول كامل
وانا شكيت في القالب الاصلي للمدونة انو لايقبل مثل هذه الاضافة وارجو اذا عند حل اكرم علينا به
الاثنين, سبتمبر 07, 2009
يقول...اين انت Best Max ان شاء الله غيابك في خير
الثلاثاء, سبتمبر 08, 2009
يقول...طبعا شكرا على الشرح الرائع جدا
بس كان ليا سوال ازاى اقدر اتحكم فى منطقه المواضيع يعنى انا كنت عايز المواضيع تنزل جنب بعض ومش تحت بعض يعنى اضيف اعمده لمنطه المواضيع ؟
وازاى اغير الخلفيه الاساسيه للمدونه السوداء ؟
وشكرا
الاثنين, سبتمبر 28, 2009
يقول...للأسف اخى اعطانى ايرور
الثلاثاء, أكتوبر 13, 2009
يقول...السلام عليكم
جزاك الله خيرا
بس انا كمان اداني غلط ممكن تقولنا الحل ايه
شكرااااااااااا
الأحد, أكتوبر 18, 2009
يقول...حاولو ان تحذفو الوسم / من الكود الاخير الدي استبدلتوه وهو يوجد في اخر سطر
وانا شخصيا نجحت معي هذه الطريقة لكن المشكلة في هذه الاضافة ان لونها ابيض ولا يناسب لون المدونة
رابط المدونة : http://asirdabe.blogspot.com/
رابط مدونة التي جربت عليها من هنـا:
http://iktebar.blogspot.com/
الخميس, أكتوبر 22, 2009
يقول...كيف يا صاحب المدونة توافق على نشر التعليقات ولا ترد عليها على الاقل قل لنا لا اعرف اجابة على استفساراتكم لكي نتوقف على ازعاجك بتعليقاتنا
الجمعة, فبراير 05, 2010
يقول...سلام عليكم ورحمة الله وبركاته
اخي الكريم الفلتر لم ينقسم عمودي لا كنه انقسم افقي
الثلاثاء, مارس 09, 2010
يقول...السلام عليكم
الثلاثة خانات ظهروا فوق بعض ما الحل ؟؟
السبت, مارس 13, 2010
يقول...الاخ السرداب //
اعذرني، انا فعلا خجلان لانني نسيت الاجابة على التعليقات،
و فعلا اانا اوافق عليها، و ااوخر الاجابة لظرورف.
ارجو ان تكون قد حللت المشكلة الآن.
و بالتوفيق و لا تزعل.
الاخ جنرال//
اذا ظهرت الخانات فوق بعض هذا يعني ان الخانة الرئيسية لم تتسع لهم، لذا حاول تقليص حجمهم او زد في عرض الغلاف الخارجي.
و بالتوفيق.
الاثنين, مايو 24, 2010
يقول...السلام عليكم
الأخ ماكس .. أولا هذي أول مشاركة لي .. ثانيا مدونتي (المتواضعة)تحتاج إلى تغيير جذري ...
ثالثا .. العبارة التي أردت منا البحث عها غير صحيحة (لا وجود للعبارة) أو أن المتصفح مضرووب وسلامتك ^_^
إرسال تعليق