Adding a second sidebar
Sidebar အသစ္တစ္ခုထည္႔ခ်င္လုိ႔ လိုက္ေမႊလုိက္တာ ေတြ႕တာေလးကို ဘာသာျပန္ထားပါတယ္။
ပထမဆံုးအေနနဲ႔ HTML structure and layout ကုိရွင္းျပထားတာကို ေတြ႔ရပါတယ္။
Standard blogger template မွာ
1. Header section
2. Sidebar-section
3. Main-section
4. Footer-section ေတြဆုိျပီး အပိုင္းလိုက္ခဲြထား ပါတယ္။
ေအာက္မွာ ေဖာ္ျပထားတာကေတာ႔ template ရဲ႕ HTML code ေတြပါ။ ရွာရလြယ္ေအာင္ ေဘးမွာ လုိင္း နံပါတ္ေလးေတြ ထည္႔ထားေပးတာပါတဲ႔။
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>
Line 010 မွ Line 320 ထိကေတာ႔ body-tags ပဲျဖစ္ပါတယ္။
Line 020 မွ Line 310 ထိကေတာ႔ “outer-wrapper” နဲ႔ “wrap2” အတြက္ div-tags ပဲျဖစ္ပါတယ္။
Line 080 မွ Line 120 မွာေတာ႔ headerb ပဲျဖစ္ပါတယ္။ ဒီမွာထပ္ခဲြထားတာကေတာ႔
· Line 080 မွ Line 120 ကေတာ႔ div-wrapper
· Line 090 မွ Line 110 ကေတာ႔ section-tags
· Line 100 ကေတာ႔ Header ပါတဲ႔ Wdiget ပါ
Line 130 မွ Line 270 ထိကေတာ႔ content ပါ (blog posts ေတြနဲ႔ sidebar ေတြကိုေျပာတာပါတဲ႔)။ ဒီမွာလဲ ထပ္ခဲြထားတယ္
· Line 130 မွ Line 270 ကေတာ႔ content-wrapper
· Line 140 မွ Line 180 ကေတာ႔ main-wrapper
· Line 190 မွ Line 240 ကေတာ႔ sidebar-wrapper
Line 150 မွ Line 170 ထိကေတာ႔ main section ျဖစ္ျပီးေတာ႔ Line 160 ကေတာ. Posts ေတြပါတဲ႔ Blog-widget တဲ႔။ အဲဒါေတြကုိ Mian-wrapper ထဲမွာေတြ႔နိုင္ပါတယ္။
Sidebar-wrapper ထဲမွာကေတာ႔
Sidebar-section ကေတာ႔ line 200 ကေန230 ၾကားျဖစ္ျပီးေတာ႔ Archive-widget (line 210) နဲ႕ Profile-widget (line 220) ပါဝင္ပါတယ္။
Footer ကေတာ႔ Line 280 ကေန 300 ထိပါ။
Second sidebar ေလးကို ဘေလာဂ္႔ထဲမွာ ထည္႔ ရေအာင္။
Step 1: ရွိထားတဲ႕ template ေလးကို အရင္ backup လုပ္ပါ။
Step2: Line 190 နဲ႔ 200 မွာ ေအာက္ပါအတုိင္းျပင္လုိက္ပါ။
190: < id="'right-sidebar-wrapper'">
200: < class="'sidebar'" id="'right-sidebar'" preferred="'yes'">
Step 3: Left sidebar အတြက္ကုိ Line 131 ကစလုိ႔ ေအာက္ပါကုတ္အတုိင္း ထည္႔ရပါမည္။
131: < id="'left-sidebar-wrapper'">
132: < class="'sidebar'" id="'left-sidebar'" preferred="'yes'/">
133:
No comments:
Post a Comment