Arab-Publishers Sur FaceBook

إعصار الزوار

إبحث في شبكة الإنترنت


بحث مخصص

كتاب زورو في رياضيات الربح من أدسنس

زورو في رياضيات الربح

دورة تصميم ستايلات بلوجر

دورة تصميم ستايلات بلوجر

T'chat

أدلة مدونات

اربط موقعك بمدونة الناشرون العرب

انسخ هذا الكود و الصقه في موقعك او مدونتك:

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

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

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


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

سنقوم بصنع فوتر بـ 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>


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

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


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

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

28 تعليقات:

سارة العطار

الجمعة, يوليو 31, 2009

يقول...

اولا اتمنى ان تكون بخير وان تكون الفترة الماضية قد مضتت على خير وان تتحسن احوالك العائلية
ثانيا احب اشرك على تعريفنا كيف نضيف ادوات جديدة اسفل القالب فهذا رائع
لكن هلا تحدثنا فى الموضوع القادم كيف وضعت خدمة اخر المقالات واخر التعليقات وخدمة تابعنى عبر تويتر وهكذا
ومنتظرين جديدك دائما


عالم عجيب

الأحد, أغسطس 02, 2009

يقول...

أخي السلام عليكم و رخمة الله ممكن يا أخي أن تزكرنا بطريقة نزع الشريط الذي هو في أعلى المدونة القنبلة النووية
شكرا لك غلى الدس الجميل أخوك عجيب


Souhail Omar

الاثنين, أغسطس 03, 2009

يقول...

الاخت سارا//
ان شاء الله.
الاخ عجيب//
ادخل الى تحرير HTLM
و ابحث عن الكود التالي:

