Post Top Ad

Your Ad Spot

الجمعة، 15 مارس 2013

شرح اضافة اربع اعمدة بأسفل مدونات بلوجر 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;}

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

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

  1. السلام عليكم

    جزاك الله خيرا اخى على الموضوع الجميل
    نفعنا الله واياك بكل خير ونفع بنا العباد

    تحياتى لجهدك الطيب
    http://mchabat.3abber.com/

    ردحذف
    الردود
    1. شكرا لك يا اخى الكريم على مشاركتك وتوجدك المستمر

      حذف
  2. thanks for this blog amd this post
    http://www.east-eldmam.com/
    http://www.nakl-eldmam.com/
    http://www.abyath.com/
    http://www.tfa2ol.com/
    http://www.tfa2ol.com/naklasas.html
    http://www.atar-almadinah.com/
    http://www.atar-almadinah.com/khasil.html
    http://www.atar-almadinah.com/naklasas.html
    http://www.khdmat-sa.com/
    http://www.babelsoftco.com
    http://eslamiatview.blogspot.com/
    https://www.khairyayman74.wordpress.com/
    http://www.arabic-html.com/

    ردحذف
  3. شاهدوا على موقعنا عدد كبير من الاعمال الرائعة والمميزة فى تصميمات السواتر والمظلات مظلات السيارات تعرفوا معنا على الكثير من الاعمال والتصميمات الرائعة

    ردحذف
  4. موقع محمد ابو صالح لاعمال المدافئ والشلالات نقدم اليكم الكثير من الاعمال الرائعة فاير بليس كافة الاعمال الجميلة والرائعة فى تصميمات الفاير بليس نقدمها اليكم

    ردحذف
  5. شكرا ليك علي الشرح الرائع

    http://www.shareknytech.com/

    ردحذف
  6. http://faysal777.blogspot.com/
    شكرا

    ردحذف
  7. مشاهدة الصور عن طريق الروابط الموجوده في الاسفل
    صور مشبات,مشبات,مشبات رخام,ديكورات مشبات,ديكور مشبات,
    مشبات حديثه,مشبات جديده,مشبات ملكيه,ديكورات مشبات حديثه,مشبات تراثيه
    ديكورات مشبات,ديكور مشبات,ديكورات مشبات جديده,ديكورات مشبات ملكيه
    صور مشبات
    مشبات
    http://www.mchaabat-photos.com
    http://www.mchaabat.com
    http://www.mchaabat-decoration.com

    ردحذف
  8. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  9. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  10. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

Post Top Ad