الثلاثاء، 29 ديسمبر 2009

كيف تصمم فوتر ( Footer ) جميل بثلاث خانات اسفل مدونة بلوجر ؟

قراءة للموضوع



بسم الله الرحمن الرحيم اخواني الاعزاء بعد شرح طريقة اضافة شريط آخر مواضيع ( مقالات ) في مدونة بلوجر اليوم نبداء بموضوع آخر وهو كيفية تصميم فوتر ( footer ) لمدونة بلوجر بثلاث خانات اسفل المدونة ثم نقوم بوضع اشياء جميلة فيه لنجعل المدونة ابداعية واحترافية نوعا ما ، طيب قبل ان نبداء بشرح الخطوات النظر مثال بالصور التالية لكي تعرف فوتر ( footer ) المدونة :

1 - صورة من قائمة ( عناصر الصفحة ) قبل عمل الخانات في الفوتر المدونة :

اضغط الصورة لتكبر


2 - صور بعد عمل الخانات في فوتر ( footer ) للمدونة ( من جهة لوحة التحكم وايظا من جهة المدونة ) :

اضغط الصورة لتكبر


الآن وبعد معرفتك للمثال وما المقصود بفوتر footer المدونة نبداء بشرح خطوات عمل الخانات الثلاث في فوتر المدونة :


1 - قم بحفظ نسخة احتياطية لستايل المدونة لتتجنب اي مشاكل قد تحصل لا سمح الله وايظاً اذا كانت عندك ادوات قمت باظافتهم من سابق في فوتر مدونتك قم بنقلهم الى العمود الجانبي ( side bar ) للمدونة .


2 - من لوحة التحكم اذهب الى قائمة ( التخطيط ) ثم الى ( تحرير HTML ) وابحث ( Ctrl +f ) عن الكود التالي :


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

}


* السطر الذي باللون الاحمر في الكود اعلاه هو ستايل خلفية عنوان الادوات التي ستضعها في الفوتر ، غير فيه اذا حبيت ستايل آخر او اتركه على ما هو عليه في الكود . ثم قم بالضغط على زر حفظ القالب والى هنا انتهيا من وضع ستايل الخانات الثلاث .


3 - قم بالبحث ( Ctrl + F ) عن الكود هذا في مدونتك :


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



ثم قم بعمل او الضغط على زر حفظ القالب ،، الى هنا انتهينا من تصميم الخانات في الفوتر . ثم انتقل الان الى عناصر الصفحة لتجد الخانات الثلاث ان شاء الله انظافن مباشرة وضع فيهم ما تشاء من الادوات ومبرووووووووك عليك تصميم فوتر footer جميل .

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

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


* من قائمة تخطيط ثم عناصر الصفحة اضغط على اضافة اداة ثم قم باختيار اداة HTML / javascript. انظر الصورة التالية :






ثم قم باضافة الكود التالي بداخلها :



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

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

<a href="arab-editors.blogspot.com/2009/10/blog-post_23.html">اتصل بنا</a> |

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

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

* العنوان الذي باللون الاحمر في الكود أعلاه هو عنوان مدونة ( المحررون العرب ) أستبدله الى عنوان مدونتك .

أرجو ان تستفيدوا من هذا الدرس وأي استفسار او سؤال نحن نرحب بتعليقاتكم عليه ،،،،


34 التعليقات:

Unknown يقول...

أخى الفاضل: أبو خلود
السلام عليكم ورحمة الله وبركاته
نشكرلك هذا الجهد الطيب
وإن شاء الله نجربها...
أخى هل هذه الإضافة أو كثرة مثل هذه الاضافات
تؤثر على سرعة التصفح فى المدونة؟
أرجو الافادة
تقبل تقديرى واحترامى
أخوك
محمد

العلم نور يقول...

السلام عليكم ورحمة الله وبركاته ..

في الحقيقة أنا احتست كثيرا ولم أعرف الطريقة إلا الآن .. بارك الله فيكم وقريبا إن شاء الله سأضيفها لمدونتي فحاليا أضفت شء آخر خارجي.

