اضافة ثلاث أدوات في الفوتر وتنسيقها

الثلاث أعمدة أو اضافات في الفوتر أصبحت رائجة كثيراً في قوالب بلوجر والبعض لا يستغني عنها لكن هناك قوالب لا تحتوي تلك الأعمدة والبعض يريدها سنحاول في موضوعنا شرح أبسط طريقة لإضافتها وضبطها وتنسيقها بما يتناسب مع القوالب فقط نتبع الخطوات البسيطة للتركيب وبإذن الله تنجح الطريقة

أولا نحتاج لإضافة الكود التالي فوق الوسم </body>

<div id='footer-cnmu'>
<div class='footer'>
<b:section class='footera' id='footera' showaddelement='yes'/>
<b:section class='footerb' id='footerb' showaddelement='yes'/>
<b:section class='footerc' id='footerc' showaddelement='yes'/>
</div>
<div style='clear: both;'/>
</div>

لكن هناك ملحوظة أحيانا تكون حقوق القالب ايضا قبل الوسم </body> هي الاخرى وهنا قد نجد الأدوات ظهرت بعد الحقوق وليس قبلها لذلك تحتاج قليل من الخبرة لتحدد اكواد الحقوق وتضيف الكود فوقها وليس بعدها يعني حاول ان تجرب حتى تحصل على نتيجة مضبوطة لذلك لا تنسى أخذ نسخة إحتياطية من القالب

والآن نأتي للمرحلة الثانية أضف الكود التالي فوق الوسم ]]></b:skin>

#footer-cnmu {
  background:#fff;
  margin: auto;
  padding: 0;
  width: 100%;
}
.footer {
  margin: auto;
  padding: 5px 10px;
  width: 960px;
}
.footer h2 {
  background:#777;
  border-radius: 7px 7px 0 0;
  color: #fff;
  font-size: 18px;
  margin: -5px -5px 5px;
  padding: 4px 5px 8px;
  text-align: center;
}
.footera,.footerb,.footerc {
background:#EBEAEA;
border: 1px solid #bbb;
border-radius: 8px;
float: right;
margin: 5px 0 10px 8px;
padding: 5px;
width: 300px;
}

تابع معي طريقة التنسيق

هذا #fff اللون هو لون الخلفية لمجموعة الأدوات

هذا 960 هو المقاس العام للثلاث ادوات يمكن تغييره بحسب حجم قالبك

هذا #EBEAEA هو لون خلفية الآداة

وهذا #bbb هو لون الإطار

أما الرقم  300 هو عرض الادوات ايضا يمكنك تكبيرة أو تصغيرة بحسب ما تريد

هذا #777 لون خلفية عنوان الآداة

وهذا #fff لون خط العنوان

وهذا  18 حجم الخط

طبعا قليل من الخبرة في CSS وستستطيع تنسيق الآداة بشكل اكبر

وبالتوفيق بإذن الله