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

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

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

طريقة التركيب

الان ابحث عن ]]></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 وستستطيع تنسيق الآداة بشكل اكبر

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