Css Menu Bar ေလးတည္ေဆာက္ၾကမယ္

သည္နည္းပညာေလးကေတာ့ Menu လွလွေလးတ္ညေဆာက္လိုသေူတြအတြက္ အေထာက္ကူျပဳေစမဲ့ နည္းလမ္းေလးတစ္ခုပါ... ဘေလာ့မိတ္ေဆြတို႕ သိၾကမွာပါ  Menu ဆိုတာ တက္ပလက္တိုင္းေအာ္တိုမပါဘူးဆိုတာေပါ့..အဲလို ေအာ္တိုမပါတဲ့ ဟာေတြနဲ႕ ေတြ႕တဲံအခါ က်ေနာ္တို႕အေနနဲ႕ အခက္ခဲ ျဖစ္ေစပါတယ္.. ဥပမာဗ်ာ... ကိုယ္က သည္တက္ပလက္ဒီဇိုင္းေလးကို
ၾကိဳက္ေနတယ္.. ေဟာ..ဒါေပမယ့္ Menu ေတြပါမလာဘူးးးဆိုပါေတာ့... အဲလိုေတြ႕တဲံအခါ ဒါေလးက အသုံး၀င္လာျပီေလ.. ဒါေၾကာင့္ ဘေလာ့တစ္ခု လုပ္ျပီဆိုရင္ေတာ့  Menu ကိုလည္း ကိုယ္တိုင္ထည့္တတ္မွ ျဖစ္မွာပါ...သည္စိတ္ကူးေလးနဲ႕  Menu Tab ေတြကိုတင္ျပေပးလိုက္တာပါ..
ထည့္နည္းေလးကိုရွင္းျပပါ့မယ္..ေနာ္...

အဆင့္   (၁) ...........
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  DASHBOARD ကိုသြားလိုက္ပါ။
►3-  LAYOUT    ကိုကလစ္ပါ..။
►4-  EDIT HTML  ကို၀င္ပါ.
►5-  Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

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

