كيف تصنع عمود ثاني في قوالب بلوجر | خاص شكراً.كوم
بسم الله الرحمن الرحيم
شكراً.كوم | shokrn.com
هنا طريقة صنع عمود ثاني في قوالب بلوجر |
أولا : يجب ان تفهم الكود العام والمتعارف عليه في قوالب بلوجر , ومن ثم سيسهل عليك طريقة عمل اعمدة اضافية , على الجهة اليمنى او اليسرى , او كما تريد ان شاء الله عز وجل .
ملاحظة : هناك طريقة سهلة للغاية بالنسبة لعدد الاعمدة المطلوبة , وهي عن طريق تحميل قالب بلوجر بعمودين او 3 اعمدة , ويكون القالب جاهز وسهل التعديل والاضافة , اما اذا كنت تملك قالب بعمود واحد مثلا , وكنت معجب بهذا القالب , فهنا يمكنك تعلم كيفية اضافة اعمدة جانبية على نفس القالب , لكي تعرض المحتويات الاخرى لمدونتك , او الاعلانات على سبيل المثال .
القالب العادي لبلوجر , يتكون من قسم علوي , وقسم جانبي , وقسم رئيسي , وقسم في نهاية القالب , وفي داخل هذه الاقسام , يمكنك وضع الاضافات التي تريد وضعها .
والان دعنا نلقي نظرة سريعة على تشكيلة القالب العادي في بلوجر .
هذا التصميم له 4 اقسام كما نرى , (علوي , و رئيسي , و جانبي , و سفلي )
واذا ما قمت بالنظر الى كود ال اتش تي ام ال html الخاص بهذا التصميم , فسوف يكون مشابها لغيره من التصميمات , وهوا على الشكل التالي :
ملاحظة : لقد تم وضع الارقام بجانب كل سطر للتوضيح فقط وسهولة الشرح والمرجعية .
سطر 010 و 320 , هذه السطور هي بمثابة حراس الكود , او كما يقال , بوابات الكود , وبالتالي كل الكود يجب ان يكون بين هذين السطرين .
سطر 020 و 310 , يكونو ال "div-tags" لغلافين او اغلاقين "wrappers" , وال wrapper الاول يسمى ال outer-wrapper او الغلاف الخارجي او الاغلاق الخارجي , والغلاف الثاني يسمى wrap2 . وبالتالي يمكنك تغيير الخط والالوان والخصائص الاخرى لهذي الاغلاقين في ال css .
#outer-wrapper {
width: 660px;
padding: 10px;
....... }
#main-wrapper {
width: 410px;
float: left;
....... }
#sidebar-wrapper {
width: 220px;
float: right;
........ }
190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>
-->
قم بتغيير الكود السابق , الى الكود التالي
شكراً.كوم | shokrn.com
هنا طريقة صنع عمود ثاني في قوالب بلوجر |
أولا : يجب ان تفهم الكود العام والمتعارف عليه في قوالب بلوجر , ومن ثم سيسهل عليك طريقة عمل اعمدة اضافية , على الجهة اليمنى او اليسرى , او كما تريد ان شاء الله عز وجل .
ملاحظة : هناك طريقة سهلة للغاية بالنسبة لعدد الاعمدة المطلوبة , وهي عن طريق تحميل قالب بلوجر بعمودين او 3 اعمدة , ويكون القالب جاهز وسهل التعديل والاضافة , اما اذا كنت تملك قالب بعمود واحد مثلا , وكنت معجب بهذا القالب , فهنا يمكنك تعلم كيفية اضافة اعمدة جانبية على نفس القالب , لكي تعرض المحتويات الاخرى لمدونتك , او الاعلانات على سبيل المثال .
القالب العادي لبلوجر , يتكون من قسم علوي , وقسم جانبي , وقسم رئيسي , وقسم في نهاية القالب , وفي داخل هذه الاقسام , يمكنك وضع الاضافات التي تريد وضعها .
والان دعنا نلقي نظرة سريعة على تشكيلة القالب العادي في بلوجر .
اذا ما قمت بانشاء مدونة جديدة , سوف يكون هذا هو التصميم الداخلي للمدونة
هذا التصميم له 4 اقسام كما نرى , (علوي , و رئيسي , و جانبي , و سفلي )
واذا ما قمت بالنظر الى كود ال اتش تي ام ال html الخاص بهذا التصميم , فسوف يكون مشابها لغيره من التصميمات , وهوا على الشكل التالي :
ملاحظة : لقد تم وضع الارقام بجانب كل سطر للتوضيح فقط وسهولة الشرح والمرجعية .
010: <body>
020: <div id='outer-wrapper'>l<div id='wrap2'>
030: <!-- skip links for text browsers -->
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: <!-- spacer for skins that want sidebar and main to be the same height-->
260: <div class='clear'> </div>
270: </div> <!-- end content-wrapper -->
280: <div id='footer-wrapper'>
290: <b:section class='footer' id='footer'/>
300: </div>
310: </div></div> <!-- end outer-wrapper -->
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'>
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>
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;
}
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 .
الخطوة السادسة : اضافة عنصر الى الصفحة .
وفي النهاية , يمكنك الان اضافة عنصر جديد الى العمود الايسر الجديد | من قسم التخطيط |
سوف يظهر لك القسم بهذا الشكل تقريباً .
ليست هناك تعليقات:
إرسال تعليق