14 سبتمبر 2014

مدون محترف اضافات بلوجر دروس بلوجر اضافة أدوات في الفوتر وتنسيقها

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

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

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

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


الان ابحث عن ]]></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
بواسطة

هناك 14 تعليقًا :

  1. السلام عليكم انا بالفعل استفدت كثيرا من مدونتك
    جزاك الله خير الجزاء
    لي استفسار بسيط
    لقد كنت اريد وضع سياسة الخصوصية واتصل بنا ومن نحن والفهرس وهكذا في اسفل المدونة مثل القالب الخاص بك
    ولا اعرف كيف
    في انتظار ردك اخي الكريم

    ردحذف
    الردود
    1. إذا قصدك التي في أعلى الفوتر فهذه قائمة يا غالي
      إن شاء الله اقوم بعمل شرح لها عن قريب

      حذف
  2. اتحطوا تحت بعض !! وليس جنب بعض!!

    ردحذف
    الردود
    1. اهلا اخي ممكن صورة يا غالي من المشكلة

      حذف
  3. السلام عليكم اخي الكريم لقد وضعت الاكواد في المكان المطلوب ولكن لا يعمل الفوتر اي الفوتر لا يضهر في مدونتي اخي الكريم ؟ لماذا ؟

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

      حذف
  4. اريد اضافة سياسة الخصوصسة اسفل المدونة بجاني الحقوق

    ردحذف
    الردود
    1. اضف هذا الكود بجانب الحقوق
      <a href='xxx'>من نحن</a>
      مع تغيير xxx برابط القسم الذي تريده

      حذف
  5. الكود مش متجاوب مع مع الموبايل والتابلت هل عندك فكرة لحل المشكلة دي

    ردحذف
    الردود
    1. نعم صديقي مش متجاوب
      من اجل حل المشكلة يجب عليك انت ان تضيف الاكواد الخاصة بالتجاوب بشكل يدوي

      حذف
  6. اخي مدون بارك الله فيك كيف اضبط الميتا تاج هنا في هذا القالب

    ردحذف
    الردود
    1. اهلاً صديقي
      اي قالب تقصد صديقي

      حذف
  7. ليت تكون متجاوبة تكون

    ردحذف
    الردود
    1. المشكلة أنّها ليست متجاوبة ولكن يُمكن أخذ فوتر أي قالب وتركيبه في مدونتك

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r