Make a D'tree Menu at Blog

အခ်ိန္ရတာနဲ႔ ဘေလာ့နဲ႔ဆိုင္တဲ့ပို႔စ္တင္လိုက္အုန္းမယ္။ ဘေလာ့ဆိုက္ဘားမွာ dtree Menu လုပ္နည္းေလးပါ။ ဘေလာ့ဆိုက္ဘားမွာ dtree Menu ထည့္ထားျခင္းသည္ ရႈပ္ေထြးတဲ့မိမိပို႔စ္ Label ေတြကို စနစ္တက်ရွိျပီး ဘ ေလာ့ကိုလွပေစပါတယ္။ dtree Menu ဆိုတာ ဘာလဲလို႔မသိေသးရင္ ပံုကိုၾကည့္လိုက္ပါ။ မသိေသးတဲ့
ပုဂၢိဳလ္မ်ားအတြက္ေျပာတာေနာ္။ ဒီစတိုင္လ္သည္ dtree Menu ရဲ႕စတိုင္လ္ေလးပါပဲ။ ၾကိဳက္ရင္ ေအာက္ပါ
အဆင့္ဆင့္ျဖင့္လိုက္လုပ္ၾကရေအာင္...

၁။ Dashboard--->>Layout---->>Edit html ကုိသြားပါ။ Template ကုိ Backup လုပ္ခဲ့ပါ။ (Download Full Template)
၂။ </head>ဆုိတဲ့ Code ကုိေတြ႕ေအာင္ရွာပါ။ ေတြ႕ရင္ အဲဒီ</head>အေပၚကေန ေအာက္မွာေပး ထားတဲ့ Code ေတြကုိ ထည့္လုိက္ပါ။


<link rel="StyleSheet" href="http://ahom24.googlepages.com/dtree.css" type="text/css" /> <script type="text/javascript" src="http://ahom24.googlepages.com/dtree.js"></script>

ဒီ code ထဲမွာပါတဲ့ css နဲ႔ js ႏွစ္ခုကိုေဒါင္းျပီး မိမိကိုယ္ပိုင္အေနနဲ႔ hosting ျပန္တင္ပါ။ က်ေနာ္ကေတာ့ google code မွာတင္ထားပါတယ္။
၃။ အားလံုးျပီးရင္ Save Template ကိုႏွိပ္လိုက္ပါ။

၄။ ထိုေနာက္ Page Elements > Add a Page Element>HTML/Javascript ကိုႏွိပ္ျပီး ေအာက္ပါ code ေတြ ကို copy/paste ထည့္ျပီး Save လုပ္ပါ။


<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://kolom-tutorial.blogspot.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://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.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>

ဒီကုဒ္ထဲမွာပါတဲ့ ေခါင္းစည္းေတြ၊ ဂဏန္းနံပါတ္ေတြ၊ ေကာ္မာေတြကိုသတိထားပါ။ ကိုယ္ခြဲထားခ်င္တဲ့ ေခါင္း စည္းေတြကို ကုဒ္ထဲမွာပါတဲ့ ေခါင္းစည္းေတြနဲ႔ခ်ိန္းပါ။ မိမိပို႔စ္က Label ေတြရဲ႕လင့္ေတြကို ဒီကုဒ္ထဲက 10,3, 20,3 စတဲ့ ေနာက္မွာရွိတဲ့ ေကာ္မာႏွစ္ခုၾကားမွာ ထည့္လိုက္ရံုပါပဲ။ HTML code ေတြကိုမရင္းႏွီး တဲ့ပုဂၢိဳလ္မ်ား အတြက္ အခက္အခဲရွိႏိုင္ေပမယ့္ ဂရုတစိုက္ေလ့လာထည့္မယ္ဆိုရင္အဆင္ေျပသြားမွာပါ။

Download : dtree zip :
Dtree icon and css/js

ref : http://www.blogspottutorial.com/2008/05/maka-d-menu-at-blog.html



Source :

ေစာလင္းနက္စ္