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

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

 

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

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

طريقة التركيب

الخطوة الاولي Css

1.  اذهب إلى لوحة التحكم >> تصميم>> تحرير HTML.
2. -قم بأخد نسخة إحتياطية لقالب مدونتك.

ابحث عن الكود أسفله، للعلم هذا هو كود 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، إذن لإنشاء مكان للسايدبار الجديد علينا أن نقوم بالخطوة هذه.

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

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

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

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

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

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

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

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

نزيد من عرض تذييل الصفحة (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) في كود الشريط الجانبي الجديد. يجب أن تبدو النتيجة النهائية كالتالي :

<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>

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

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

لتغيير موقع الشريط الجانبي، اتبع التعليمات حسب الشكل الذي تريده. تم تلوين العناصر بألوان مختلفة ليتم التعرف على مواقعها بسهولة. هناك 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>