اضافة ثلاثة اعمدة اسفل مدونة بلوجر بدون اخطاء Three Column Footer

اثناء التصفح فى احدى المدونات الأجنبية لفت انتباهى اضافة  ثلاث اعمدة اسفل مدونة بلوجر وبدون اخطاء .

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

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

ملاحظة : قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML

الأن قم بالبحث عن :

]]></b:skin>

ضع قبلة مباشرة هذا الكود :

/* -----   Footer Start   ----- */

#footer {

       margin:auto;

       padding: 0px 0px 10px 0px;

       width: 100%;

       background:#333434;

} 

#footer-wrapper {

       margin:auto;

       padding: 20px 0px 20px 0px;

       width: 960px;

}

#footercol-wrapper {

       background:#333434;

       float: left;

       margin: 0px 5px auto;

       padding-bottom: 20px;

       width: 32%;

       text-align: justify;

       font-size:100%;

       line-height: 1.5em;

       word-wrap: break-word; 

       overflow: hidden;

       color:#fff;

}

.footercol {margin: 0; padding: 0;}

.footercol .widget {margin: 0; padding: 10px 20px 0px 20px;}

.footercol h2 {

      margin: 0px 0px 10px 0px;

      padding: 3px 0px 3px 0px;

      text-align: center;

      color:#fff;      text-transform:uppercase;

      font-family:'Skolar Bold',Palatino,"Cambria","Droid Serif","Georgia","Times New Roman","Times",serif;

      font-size:21px;

      border-bottom:2px solid #fff;

}

.footercol ul {

      margin: 0px 0px 0px 0px;

      padding: 0px 0px 0px 0px;

      list-style-type: none;

}

.footercol li {

      margin: 0px 0px 2px 0px;

      padding: 0px 0px 1px 0px;

      border-bottom: 1px solid #ccc;

}

/* -----   Footer End   ----- */

المرحلة الأخيرة 

قم بالبحث عن هذا الكود :

</body>

ضع قبلة مباشرة هذا الكود :

<div id='footer'>

<div id='footer-wrapper'>

<div id='footercol-wrapper'>

<b:section class='footercol' id='footercol1' preferred='yes'> 

</b:section> 

</div> 

<div id='footercol-wrapper'>

<b:section class='footercol' id='footercol2' preferred='yes'> 

</b:section> 

</div> 

<div id='footercol-wrapper'>

<b:section class='footercol' id='footercol3' preferred='yes'> 

</b:section> 

</div> 

<div style='clear: both;'/> 

</div> </div>

بالأخير اضغط على حفظ 

الأن اذهب الى صفحة التخطيط لتشاهد النتيجة .

صورة موضحة لشكل اضافة ثلاثة اعمدة اسفل مدونة بلوجر بدون اخطاء Three Column Footer

اتمنى من ان هذا الدرس افاد الجميع 

(( لا خير فى كاتم العلم ))