Tree View Widget ထည့္ျခင္း
အကယ္၍ အထက္ပါ ပံုအတုိင္း Tree View လုပ္ခ်င္တယ္ ဆိုရင္ျဖင့္
အဆင့္(၁)
Layout မွ Edit Html ကိုေရြး၍ ေအာက္တြင္ ေဖာ္ျပထားေသာ ကုဒ္ကို <Head> .... </Head> ၾကားတြင္ အရင္ ထည့္ေပးပါ။
<link href='http://thebloggerguide.googlepages.com/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://thebloggerguide.googlepages.com/dtree.js' type='text/javascript'/>
အဆင့္ (၂)
Layout ၏ Page Elements မွ Add a Page Element ကိုႏွိပ္၍ Html/Javascript ကို ေရြးပါ။
ေအာက္တြင္ ေဖာ္ျပထားေသာ ကုဒ္ကုိ ကူးထည့္ပါ။
ေပၚလိုေသာ စာမ်ားကို ကုဒ္တြင္ မိမိအလုိက် ျပင္ဆင္ႏိုင္ပါသည္။
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Favorite Articles');
d.add(1,0,'3 Columns');
d.add(2,1,'3 Columns Explained','http://bguide.blogspot.com/2008/02/three-column-templates-explained.html');
d.add(3,1,'Skeleton of a Template','http://...');
d.add(4,1,'Adding a Third Column','http://...');
d.add(5,1,'Layout Wire Frame Editor','http://...');
d.add(6,1,'3 Columns with LR Sidebars','http://...');
d.add(7,0,'Blog Traffic');
d.add(8,7,'How to Monitor Visitors','http://...');
d.add(9,7,'Feedjit','http://...');
d.add(10,7,'Exclude Your Traffic from GA','http://...');
d.add(11,0,'Customizations');
d.add(12,11,'Add a Custom CSS class','http://...');
d.add(13,11,'Related Posts Table','http://...');
d.add(14,11,'Limit Widgets to Specific Pages','http://...');
d.add(15,1,'3 Column Step by Step Guides','http://...');
document.write(d);
//-->
</script>
</div>
အနည္းငယ္ရွင္းျပလိုပါသည္။
Favorite Articles ၏ ေအာက္တြင္
- 3 Columns
- Blog Traffic
- Customizations ဟူ၍ ရွိပါသည္။
d.add(0,-1,'Favorite Articles');
d.add(1,0,'3 Columns');
d.add(7,0,'Blog Traffic');
d.add(11,0,'Customizations'); ဟူ၍ ျဖစ္သည္။
လိုင္း '0' ၏ ေအာက္တြင္ ရွိေသာေၾကာင့္ က်န္သံုးခုစလံုးတြင္ ဒုတိယဂဏန္းမွာ '0' ျဖစ္ရသည္။
Customizations ၏ ေအာက္တြင္
- Add a Customer CSS class
- Related Posts Table
- Limit Widgets to Specific Pages ဟူ၍ ရွိျပန္ေသာေၾကာင့္ ကုဒ္မွာ ဤသို႔ ျဖစ္ရသည္။
d.add(12,11,'Add a Custom CSS class','http://...');
d.add(13,11,'Related Posts Table','http://...');
d.add(14,11,'Limit Widgets to Specific Pages','http://...');
လိုင္း '11' ၏ အစြယ္အပြား ျဖစ္ေသာေၾကာင့္ ဒုတိယဂဏန္းမွာ '11' သာ ျဖစ္ရမည္။
'http://...' မွာ မိမိသြားလိုေသာ Web URL ကို ေရးထည့္ေပးရမည္ ျဖစ္သည္။
d.add(15,1,'3 Column Step by Step Guides','http://...'); မွာ
လိုင္း '15' ေရာက္မွ လိုင္း '1' ရွိ '3 Columns' ေအာက္သုိ႔ လွမ္းထည့္ျခင္းျဖစ္သည္။
