طريقة إضافة الشريط أو العمود الجانبي (السايدبار) إلى قالب مدونة بلوجر و التحكم في موضعه ~ مدونة الباحث الليبي

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

و كما ترون في التخطيط أعلاه : رأس الصفحة (header)، الرئيسية (main)، الشريط الجانبي (sidebar) و تذييل الصفحة (footer). كل هذه العناصر موجودة داخل الغلاف الخارجي (outer-wrapper). لِدى و من أجل إضافة الشريط الجانبي، علينا زيادة عرض الغلاف الخارجي(outer-wrapper) لكي يتمكن هذا الأخير من احتواء الشريط الجانبي الجديد. نحتاج أيضا إلى زيادة عرض رأس الصفحة (header) و تذييل الصفحة (footer)، بغرض التنسيق بين عناصر القالب... لا تقلق سيتوضح كل شيء في السطور القادمة يإذن الله.

سوف أقسم التعليمات البرمجية إلى قسمين CSS و HTML.

على بركة الله نبدأ :

1- اذهب إلى لوحة التحكم >> تصميم>> تحرير HTML.

2- قم بأخد نسخة إحتياطية لقالب مدونتك.

3- اتبع الإرشادات أدناه.

التغييرات على CSS :

اتبع الخطوات التالية :

1. إضافة كود CSS الخاص بالشريط الجانبي الجديد

ابحث عن الكود أسفله، للعلم هذا هو كود CSS الخاص بالشريط الجانبي الموجود.

ملاحظة : ليس من الضروري أن تجده مماثلا لما وجدته، المهم هو أنه

يبتدئ بـ

#sidebar-wrapper {

و ينتهي عند أول

}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

ما سوف تفعله هو نسخ الكود كله، و الصقه مباشرة بعده، و من ثم غير تسمية العنصر إلى sidebar1-wrapper# ، لتحصل على ما يلي :

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar1-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

انتهت خطوة إضافة "كود الشريط الجانبي الجديد"، و في الخطوات الثلاثة القادمة سنقوم بتغيير عرض بعض العناصر... و لأجل ذلك، سأفترض أن قياسات العرض الـ width البدئية (أي التي وجدتها قبل إجراء التعديلات) هي كالآتي :

Outer-wrapper = 660 px

sidebar-wrapper = 220 px

header-wrapper = 660 px

footer-wrapper = 660 px

ملاحظة : لكل قالب قياساته.

تذكر(ي) أخـ(ـــتـ)ـي الكريمـ(ـة) أن الهدف من هذا الدرس هو إضافة الشريط الجانبي (السايدبار)، نعلم أن السايدبار الموجود عرضه هو 220px، إذن لإنشاء مكان للسايدبار الجديد علينا أن نقوم بالخطوة 2.

2. نزيد من عرض الغلاف الخارجي (outer-wrapper width)

لإظهار الشريط الجانبي الجديد علينا خلق مساحة له، و لذلك سنزيد إلى عرض الغلاف الخارجي نفس عرض الشريط الجانبي الأول، الذي هو في مثال الدرس 220px. لنحصل على شريطين جانبين متساويين. لذلك يجب أن يكون عرض الغلاف الخارجي الجديد 220px + 660px = 880px

خاصيتين مهمتين :

عرض الغلاف الخارجي القديم = عرض الرئيسية + عرض الشريط الجانبي الموجود

عرض الغلاف الخارجي الجديد = عرض الغلاف الخارجي القديم + عرض الشريط الجانبي الجديد

#outer-wrapper {
width: 660px; <------ غير القيمة إلى 880
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

3. نزيد من عرض رأس الصفحة (header-wrapper width)

لتحقيق التوازي و التناسق و الجمالية، وَجَبَ علينا زيادة عرض رأس الصفحة ليصبح هو كذلك 880px.

#header-wrapper {
width:660px; <------ غير القيمة إلى 880
margin:0 auto 10px;
border:1px solid $bordercolor;
}

4. نزيد من عرض تذييل الصفحة (footer-wrapper width)