<b:skin><![CDATA[/*


و اضف الكود التالي تحته،،

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

و بالتوفيق.


سارة العطار

الاثنين, أغسطس 03, 2009

يقول...

انا وضعت الكود الاول فوق b:skin والحمد لله ثم حفظت القالب
اما الكود التانى الذى يوضع بدلا من هذا الكود
sefooter
كل ما اضعه يعطينى رسالة خطأ "لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح. "


Zakariae

الخميس, أغسطس 06, 2009

يقول...

اخي الكريم Best Max ادا سمحت اطلب منك ان تضع لي رابط تحميل ستايل مدونة تجارب نووية كاملة فقد أعجبتني كثيرا


Souhail Omar

الخميس, أغسطس 06, 2009

يقول...

هذا هو الستايل مثل ما هو موجود:
تفضل:
http://www.megaupload.com/?d=KD0TP95Y

تحياتي لك


Zakariae

الجمعة, أغسطس 07, 2009

يقول...

شكرا جزيلا اخي الكريم الله يخليك


MEZOMASR

الأحد, أغسطس 09, 2009

يقول...

مشكور أخي الفاضل على هذا الموضوع الأكثر من رائع
وأقدر المجهود الكبير الذي قمت به

لكن لدي أستفسار صغير بعد أذنك (كيف يمكنك أظهار جزء من لغة HTML داخل صفحات مدونتك لكي يراها الزوار ؟)

أرجو منك الأجابة على السؤال وأكون عاجز عن الشكر
أخوك في الله محمود


Souhail Omar

الاثنين, أغسطس 10, 2009

يقول...

الاخ MEZOMASR//

اكتب الكود الذي تريد، و بعد ذلك انسخه
و الصقه هنا:
http://centricle.com/tools/html-entities/

و اضغط على: encode

و بعد ذلك يظهر لك الكود بشكل معدل.
قم بنسخه و ضعه في الموضوع الذي تريد في مدونتك.
و ثم انشر الموضوع.

و سيظهر الكود عادي جدا بان الله

تقبل تحياتي.


MEZOMASR

الثلاثاء, أغسطس 11, 2009

يقول...

ألف ألف ألف شكر أخي الكريم Best Max وربنا يكرمك ويعطيك المذيد والمذيد أن شاء الله أنت شخص فعلا لا يوجد مثلك وأنا فعلا أقدر مجهودك الكبير في حل مشاكلي وبأذن الله أقدر أرد جميلك ده

لدي سؤال آخر كنت مكسوف أقوله لك لأنه يعتبر فضول مني لكن حبيت أتحدث معك شوية لأني أعلم أنك سوف تفيدني فيجب على أن أستغل الفرصة الجميله دي

والسؤال هو : كيف يمكنك وضع هذا الجزء من كود HTML في صندوق منفصل عن الموضوع؟

مش عارف أقول لك أيه

شكرا جزيرا


Zakariae

الثلاثاء, أغسطس 11, 2009

يقول...

اخي العزيز Best Max لي سؤال إذا سمحت كيف أزيل navbar كما فعلت انت في http://arab-publishers.blogspot.com و شكر أخي الكريم


Souhail Omar

الأحد, أغسطس 16, 2009

يقول...

الاخ MEZOMASR //
يتم وضع الاطار عن طريق CSS بكل بساطة.
و كل ما عليك هو ان تضع الكود بداخل خلية و اعط الخلية الكود اي تنسيق تريد.

و اذا اردت المزيد من التفصيل انا ممكن اشرح لك بالتفصيل في موضوع منفصل، اخبرني و لا تقلق.

الاخ زكرياء //

لازالته بكل بساطة،،

ادخل الى تحرير HTML
ابحث عن:

body {

و اضف قبله:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

و اي مشكلة اخبرني.

تقبلا تحياتي


MEZOMASR

الأحد, أغسطس 16, 2009

يقول...

جزاك الله كل خير على الرد لكن للأسف لم أستطيع أن أفهم الخطوات فأرجوا بعد أذنك أن تشرح لي بلتفصيل وأنا أسف أن كنت سوف أتعبك معي
وشكرا جزيرا لك
وأتمنى لك التوفيق


Souhail Omar

الأحد, أغسطس 16, 2009

يقول...

ان شاء الله، سأخصص جزء من وقتي لاشرح لك الفكرة بالتفصيل.
ابشر و بالتوفيق لك كذلك.


MEZOMASR

الاثنين, أغسطس 17, 2009

يقول...

شكرا أخي الفاضل وأنا في أنتظارك وربنا يوفقك في الشرح أن شاء الله
عندي سؤال صغير كيف يمكنني أن أضع صوره برابط إلى مقال من مقالات مدونتي في السايد بار ؟
وشكرا جزيرا لسماعك أسئلتي
وكل عام وأنت بخير بمناسبة قرب شهر رمضان الكريم


Zakariae

الاثنين, أغسطس 17, 2009

يقول...

شكرا جزيلا اخي الكريم الله يخليك


Zakariae

السبت, أغسطس 22, 2009

يقول...

اخي الكريم Best Max ادا سمحت اطلب منك طريقة وضع ادسنس داخل المقال بدون فاصل كبير بين المقال والاعلان وكل عام وأنت بخير بمناسبة شهر رمضان الكريم


فتح الله

الأحد, سبتمبر 06, 2009

يقول...

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


فتح الله

الاثنين, سبتمبر 07, 2009

يقول...

اين انت Best Max ان شاء الله غيابك في خير


sonicasa

الثلاثاء, سبتمبر 08, 2009

يقول...

طبعا شكرا على الشرح الرائع جدا
بس كان ليا سوال ازاى اقدر اتحكم فى منطقه المواضيع يعنى انا كنت عايز المواضيع تنزل جنب بعض ومش تحت بعض يعنى اضيف اعمده لمنطه المواضيع ؟

وازاى اغير الخلفيه الاساسيه للمدونه السوداء ؟
وشكرا


محمد مهنى

الاثنين, سبتمبر 28, 2009

يقول...

للأسف اخى اعطانى ايرور


™SaRa

الثلاثاء, أكتوبر 13, 2009

يقول...

السلام عليكم
جزاك الله خيرا
بس انا كمان اداني غلط ممكن تقولنا الحل ايه
شكرااااااااااا


فتح الله

الأحد, أكتوبر 18, 2009

يقول...

حاولو ان تحذفو الوسم / من الكود الاخير الدي استبدلتوه وهو يوجد في اخر سطر

وانا شخصيا نجحت معي هذه الطريقة لكن المشكلة في هذه الاضافة ان لونها ابيض ولا يناسب لون المدونة
رابط المدونة : http://asirdabe.blogspot.com/
رابط مدونة التي جربت عليها من هنـا:
http://iktebar.blogspot.com/


فتح الله

الخميس, أكتوبر 22, 2009

يقول...

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


بوحمد

الجمعة, فبراير 05, 2010

يقول...

سلام عليكم ورحمة الله وبركاته
اخي الكريم الفلتر لم ينقسم عمودي لا كنه انقسم افقي


جنرال

الثلاثاء, مارس 09, 2010

يقول...

السلام عليكم
الثلاثة خانات ظهروا فوق بعض ما الحل ؟؟


Souhail Omar

السبت, مارس 13, 2010

يقول...

الاخ السرداب //
اعذرني، انا فعلا خجلان لانني نسيت الاجابة على التعليقات،
و فعلا اانا اوافق عليها، و ااوخر الاجابة لظرورف.
ارجو ان تكون قد حللت المشكلة الآن.
و بالتوفيق و لا تزعل.

الاخ جنرال//
اذا ظهرت الخانات فوق بعض هذا يعني ان الخانة الرئيسية لم تتسع لهم، لذا حاول تقليص حجمهم او زد في عرض الغلاف الخارجي.
و بالتوفيق.


3bdul rahman

الاثنين, مايو 24, 2010

يقول...

السلام عليكم
الأخ ماكس .. أولا هذي أول مشاركة لي .. ثانيا مدونتي (المتواضعة)تحتاج إلى تغيير جذري ...
ثالثا .. العبارة التي أردت منا البحث عها غير صحيحة (لا وجود للعبارة) أو أن المتصفح مضرووب وسلامتك ^_^


إرسال تعليق