ဘေလာ႔မွာ Dtree Menu ထည့္နည္းေလးပါ...Categories ေတြ အမ်ားႀကီးျဖစ္ၿပီး ရႈပ္ပြေနတာေတြ သူ႔အပိုင္းလိုက္ စနစ္တက်ျဖစ္သြားပါတယ္...ေခါင္းစဥ္ခြဲလိုက္ ျဖစ္ၿပီး ရွာရလြယ္သြားပါတယ္...ထည့္နည္းက မခတ္ပါဘူး
(၁) အရင္ဆံုး မိမိဘေလာ့ရဲ႕ Layout - Edit HTML မွာ <head> ကို ရွာပါတယ္။ သူ႔ေအာက္မွာ ေအာက္က code ေတြကို ထည့္ေပးပါတယ္။
<link href='http://www.sigmirror.com/files/22516_jsk1u/dtree.css' rel='StyleSheet' type='text/css'/> <script src='http://www.sigmirror.com/files/22517_fnllw/dtree.js' type='text/javascript'/>
ထည့္ၿပီးရင္ Save Template ကိုႏိွပ္ပါ။
(.js ဖိုင္တစ္ခုနဲ႔ css ဖိုင္တစ္ခုကို hosting လုပ္ထားတဲ့လင့္ျဖစ္ပါတယ္။ မိမိ ကိုယ္ပိုင္လင့္အျဖစ္ ျပန္ေျပာင္းတင္ေပးပါ။ js hosting လုပ္ျခင္းကို ဒီမွာ သြားၾကည့္ႏိုင္ပါတယ္)
(၂) Layout - Page Elements - Add a Gadget ကို ႏွိပ္ၿပီး HTML/JavaScript ေနရာမွာ ေအာက္က code ေတြကို ထည့္ေပးပါ။
<div class="dtree"> <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"/><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"/><b>Close all</b></a></p> <script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://www.thanlonnge.com');
d.add(1,0,'Free template & navigation')
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');
d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');
d.add(2,0,'Blogroll','','','','http://img26.picoodle.com/img/img26/2/5/8/thanlonengal/f_globem_d2967b8.gif','http://img26.picoodle.com/img/img26/2/5/8/thanlonengal/f_globem_d2967b8.gif');
d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');
document.write(d);
//-->
</script> </div>
မိမိဘေလာ့ရဲ႕ ခြဲခ်င္တဲ့ ေခါင္းစဥ္အလိုက္ အဆင္ေျပေအာင္ ျပင္ဆင္ေရးသြားလိုက္ပါ။ အခုအေပၚက ေရးခဲ့့ code ေတြကို ေပၚလာတဲ့ ေခါင္းစဥ္ေတြနဲ႔ ယွဥ္ၾကည့္လုိက္ရင္ နားလည္သြားမွာပါ။ ေအာက္မွာ သူ႔အတြက္ hosting လုပ္ရမယ့္ .js ဖိုင္၊ css ဖိုင္ႏွစ္ခု ထည့္ေပးထားပါတယ္....တစ္ခုခ်င္းစီကို icon ေျပာင္းသံုးထားတာကို with icon လို႔ နာမည္ေပးထားၿပီး ဘာ icon မွာ မသံုးထားတာကို without icon လို႔ ေရးထားပါတယ္။
HTML ကို မေလ့လာဘူးတဲ့သူေတြအတြက္ေတာ႔ အနည္းငယ္ ခက္ခဲလိမ့္မယ္။ ေသခ်ာစူးစိုက္ၿပီး ၾကည့္လုိက္ပါ။ အဆင္ေျပသြားပါလိမ္႔မယ္။
( မွတ္ခ်က္။ ။ အထက္ပါပိုစ့္ကို သံလံုငယ္ ၏ ဒီလင့္ေလး မွမွီၿငမ္းထားၿခင္းၿဖစ္ပါသည္ )
Dtree Menu for Blogger
Posted by အေမွာင္ထဲက ပိုးစုန္းၾကဴး at 10:07 PM Labels: Blog 0 comments