لتحقيق التوازي و التناسق و الجمالية مرة أخرى :) وَجَبَ علينا زيادة عرض تذييل الصفحة ليصبح هو كذلك 880px.

#footer {
width:660px; <------ غير القيمة إلى 880
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

}

انتهينا من التغييرات الخاصة بـ CSS، و بالتالي سننتقل إلى التغييرات الخاصة بـ HTML

التغييرات على HTML :

ابحث عن كود مشابه لما يلي : (للعلم هذا هو كود الشريط الجانبي الموجود)

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels'
type='Label'/>
</b:section>
</div>

بعد أن تجده قم بما يلي :

1. انسخ الكود و الصقه مباشرة بعده

2. قم بإعادة تسمية الـ id الخاص بـ div و الخاص بـ b section. يجب أن يكون الـ id الخاص بـ div مثله مثل الـ id في CSS أي :

#sidebar1-wrapper

3. احذف الأدوات (widgets) في كود الشريط الجانبي الجديد.

يجب أن تبدو النتيجة النهائية كالتالي :

تغيير موقع السايدبار :

لتغيير موقع الشريط الجانبي، اتبع التعليمات حسب الشكل الذي تريده. تم تلوين العناصر بألوان مختلفة ليتم التعرف على مواقعها بسهولة. هناك 3 عناصر مهمة (هي التي سنغير أماكنها فيما بينها) و هي الرئيسية (main) باللون الأخضر، السايدبار القديم (sidebar) باللون الوردي و السايدبار الجديد (sidebar1) باللون الأحمر.

الحالة 1 : السايدبار القديم و السايدبار الجديد على الجهة اليمنى

هذا ما سوف تحصل عليه إذا اتبعت كل المراحل أعلاه.

الحالة 2 : السايدبار القديم و السايدبار الجديد على الجهة اليسرى

في التغييرات التي أجريناها على CSS، غيِّر الـ float الخاص بـ main-wrapper من startSide$ إلى endSide$ و غيِّر الـ float الخاص بـ sidebar-wrapper من endSide$ إلى startSide$

الحالة 3 : السايدبار القديم على الجهة اليمنى و السايدبار الجديد على الجهة اليسرى

1. في التغييرات التي أجريناها على CSS، غيِّر الـ float الخاص بـ sidebar1-wrapper من endSide$ إلى startSide$

2. و في التغييرات التي أجريناها على HTML، غيِّر موضع كود السايدبار الجديد من موضعه السابق (و هو بَعْدَ div الخاصة بالـ main) إلى الموضع الجديد (و هو قبل div الخاصة بالـ main)، هكذا :

<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

تطبيق الدرس على القوالب الأخرى :

- أُجريت التغييرات أعلاه على قالب Minima. أما بالنسبة للقوالب الأخرى، فإن أسماء العناصر قد تكون مختلفة بعض الشيء.

- إن لم تتمكن من التعرف على أسماء العناصر الخاصة بقالبك، يمكنني أن أخبرك بذلك، ما عليك إلا وضع رابط تحميل القالب في التعليق أسفله و سأجيبك بإذن الله.

- بالنسبة للـ float ، هناك بعض القوالب لا تستخدم المُتَغيِّرين startSide$ و endSide$. في هذه الحالة عليك فقط بتغيير startSide$ بـ left و endSide$ بـ right.

انتهى الدرس، و لم يتبقى إلا أن أتمنى لكم حظا سعيدا في إضافة السايدبار...

... تحياتي :)

عن الكاتبHm

هذا النص الغبي ، غير مقصود لقرائته . وفقا لذلك فمن الصعب معرفة متى وأين نهايته ، لكن حتى . فإن هذا النص الغبي ، ليس مقصود لقرائته . نقطة رجوع لسطر مدونة عرب ويب ترحب بك

مدونة الباحث الليبي

مدونة الباحث الليبي

طريقة إضافة الشريط أو العمود الجانبي (السايدبار) إلى قالب مدونة بلوجر و التحكم في موضعه

عن الكاتبHm

مقالات قد تهمك