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

اضافة ثلاث اعمدة في الفوتر و تنسيقها بطريقة احترافية و يمكن اضافة 4 او 5 اعمدة على حسب رغبتك مثل مدونة مدون محترف

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

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

الان ابحث عن ]]> و اضف الكود التالي فوقه

/*----- 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 بالخط الموجود في مدونتك

الان ابحث عن و اضف الكود التالي فوقه

لاضافة عمود خامس قم باضافة هذا الكود

مع تغيير lowerbar4 بــ lowerbar5
اي تعديل تريده قم بوضع رد في تعليق بالمشكلة و سوف يتم الرد عليك بحل لها

طبعا قليل من الخبرة في CSS وستستطيع تنسيق الآداة بشكل اكبر

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

Unknown

اضف تعليق

اضافات بلوجر, دروس بلوجر

الأحد، 14 سبتمبر 2014

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000

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

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

اهم الملاحظات حول الكود

لاضافة عمود خامس قم باضافة هذا الكود

عن الكاتب مدون محترف

مقالات قد تهمك