تصميم قالب بلوجر تصميم وتكويد منطقة الفوتر

سنقوم بتصميم منطقة الفوتر وتقسيمه الى ثلاث اعمدة كما هو موضح بالصورة اعلاه كي تتمكن من اضافة ادوات داخل الفوتر يمكنك اضافة العديد من المعلومات مثل:
- معلومات الاتصال
- معلومات صاحب الموقع
- روابط مهمة
- اعلانات ادسنس وغيره
- حقوق الملكية

وغيرها من المعلومات حسب ما تراه مناسب لما يقدمه موقعك من خدمات سنقوم بتقسيم الفوتر الى قسمين:
 1- قسم العلوي
 2- القسم الاسفل

1. سنقوم بتقطيع القسم العلوي الى ثلاث اعمدة ونضيف داخل كل عامود اداة كي تمكنا من اضافة ادوات من لوحة التحكم (التخطيط)

مثل اداة HTML/JavaScript او اداة قائمة الروابط او اداة المتابعة بالبريد الإلكتروني وغيرها من الادوات المتاحة في لوحة التحكم

2. القسم الاسفل عادة ما يحتوي على اسم الموقع وحقوق الملكية

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

لان نتوجه الى لوحة التحكم ثم علامة التبويب المظهر ثم تعديل html في نهاية القالب بعد وسم اغلاق </section> الرئيسي سنقوم باضافة كود الفوتر كما هو موضح بالصورة التالية

كود html تصميم منطقة الفوتر

كود html

<footer> <div class="container"> <div class="col-md-4"> <div class="footer-right"> <b:section id='widget-footer-right'/> </div> </div> <div class="col-md-4"> <div class="footer-middle"> <b:section id='widget-footer-middle'/> </div> </div> <div class="col-md-4"> <div class="footer-left"> <b:section id='widget-footer-left'/> </div> </div> </div> <div class="footer-bottom"> جميع الحقوق محفوظة © <a expr:href='data:blog.homepageUrl'> <strong> <data:blog.title/> </strong> </a> <script type='text/javascript'>document.write(new Date().getFullYear());</script> </div> </footer>

ان لم تكن من متابعي هذه الشروحات لقد تم شرح اكواد html وما يحتوي كل كلاس يمكنك الاطلاع عليها لتتعرف  ما هي وظيفتها من خلال رابط الدرس التالي:

⇦تكويد قالب بلوجرتصميم الهيدرتصميم متوافق مع الجوال

بعد اضافة الكود اضغط على حفظ المظهر ثم توجه الى القائمة الجانبية علامة التبويب التخطيط قم بتحديث الصفحة
ستلاحظ ظهور ادوات جديدة باسم (widget-footer-right)  و (widget-footer-middle)  و (widget-footer-left)
يمكنك من خلالها اضافة الادوات التي تلبي حاجتك كما في الصورة التالية

بعد الانتهاء من تكويد وتقطيع الفوتر سنقوم باضافة خصائص css حتى نحصل على الشكل المناسب لنا

كود css

footer { background: #111111; padding: 20px 0 0; color: #555555; } footer .widget h2 { position: relative; margin-bottom: 37px; font-size:16px; color: #555555; font-weight: bold; } footer .widget h2:before { background: #555555; content: ""; height: 3px; left: auto; position: absolute; width: 75%; top: 33px; right: 0; float: none; margin: auto; } footer li { list-style: none; padding: 6px 0; } .FollowByEmail .follow-by-email-inner .follow-by-email-address { padding: 1px 6px; border: 1px solid #ffffff; width: 98% !important; height: 35px !important; } .FollowByEmail .follow-by-email-inner .follow-by-email-submit { width: 60px; margin: 0; margin-right: 8px; margin-left: 0; border: 0; border-radius: 2px; -moz-border-radius: 2px; background: #2196F3; color: #fff; cursor: pointer; font-size: 13px; height: 35px; z-index: 0; } .footer-bottom { background: #000000; padding: 20px; margin-top: 20px; text-align: center; color: #555555; font-weight: bold; }