/* The CSS Code for the menu starts here */
.rhm1{
 width:780px;
 height:64px;
 margin:0 auto;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vm0kD5KCam82jCiL_6R6eWIA3rK7A-Z2qZRsns2DwgbaJCxjM5fPW9pBad99UL3YcANy-eyLM_M-shR2Mf1LvCHf2PlzzoH-DsGOu6sbHWk2axP3YT3zfjNu8SgRLhute2FcyjDQbrg/s1600/rhm1_bg.gif) repeat-x;  
}
.rhm1-left{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5dxORolr9pvu7ODH5vYcsprXt3GP9XLDjgaUWcoC0HFFrjLD3kTmVHOsbEaj6ej07z-mHfmFUyrugraNXX2E863-FovELQ3yUVE8iJgRE0zj8YGfoE2m6-Cvlrn_pQEBy0R61_SVE_50/s1600/rhm1_l.gif) no-repeat;
 width:15px;
 height:64px;
 float:left;
}
.rhm1-right{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZJC0WNePjn0-B4RxsUFVdGRlgrew-d6F7eO9Kk7Ri154BozBdewjzUl5rP3zIUyurDWDK0pWbG8MhNx2h24iA36ndP0cn3fCXX6BryxmuRD2NkdJCDDN1e24bgGaJ7GnmYEsSiqwsBpE/s1600/rhm1_r.gif) no-repeat;
 width:15px;
 height:64px;
 float:right;
}
.rhm1-bg{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vm0kD5KCam82jCiL_6R6eWIA3rK7A-Z2qZRsns2DwgbaJCxjM5fPW9pBad99UL3YcANy-eyLM_M-shR2Mf1LvCHf2PlzzoH-DsGOu6sbHWk2axP3YT3zfjNu8SgRLhute2FcyjDQbrg/s1600/rhm1_bg.gif) repeat-x;
 height:64px;
}
.rhm1-bg ul{
 list-style:none;
 margin:0 auto;
}
.rhm1-bg li{
 float:left;
 list-style:none;
}
.rhm1-bg li a{
 float:left;
 display:block;
 color:#ffe8cc;
 text-decoration:none;
 font:12px 'Lucida Sans', sans-serif;
 font-weight:bold;
 padding:0 0 0 18px;
 height:64px;
 line-height:40px;
 text-align:center;
 cursor:pointer; 
}
.rhm1-bg li a span{
 float:left;
 display:block;
 padding:0 32px 0 18px;
}
.rhm1-bg li.current a{
 color:#fff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMYqxDAAOUr657zT5vv5tGpR79b2Oft8JPBzwoQSWp1iUigva_ynxt0k77S5hDEAPy7pETnlVIVh0OpIVooJ9BWLyjFngufG4zFuNbQljoTu3gMuQ5vtp8J47NtAn2GUaihRPKknOtqs/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li.current a span{
 color:#fff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDPl9YfRSTzydaOi57XngOG7puuzZcaTkpxkb0lxuTpc333xx_4hH_0X82J2ismaODQonhtMcqf96LlCzksK4VH_BDc_LAo0S4zbo9Nqdcp_48GL_kDGXaIzMVY20-hsqMnrmh6zZ0Bo/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}
.rhm1-bg li a:hover{
 color:#fff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMYqxDAAOUr657zT5vv5tGpR79b2Oft8JPBzwoQSWp1iUigva_ynxt0k77S5hDEAPy7pETnlVIVh0OpIVooJ9BWLyjFngufG4zFuNbQljoTu3gMuQ5vtp8J47NtAn2GUaihRPKknOtqs/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li a:hover span{
 color:#ffffff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDPl9YfRSTzydaOi57XngOG7puuzZcaTkpxkb0lxuTpc333xx_4hH_0X82J2ismaODQonhtMcqf96LlCzksK4VH_BDc_LAo0S4zbo9Nqdcp_48GL_kDGXaIzMVY20-hsqMnrmh6zZ0Bo/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}

ျပီးတာနဲ႕ မိမိတို႕ တက္ပလက္ကို save လိုက္ပါ။

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

<!--fobbleup.blogspot.comMenuBar Starts-->
<div class="rhm1">
<div class="rhm1-right"></div>
<div class="rhm1-left"></div>
<div class="rhm1-bg">
<ul>
 <li class="current"><a href="#"><span>Home</span></a></li>
 <li><a href="#"><span>ကဗ်ာ</span></a></li>
 <li><a href="#"><span>ဗဟုသုတ</span></a></li> 
 <li><a href="#"><span>တရားေတာ္</span></a></li>  
 <li><a href="#"><span>သတင္း</span></a></li> 
</ul>
</div>
</div>

ဒါဆို မိမိဘေလာ့မွာ လွပတဲ့ menu ေခါင္းစဥ္တန္းေလး ရရွိေနပါျပီေနာ္...

မွတ္ခ်က္ ။    ။ အနီေရာင္ အမည္ေတြမွာ မိမိႏွစ္သက္ရာ ထားေပးပါ..

                   #  သည္ေနရာိကုေတာ့ မိမိတို႕ ဘေလာ့ labels ကလင့္ေတြနဲ႕ အစားထိုးလိုက္ပါ..

လင့္ခ်ိတ္ေပးရမယ္ေပါ့..လင့္ ခ်ိတ္နည္းကို မသိေသးသူမ်ားအတြက္  သည္ေနရာမွာ ေလ့လာနိဳင္တယ္ေနာ္....ခုနည္းလမ္းေလးက ခ်ိတ္ရတာ ပိုလြယ္ကူပါတယ္.. html ထဲကိုသြားစရာေတာင္မလိုပါဘူးး အဆင့္ (၂)  မွာ ထည့္ထားတဲ့ Html/Javascript ေလးကို Edit ကေနကလစ္ျပီးဖြင့္ထားလုိက္ပါ... မိမိဘေလာ့ေပၚက Labels ကေန  Copy Link Location ယူျပီး

# သည္ေနရာေလးမွာ past ခ်ေပးလိုက္ယုံပါဘဲ...မရွင္းပါက ေအာ္ခဲ့ပါ... ခ်ိတ္နည္း ပို႕စ္ တင္ေပးပါ့မယ္ဗ်ာ...........

ေအာင္ေအာင္(မကစ)

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
ဘေလာ့ဆုိင္ရာနည္းပညာမ်ား{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ

Posted in: Blogs Tab Menu