How To Add 3 Column Footer To Blogger Very Easy اضافة ثلاث أعمدة أسفل المدونة بلوجر

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

يمكنك مشاهده هذه الاضافة فى اسفل موقعى ؛ ببعض التعديلات يمكنك ان تحصل على شكل رائع للأعمده ؛ تابع الشرح

طريقة التركيب :من مدونة برامج القاهرة

• سجل دخولك الى لوحة تحكم المدونة بلوجر
• اختر التبويب ( قالب) على يمين لوحة التحكم
• اضافط على ( نسخ احتياطية/ استعاده) ؛ ثم اضغط على (تنزيل النموذج الكامل) وذلك لاسترجاع القالب مره اخرة فى حالة حدوث خطأ لا قد الله.
• نرجع الى التبويب (قالب)
• نختار ( تحرير HTML)
• نضغط على ( توسيع قوالب عناصر واجهة المستخدم)
• نقوم بالبحث عن الكود التالى باستخدام ازار لوحة المفاتيح ( Ctrl + F)

]]></b:skin>

• ثم ضع فوقه مباشرة الكود الاتى :

/* -----   LOWER SECTION   ----- */
#cairo-pro {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#ecf3f5;
}
#cairo-pro-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#cairopro-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}

       .cairopro {margin: 0; padding: 0;}
       .cairopro .widget {margin: 0; padding: 10px 20px 0px 20px;}

.cairopro h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.cairopro ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.cairopro li {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Fd19iWONc4nrFKiZo8MvWBCSAL8uihUJ9lH-4sjLpx9QXV8HsQW4FdnSXqhZYhJgAL9_P8XuPdfvuZXsk73CWs2MgHBVfQR2LSu42Z8bz_Nc-_s0TgWhoARC1LajvkeczKiYLOdctBg/s1600/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}

}
/* ----- LOWER SECTION---cairo-pro.com ----- */

• ثم ابحث عن الكود الاتى : 

</body>

• وقم بوضع الكود التالى فوقه مباشرة

<div id='cairo-pro'>
<div id='cairo-pro-wrapper'>
<div id='cairopro-wrapper'>
<b:section class='cairopro' id='cairopro1' preferred='yes'>
</b:section>
</div>
<div id='cairopro-wrapper'>
<b:section class='cairopro' id='cairopro2' preferred='yes'>
</b:section>
</div>
<div id='cairopro-wrapper'>
<b:section class='cairopro' id='cairopro3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

ثم قم بعمل حفظ واستمتع بالاضافة ؛ ملحوظة هذه الطريقة فعاله 100% وكما اخبرتكم قد تكون خالية من الاخطاء بالنسبة للقالب ومن تواجهه اى مشاكل لا قدر الله يمكنه اضافة تعليق وسوف اجاوب عليه فى اقرب فرصه ممكنه