ဘေလာ့မွာ vertical navigation menu ေလးလုပ္နည္း

မဂၤလာပါဗ်ာ.. သည္ေန႕ေတာ့ Menu ေလးတမ်ိဳးတဖုံ လွပစြာတည္ေဆာက္နည္းေလးကို တင္ေပးသြားမွာ ျဖစ္ပါတယ္...အေပၚကပုံေလးကိုၾကည့္လုိက္ပါ..ေသသပ္လွပစြာ နဲ႕မိမိတုိ႕ဘေလာ့ကို ထန္႕ညားလွပေစမွ အမွန္ပါ...ကဲ စမယ္ေနာ္

ထည့္နည္းကေတာ့...............

အဆင့္  (၁)  ။              ။ 

 

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  DASHBOARD ကိုသြားလိုက္ပါ။
►3-  LAYOUT    ကိုကလစ္ပါ..။
►4-  EDIT HTML  ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

 

 

 

]]></b:skin>ကိုရွာလုိက္ပါ...ေတြ႕တာနဲ႕ အဲကုဒ္ေရွ႕ကေန.. ေအာက္ကေပးထားတဲ့ကုဒ္ေတြကို ထည့္ေပးလိုက္ပါ။ 

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmWNGeUHHVn5ZjdfPDZ4dfUoNHTKhXPqnLQ1rAJz5lQaEYhUKdY6PlDNXdHu0Tx1Z31Tkmtx1HjiIKatXjWJP7iJJMK4UC0IuCRx1Ebq73xgPmmhyphenhyphenNP4QLRvHf1lO9FxGiorZd8wAMjw/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmWNGeUHHVn5ZjdfPDZ4dfUoNHTKhXPqnLQ1rAJz5lQaEYhUKdY6PlDNXdHu0Tx1Z31Tkmtx1HjiIKatXjWJP7iJJMK4UC0IuCRx1Ebq73xgPmmhyphenhyphenNP4QLRvHf1lO9FxGiorZd8wAMjw/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

အဆင့္ (၂)  ။            ။   

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

 

<div id="menu9"> <ul> <li><a href="#">Title 1</a></li> 
                      <li><a href="#">Title 2</a></li> 
                      <li><a href="#">Title 3</a></li> 
                      <li><a href="#">Title 4</a></li> 
                      <li><a href="#">Title 5</a></li> </ul> </div>

မွတ္ခ်က္  ။      ။  # ေနရာမွာ မိမိတို႕ရဲ႕ လင့္ေတြထည့္ေပးရပါ့မယ္...

                      Title 1,2,3,4,5, ေနရာမွာ မိမိတို႕ လိုတဲ့ ေခါင္းစဥ္အမည္ထည့္ေပးပါ။

 
ေနာက္ဆုံဒေအနနဲ႕  Save  HTML JavaScript   လုိက္ၾကပါေတာ့..

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...

www.aungsanmks.blogspot.com 

www.ledimyethar.com 

တို႕ရဲ႕ cbox မွာ ေျပာခဲ့ၾကပါေနာ္...