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

- اذهب إلى لوحة التحكم >> تصميم>> تحرير HTML.
- -قم بأخد نسخة إحتياطية لقالب مدونتك.
ليس من الضروري أن تجده مماثلا لما وجدته، المهم هو أنه يبتدئ بـ .
وينتهي عند }
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#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 البدئية (أي التي وجدتها قبل إجراء التعديلات) هي كالآتي :
لكل قالب قياساته .
تذكر(ي) أخـ(ـــتـ)ـي الكريمـ(ـة) أن الهدف من هذا الدرس هو إضافة الشريط الجانبي (السايدبار)، نعلم أن السايدبار الموجود عرضه هو 220px، إذن لإنشاء مكان للسايدبار الجديد علينا أن نقوم بالخطوة هذه.
عرض الغلاف الخارجي القديم = عرض الرئيسية + عرض الشريط الجانبي الموجود.
عرض الغلاف الخارجي الجديد = عرض الغلاف الخارجي القديم + عرض الشريط الجانبي الجديد.
#outer-wrapper {
width: 660px; <------ غير القيمة إلى 880
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
لتحقيق التوازي و التناسق و الجمالية، وَجَبَ علينا زيادة عرض رأس الصفحة ليصبح هو كذلك 880px.
#header-wrapper {
width:660px; <------ غير القيمة إلى 880
margin:0 auto 10px;
border:1px solid $bordercolor;
}
لتحقيق التوازي و التناسق و الجمالية مرة أخرى :) وَجَبَ علينا زيادة عرض تذييل الصفحة ليصبح هو كذلك 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;
}
الخطوة الثانية 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) باللون الأحمر.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>
COMMENTS