شرح إضافة 3 أعمدة في الفوتر لمدونات بلوجر . زواري الكرام الأعزاء درسنا اليوم هو عبارة عن شرح إضافة 3 أعمدة في الفوتر لمدونات بلوجر . وقد أردت شرحه بعد أن جائتني بعض الاستفسارات بخصوص هذه الإضافة لقوالب بلوجر فأبدأ والله المستعان ؛؛
1. ادخل الى لوحة التحكم ثم الى تصميم ثم تحرير ال HTML ثم قم بتوسيع القالب .
2. قم بأخذ نسخة احتياطية من القالب خاصتك .
3. قم بالبحث عن هذا الكود
قم بالبحث عن </b:skin>
وقم بإدراج هذا الكود قبله مباشرة
ملحوظة هامة : شكل الأعمدة يعتمد على شكل قالبك الخاص .
تم بحمد الله .. تحياتي أخوكم : باسم
1. ادخل الى لوحة التحكم ثم الى تصميم ثم تحرير ال HTML ثم قم بتوسيع القالب .
2. قم بأخذ نسخة احتياطية من القالب خاصتك .
3. قم بالبحث عن هذا الكود
<div id='footer-wrapper'>وقم باستبداله بهذا الكود
<b:section class='footer' id='footer'/>
</div>
<div id='footer-column-container'>ثم قم بعمل استعراض للقالب . عند عدم وجود أية أخطاء تابع معي لابد من إضافة هذا الكود لتظبيط ال CSS
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
قم بالبحث عن </b:skin>
وقم بإدراج هذا الكود قبله مباشرة
#footer-column-container {الآن احفظ القالب واذهب الى لوحة التحكم ثم التصميم ثم عناصر الصفحة .. ستجد أن ال 3 أعمدة تم إدراجهم في القالب .
clear:both;
}
.footer-column {
padding: 10px;
}
ملحوظة هامة : شكل الأعمدة يعتمد على شكل قالبك الخاص .
تم بحمد الله .. تحياتي أخوكم : باسم
2 التعليقات:
جزاك الله خيرا على الشرح
@اياد العفو أخ أياد
إرسال تعليق