 |
|
|
|
|
|
|||||||
 |
|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
11-09-2013, 09:40 PM
|
#1 |
|
مدون جديد
 تاريخ التسجيل: Oct 2013
المشاركات: 15
|
طريقة أو كيفية اضافة عمود في قالب بلوجر [بطريقة صحيحة ]
هنا طريقة اضافة عمود في قالب بلوجر [بطريقة الصحيحة ]  أولا : يجب ان تفهم الكود العام والمتعارف عليه في قوالب بلوجر , ومن ثم سيسهل عليك طريقة عمل اعمدة اضافية , على الجهة اليمنى او اليسرى , او كما تريد ان شاء الله عز وجل . ملاحظة : هناك طريقة سهلة للغاية بالنسبة لعدد الاعمدة المطلوبة , وهي عن طريق تحميل قالب بلوجر بعمودين او 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'> الخطوة الثالثة : قم باضافة عمود جانبي في الجهة اليسرى , عن طريق اضافة اكواد جديدة , كالتالي : 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
__________________
|
|
|
|
|
| مواقع النشر (المفضلة) |
| الكلمات الدلالية (Tags) |
| بلوجر |
| الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
المواضيع المتشابهه
|
||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| اضافة بلوجر : شارك الموضوع على الشبكات الاجتماعية بطريقة جديدة | 3oqool.com | إضافات وأدوات بلوجر | 0 | 10-27-2013 05:05 PM |
| اضافة عمود تحت رأس الصفحة | حسين | إضافات وأدوات بلوجر | 0 | 10-16-2013 09:23 PM |
| كيفية اضافة استفتاء في مدونة بلوجر | farouk | إضافات وأدوات بلوجر | 0 | 09-06-2013 11:53 PM |
| كيفية اضافة الوجوه الضاحكة في تعليقات بلوجر | بلال حمدان | إضافات وأدوات بلوجر | 3 | 11-04-2012 09:29 PM |
| كيفية اضافة مواضيع ذات صلة في بلوجر | بلال حمدان | إضافات وأدوات بلوجر | 0 | 10-03-2012 01:24 PM |
|
الساعة الآن 01:03 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |
العرض العادي
