معهد خبراء بلوجر - طريقة أو كيفية اضافة عمود في قالب بلوجر [بطريقة صحيحة ]

هنا طريقة اضافة عمود في قالب بلوجر [بطريقة الصحيحة ]

تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

أولا : يجب ان تفهم الكود العام والمتعارف عليه في قوالب بلوجر , ومن ثم سيسهل عليك طريقة عمل اعمدة اضافية , على الجهة اليمنى او اليسرى , او كما تريد ان شاء الله عز وجل .

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

القالب العادي لبلوجر , يتكون من قسم علوي , وقسم جانبي , وقسم رئيسي , وقسم في نهاية القالب , وفي داخل هذه الاقسام , يمكنك وضع الاضافات التي تريد وضعها .
والان دعنا نلقي نظرة سريعة على تشكيلة القالب العادي في بلوجر .

اذا ما قمت بانشاء مدونة جديدة , سوف يكون هذا هو التصميم الداخلي للمدونة

هذا التصميم له 4 اقسام كما نرى , (علوي , و رئيسي , و جانبي , و سفلي )
واذا ما قمت بالنظر الى كود ال اتش تي ام ال html الخاص بهذا التصميم , فسوف يكون مشابها لغيره من التصميمات , وهوا على الشكل التالي :
ملاحظة : لقد تم وضع الارقام بجانب كل سطر للتوضيح فقط وسهولة الشرح والمرجعية .

010: <body>
020: <div id='outer-wrapper'>l<div id='wrap2'>
030: 
040: <span id='skiplinks' style='display:none;'>
050: <a href='#main'>skip to main </a>
060: <a href='#sidebar'>skip to sidebar</a>
070: </span>
080: <div id='header-wrapper'>
090: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
100: <b:widget id='Header1' locked='true' title='Second Sidebar (Header)' type='Header'/>
110: </b:section>
120: </div>
130: <div id='content-wrapper'>
140: <div id='main-wrapper'>
150: <b:section class='main' id='main' showaddelement='no'>
160: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
170: </b:section>
180: </div>
190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>
210: <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
220: <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
230: </b:section>
240: </div>
250: 
260: <div class='clear'> </div>
270: </div> 
280: <div id='footer-wrapper'>
290: <b:section class='footer' id='footer'/>
300: </div>
310: </div></div> 
320: </body>

سطر 010 و 320 , هذه السطور هي بمثابة حراس الكود , او كما يقال , بوابات الكود , وبالتالي كل الكود يجب ان يكون بين هذين السطرين .

سطر 020 و 310 , يكونو ال "div-tags" لغلافين او اغلاقين "wrappers" , وال wrapper الاول يسمى ال outer-wrapper او الغلاف الخارجي او الاغلاق الخارجي , والغلاف الثاني يسمى wrap2 . وبالتالي يمكنك تغيير الخط والالوان والخصائص الاخرى لهذي الاغلاقين في ال css .

سطر 080 الى 120 , يتضمن القسم العلوي , div-wrapper موجود في السطور 080 و 120 , و ال tags الخاصة بالقسم موجودة في السطور 090 و 110 , والصندوق widget الذي يحتوي القسم العلوي نفسه موجود في السطر رقم 100 .

سطر 130 الى 270 , يحتوي "المحتوى" , والمحتوى هنا يعني (المواضيع والمشاركات والقسم الجانبي ) , ويوجد هناك div-wrapper يسمى ب content wrapper في السطور 130 و 270 , وفي داخل هذا الغلاف wrapper يوجد ايضا 2 اخرين من ال wrapper ,
main-wrapper في السطور 140-180 ,, و sidebar-wrapper في السطور 190-240 .

في داخل ال main-wrapper سوف نجد القسم الرئيسي في السطور 150 و 170 ,, ومع صندوق المدونة Blog-widget في السطر 160 , وهذا الصندوق widget هو الصندوق الذي يحتوي على مشاركاتك .

في داخل ال sidebar-wrapper يوجد القسم الجانبي ( او العمود الجانبي ) في السطور 200-230 , متواجد مع Archive widget في السطر 210 , و profile widget في السطر 220 .

وفي النهاية يوجد لدينا القسم السفلي في الشطور 280-300 .

