Post Top Ad

Your Ad Spot

الجمعة، 5 فبراير 2016

اضافة اربع اعمدة اسفل مدونة بلوجر بشكل منسق وجذاب Add 4 Column Footer

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




شرح تركيب الاضافة :

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

الان قم باللضغط على ازرر Ctrl + F لأضهار خانة البحث 
قم بالبحث غن هذا الكود :
]]></b:skin>
اضف قبلة مباشرة هذا الكود :
#footer-wrapper {clear: both;width: 100%; height:4px; background: #CC0000;}
#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: left; 
margin: 0px 5px auto; 
padding-bottom: 20px; 
width: 23%;
text-align: justify; 
color:#ddd; 
font: bold 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: left; 
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-left: 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; 
}
ثم قم بالبحث عن هذا الكود :
</body>
ضع فوقة مباشرة هذا الكود :
    <div id='lower'>
      <div id='lower-wrapper'>
        <div id='lowerbar-wrapper'>
          <b:section class='lowerbar' id='Column 1' preferred='yes'/>
        </div>
        <div id='lowerbar-wrapper'>
          <b:section class='lowerbar' id='Column 2' preferred='yes'/>
        </div>
        <div id='lowerbar-wrapper'>
          <b:section class='lowerbar' id='Column 3' preferred='yes'/>
        </div>
        <div id='lowerbar-wrapper'>
          <b:section class='lowerbar' id='Column 4' preferred='yes'/>
        </div>
        <div style='clear: both;'/>
      </div>
    </div>

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

ليست هناك تعليقات:

إرسال تعليق

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

Post Top Ad