الجمعة، 5 مايو 2017

اضافة ثلاثة اعمدة اسفل مدونة بلوجر بدون اخطاء 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>
بالأخير اضغط على حفظ 
الأن اذهب الى صفحة التخطيط لتشاهد النتيجة .
اتمنى من ان هذا الدرس افاد الجميع 
(( لا خير فى كاتم العلم ))

ليست هناك تعليقات :

إرسال تعليق

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

الموافقة على نشر التعليقات

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