الثلاث أعمدة أو اضافات في الفوتر أصبحت رائجة كثيراً في قوالب بلوجر
والبعض لا يستغني عنها لكن هناك قوالب لا تحتوي تلك الأعمدة والبعض يريدها
سنحاول في موضوعنا شرح أبسط طريقة لإضافتها وضبطها وتنسيقها بما يتناسب مع
القوالب و يمكن اضافة اربع او خمس اعمدة على حسب رغبتك فقط نتبع الخطوات البسيطة للتركيب وبإذن الله تنجح الطريقة
طريقة التركيب
الان ابحث عن ]]></b:skin> و اضف الكود التالي فوقه
/*----- Advanced Multi Column Footer By www.mudwnp.blogspot.com -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: right;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: normal 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: right;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-right: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
اهم الملاحظات حول الكود
لتغيير حجم الفوتر قم بتغيير width: 100%; على حسب ما حجم مدونتك بتغيير رقم 100
و هذا الرقم width: 23%; هو حجم عرض الاعمدة في الفوتر إذا اضفت 3 اعمدة يصبح 33%
لتغيير لون خلفية الفوتر #333333 قم بتغيير هذا الرقم بكود اللون الذي تريده ستجده مكرر اكثر من مرة قم بتغييرها كلها
لتغيير حجم و نوع الخط قم بتغيير رقم 14 بالحجم الذي تريد و تغيير Arial بالخط الموجود في مدونتك
الان ابحث عن </body> و اضف الكود التالي فوقه
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
لاضافة عمود خامس قم باضافة هذا الكود
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
مع تغيير lowerbar4 بــ lowerbar5
اي تعديل تريده قم بوضع رد في تعليق بالمشكلة و سوف يتم الرد عليك بحل لها
طبعا قليل من الخبرة في CSS وستستطيع تنسيق الآداة بشكل اكبر
وبالتوفيق بإذن الله
اضافة أدوات في الفوتر وتنسيقها
4
/
5
بواسطة
مدون محترف
السلام عليكم انا بالفعل استفدت كثيرا من مدونتك
ردحذفجزاك الله خير الجزاء
لي استفسار بسيط
لقد كنت اريد وضع سياسة الخصوصية واتصل بنا ومن نحن والفهرس وهكذا في اسفل المدونة مثل القالب الخاص بك
ولا اعرف كيف
في انتظار ردك اخي الكريم
إذا قصدك التي في أعلى الفوتر فهذه قائمة يا غالي
حذفإن شاء الله اقوم بعمل شرح لها عن قريب
اتحطوا تحت بعض !! وليس جنب بعض!!
ردحذفاهلا اخي ممكن صورة يا غالي من المشكلة
حذفالسلام عليكم اخي الكريم لقد وضعت الاكواد في المكان المطلوب ولكن لا يعمل الفوتر اي الفوتر لا يضهر في مدونتي اخي الكريم ؟ لماذا ؟
ردحذفوعليكم السلام و رحمة الله و بركاته
حذفاهلا اخي مصطفى
بعد وضع الاكواد تأكد من حفظك للقالب
و اذهب للتخطيط إذا وجدت الادوات معناها شغلك صح إذل لم تجد الادوات قد يكون مكان وضعك للاكواد خاطيء
اريد اضافة سياسة الخصوصسة اسفل المدونة بجاني الحقوق
ردحذفاضف هذا الكود بجانب الحقوق
حذف<a href='xxx'>من نحن</a>
مع تغيير xxx برابط القسم الذي تريده
الكود مش متجاوب مع مع الموبايل والتابلت هل عندك فكرة لحل المشكلة دي
ردحذفنعم صديقي مش متجاوب
حذفمن اجل حل المشكلة يجب عليك انت ان تضيف الاكواد الخاصة بالتجاوب بشكل يدوي
اخي مدون بارك الله فيك كيف اضبط الميتا تاج هنا في هذا القالب
ردحذفاهلاً صديقي
حذفاي قالب تقصد صديقي
ليت تكون متجاوبة تكون
ردحذفالمشكلة أنّها ليست متجاوبة ولكن يُمكن أخذ فوتر أي قالب وتركيبه في مدونتك
حذفيسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r