شرح اضافة اربع اعمدة بأسفل مدونات بلوجر Add 4 Columns

كلنا نعلم جميعا بأن اضافة اعمدة اسفل المدونة شيى مهم ولابد منه لان صاحب المدونة دائما يريد اضافة بعض الأشياء كالاضافات المهمة الذى تكون بذيل المدونة ودائما اجد شروحات طريقة وضع ثلاث اعمدة اسفل المدونة وقليل جدا ان اجد اضافة 4 اعمدة بأسفل المدونة ولذلك قررت ان اضع لكم الطريقة وكما افعل اقوم بتجربة الطريقة قبل ان اضع الشرح فالطريقة بسيطة ولن تستغرق منك ثلاث دقائق وقبل ان اضع لكم الطريقة قد تبحث عن طريقة اضافة ثلاث اعمدة اذا كنت تريد اضافة ثلاث اعندة ادخل على هذا الرابط لتعرف الطريقة كيفية اضافة ثلاث اعمدة بأسفل المدونة وبدون اخطاء 3 column
الان نأتى الى طريقة اضافة اربع اعمدة بأسفل المدونة وهذه الطريقة رأيتها من مدونة اجنبية مشهورة http://www.bloggertipandtrick.net  قبل تركيب اى كود يجب اخذ نسخة احتياطية لتفادى اى خطاء بالنسبة للمبتدئين ادخل الى هذا الرابط لتعرف طريقة اخذ نسخة احتياطية :  درس للمبتدئين اخذ نسخة احتياطية لقالب المدونة الان قم بتخريب القالب كما تشاء لان يوجد لدينا نسخة احتياطية تابع معى الشرح لطريقة تركيب الأضافة :

فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالبالأن اضغط على تحرير HTML

الان اضغط على زر متابعة

الان قم بتوسيع القالب كما واضح لتا بالصورة التالية

الان اضغط على CTRL + F من الكيبورد لظهور عملية البحث عن الأكود بالمتصفح
ابحث عن هذا الكود :

<b:section class='footer' id='footer'/>

الان استبدالة بهذا الكود :

 <div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

ثم ابحث عن هذا الكود :

 ]]></b:skin>

ضع بأعلاه هذا الكود :

 #footer-column-container { border: .3px dotted #cccccc;}
.footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}
.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}
.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}
.footer-column ul li {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoq_FVAyoEum3INl_elRp2XMXDZyziIdaC5xQ2xnoeDgNxuyz5bRkK88aDVF0yCvGR4TISnAsA2mrj19vxtHnRyBDj_5k96xJw-3LxsAujRUkpIrW1nqoJ8ImMRAYxn8UM4TywAA6cSFs/h120/bullet.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

انتهى الشرح وارجو بأن هذه التدوينة اعجبتكم وانتظرونى بتدوينة اخرى جديدة (( لا خير فى كاتم العلم ))