لكم مني كل الود والتقدير على هذه الجهود الواضحة وجعلها الله في ميزان حسناتكم.. آمين

أ/ سارة باجعفر يقول...

رائعة جداً وفقكم الله

جاري عملها إن احتجنا إليها ..


وفقكم الله

عبدالعزيز حسين عبدالعزيز عمار يقول...

شكرا لك يا اخى تمت اضافة اتصل بنا، و خلاصة RSS و الصفحة الرئيسية لكن الفوتر بالنسبة للكود الثانى عند البحث يكون غير موجود وعندما بحثت بعينى وجدته ولكن بعد اللصق اجريت معاينة فظهر وجود اخطاء ولا ادرى ما هم السبب

حصان المرجيحة يقول...

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

خالد محمد (ابوخلود) يقول...

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

اخي عبد العزيز حسين : الله يعطيك العافية

هل تقصد الكود الاول في الخطوة رقم 3 ؟ اذا كان هذا فاالكود اللي بعده صحيح 100% لاني جربته في مدونه تجريبية بعد نشر الموضوع مباشرة ،لكن بما انك وجدت الكود الاول بالعين المجردة استبدله اي احذفه ولصق الكود الثاني مكانه بس ركز شوية على خطوات الشرح من البداية. بعض المدونات لايوجد فيها هذا الكود اقصد( الكود الاول خطوة رقم 3 )ولكن للعلم اي شخص لايجد هذا الكود في مدونته يتصل علي وانا سأخبره كيف يضيفه ؟،،،


اخي حصان المرجيحة :
حياك الله ادخل على هذه المنتديات فهي كبيرة :

http://forums.moheet.com/

http://100fm6.com/vb/

http://www.mojalgala.com/vb/index.php

وان شاء الله سوف نخبرك بالكثير قريبا ،،،

حصان المرجيحة يقول...

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

Unknown يقول...
أزال المؤلف هذا التعليق.
Unknown يقول...

خى الفاضل: أبو خلود
السلام عليكم ورحمة الله وبركاته
أولاً أشكرلك تعقيبك على تعليقى.

أخى: أنا لاأضيف إلا مايتناسب وأجد أنه مفيد
وطبعاً لن أضيف كل ماينشر هنا.

وعموماً لم أجد الكود فى قالبى وصرفت نظر عن هذه الإضافة.
وإن شاء الله مازلنا متابعين لكل ماينشر هنا حتى يكون لدينا علم بكل جديد والاستفادة من كل مفيد.

تقبل تقديرى واحترامى
وكل عام وأنت بخير وإلى الله أقرب
أخوك
محمد

oscar يقول...

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


___________________________
التقويم الهجرى 1431 ملف PSD
http://oscarmedia2010.blogspot.com/2009/12/1431-psd.html
___________________________
صور خدع الفوتوشوب المذهلة غريبة جدا جدا
http://oscarmedia2010.blogspot.com/2009/12/blog-post_31.html
__________________________
اعلن معنا مجانا عن موقعك
http://oscarmedia2010.blogspot.com/2009/12/blog-post_12.html
___________________________
اكبر مجموعة شعارات بنظام الفيكتور
http://oscarmedia2010.blogspot.com/2009/12/blog-post_05.html
___________________________
فلتر الاضاءة الرائع Luce
http://oscarmedia2010.blogspot.com/2009/11/luce.html
___________________________
أقوى فلتر فى تنظيف الصور مع الشرح
http://oscarmedia2010.blogspot.com/2009/10/blog-post_28.html
___________________________
أقوى درس فى التجسيم ثرى دى للنصوص على الفوتوشوب
http://oscarmedia2010.blogspot.com/2009/12/3d.html
___________________________
للمزيد مدونة فوتوشوب للمحترفين
http://oscarmedia2010.blogspot.com

غير معرف يقول...