والان بعد ان فهمنا الهيكلية , دعنا نلقي نظرة سريعة على تشكيلة هذا القالب , داخل صفحة الكود الخاصة بالقالب , سوف تجد الكود التالي ,
ملاحظة : للوصول الى صفحة الكود الخاصة بالقالب | اذهب الى قالب | تحرير html |

#outer-wrapper {
width: 660px;
padding: 10px;
....... }

#main-wrapper {
width: 410px;
float: left;
....... }

#sidebar-wrapper {
width: 220px;
float: right;
........ }

الغلاف الخارجي outer-wrapper له عرض 660 بكسل . التبطين او الحشو padding تم تحديده الى 10 بكسل , بمعنى انه كل شي داخل الغلاف الخارجي outer wrapper يبقى بعيدا عن الحدود بمقدار 10 بكسل . وبالتالي سوف يترك مسافة للغلاف الرئيسي والغلاف الجانبي بمقدار 640 بكسل , والتي تم حسابها كالتالي | 660-20=640 بكسل .
الغلاف الرئيسي main-wrapper له عرض 410 بكسل , ويتجه اله اليسار .
الغلاف الجانبي sidebar-wrapper له عرض 220 بكسل ويتجه الى اليمين . معاً , main=wrapper و sidebar-wrapper لهما عرض 410+220=630 بكسل . وفي الوسط يوجد مسافة بمقدار 640-630=10 بكسل .
وبالتالي , اذا اردنا ان نقوم بادخال عمود ثاني جديد , سوف يتحتم علينا عمل بعض التعديلات لعمل مساحة جديدة , لأنه حسب المساحة التي بالأعلى 10 بكسل , لن نستطيع من ادخال عمود جديد على هذا الوضع .

ثانيا : اضافة عمود ثاني .

في البداية , سوف نقوم باضافة العمود الى هيكلية القالب , ومن ثم سوف نضيف العمود الى ال css , ونجعله يجد مكانا مناسبا في الصفحة .

الخطوة الاولى : خذ نسخة احتياطية من القالب ( في حالة حدوث اخطاء ) .
الخطوة الثانية : اجعل العمود الجديد مميز وفريد , كالتالي :
غير الاسطر 190 و 200 :

190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>

قم بتغيير الكود السابق , الى الكود التالي

190: <div id='right-sidebar-wrapper'>

200: <b:section class='sidebar' id='right-sidebar' preferred='yes'>

الخطوة الثالثة : قم باضافة عمود جانبي في الجهة اليسرى , عن طريق اضافة اكواد جديدة , كالتالي :

131: <div id="'left-sidebar-wrapper'">

132: <b:section class="'sidebar'" id="'left-sidebar'" preferred="'yes'/">

133: </b:section></div>

الان قم بحفظ القالب , ومن ثم اتجه الى قسم التخطيط , سوف تجد الشكل كالتالي :

كم تلاحظ , ان هناك قسم جديد تحت القسم العلوي مباشرة , زلكنه ليس في الجانب الايسر , وبالتالي سوف نحتاج الى نقله للجانب الايسر , كاتالي :

الخطوة الرابعة : قم باضافة الكود التالي الى قسم تحرير html الى css style-sheet:

#left-sidebar-wrapper {

width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

سوف تحصل على الشكل التالي :

العمود الجانبي اصبح الان في الجهة اليسرى , ولكن العمود الايمن اصبح موجود تحت القسم الرئيسي الذي تضع به مشاركاتك . وهذه المشكلة نتجت بسبب ان عرض عمودين جانبيين + القسم الرئيسي , يصل الى 840 بكسل , وهذا الرقم اكبر من عرض الغلاف الخارجي outer-wrapper الذي يصل الى 660 بكسل .

الخطوة الخامسة : قم بتغيير عرض الغلاف الخارجي وأيضا عرض الغلاف العلوي .
في css style-sheet ابحث عن
the #header-wrapper and #outer-wrapper definitions
ابحث عن الكلمات التي بالاحمر فقط .
وغير العرض من 660 الى 860 .

الخطوة السادسة : اضافة عنصر الى الصفحة .
وفي النهاية , يمكنك الان اضافة عنصر جديد الى العمود الايسر الجديد | من قسم التخطيط |

المصدر:مختص الحماية http://www.specialistsecurity.tk/201...#ixzz2kBdeIqvF