بارك الله فيكم

أحمد فريد يقول...

شكــــــــــــــــرا يا أخى وجارى الأضافة

http://egycastle.blogspot.com/

yehya يقول...

شرح روعه اخى
http://earns-blog.blogspot.com/

Forex, Forex trading, Forex market,Best and New Paid to Click Sites PTC, Earn from SMS, Pictures/Photo, Survey, Social Networking, Opening Emails, Sign up, referrals and many,download,Forex ,Books for ,Beginners,Forex ,Into Arabic,جارة العملات في الفوركس,Forex FAQ,Forex Market Books,HOW TO EARN, THROUGH BLOGS,gmaes,Forex Blog new forex news,Forex Blog | Forex | Forex News | Forex Updates | Forex


http://earns-blog.blogspot.com/

حصان المرجيحة يقول...

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

خالد محمد (ابوخلود) يقول...

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

عبدالله القرني يقول...

طيب اريد ان أضع فوتر واحد لأنه لا يوجد لدي؟

حصان المرجيحة يقول...

شكرا حبيبي
و جزاك الله خيرا

مواهب التصميم يقول...

شكرا جزيلا
بس اني عندي مشكلة هية لما اضغط Ctrl +f وابحث عن اي كلمة متضهرلي الكلمة ويطلعلي على الكلمة لون احمر ؟
هوة السبب من عندي بس مداعرف شنو المشكلة
اذا تعرف شي ارجو ان تشرحلي
وشكرا مرة اخرى

Egypt Today يقول...

مدونة لكل اخبار مصر اول باول ارجو من الجميع دعمى فهذه اول مدونة لى وارجو تشجيعى ووضع روابط مدوناتكم كتعليق فى مدونتى وانا زرت كل المدونات اللتى فى التعليقات وارجو منكم زيارتى
http://egypt-to.blogspot.com

غير معرف يقول...

فرصة عظيمة
اشهر مدونتك مجانا وشع اعلاناتها على اكثر من الف موقع من المشاهير فقط اذهب الى هذا الرابط
http://www.ad4arb.com/bnr/aymanmohsen.html

جودى يقول...

انقذونى رجاء انا مسحت كل الhtml بتاع القالب وحفظت نسخه احتياطيه من كلمة تنزيل قالب لكن مش عارفه ارجعها ازاى ارجو الرد على او مراسلتى على jodykarim@yahoo.com
ربنا يجازى كل من يساعدنى خيرا كثيرا

جودى يقول...

الحمد لله المسأله بفضل من الله عدت على خير

adel mekkaoui يقول...

شكرا جزيلا

إيمان يقول...

شكرا أخ خالد ربي يعطيك العافية
وانا ما وجدت من البداية الكود الأول

يعني شو المشكلة بالموضوع ؟
منتظرة ردك
الله يعطيك ألف عافية على ماتقدمه ..

Rg يقول...

Swf-rg.blogspot.com

غير معرف يقول...

شكرا لك
على هالشرح الجميل والرائع

حسن يقول...

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

اخبار مصرية يقول...

بجرب.. ان شاء الله
شكراً على الايضاح

مجلة الحياة يقول...

شكرا جزيلا

موقع الحياة
http://www.elhyaah.com/

اخبار سياسية يقول...

مشكووووووووور

غير معرف يقول...

مشكووووووووووور


http://dawrat-pc.blogspot.com

Umzug Wien يقول...

شكرا ياباشا

Group of companies يقول...

موضوع كويس جدااا بس انا نفسى يبقى فيه طريقة اوضح من كده لان كل الطرق مش موجودة عندى ياريت يكون فيه طريقة وفيه رد من حضرتك وكمان انا عندى فى المدونة كود ظهر فى اخر المدونة مش عارف ده من ايه ويروح ازاى شكراااا
http://quick-air.blogspot.com/

غيسى خبيزي يقول...

شكرا لك على الموضوع الرائع اتمنى زيارتي هنا :
مدونة معراج