Skip to main content

Horizontal MenuBar in Minima Template


1. Backup your template

2. Login to blogger > Layout > Edit HTML
Open Expand Widget Templates box

3. Find and Put the following coding (Green) between
a img {
border-width:0;
}

[ Menu CSS Here ]

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
So, structure should be like this and
make changes (green) to header-wrapper coding as well
a img {
border-width:0;
}

#stylefour{top:3px;position:relative;display:block;height:39px;font-size:11px;
font-weight:bold;background:transparent url(http://chanmyasoe84.googlepages.com/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#stylefour ul{margin:0;padding:0;list-style-type:none;width:auto;}
#stylefour ul li{display:block;float:left;margin:0;}
#stylefour ul li a{display:block;float:left;color:#666;text-decoration:none;
padding:11px 20px 0 20px;height:23px;
background:transparent url(http://chanmyasoe84.googlepages.com/bgDIVIDER.gif) no-repeat top right;}
#stylefour ul li a:hover,#stylefour ul li a.current{color:#B30000;
background:#fff url(http://chanmyasoe84.googlepages.com/bgON.gif) no-repeat top left;}

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border-top:1px solid $bordercolor;
border-left:1px solid $bordercolor;
border-right:1px solid $bordercolor;
}
4. Find and Put the following menu coding (green) under this lines
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>

<div id="stylefour">
<ul>
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="" >Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div>
Now you got menu under header :)
Color ေတြကိုေတာ့ Custom စိတ္ႀကိဳက္ ခ်ိန္ယူပါ။ Menu bar အေပၚက Color ကိုေတာ့ ႀကိဳက္တဲ့ Color Code ထည့္သြင္းပါ။ မထည့္ခ်င္ဘူးဆိုေတာ့ Transparent သတ္မွတ္ေပးလိုက္ပါ။

Color Tip:
#B30000 << any color value (or) transparent;
Code ေတြကို ျပင္ဖို႔ ဒါမွမဟုတ္ ထည့္ဖို႔ လုိက္ရွာတဲ့အခါမွ Scroll Bar ကိုသံုးၿပီး လိုက္ရွာေနတာထက္ Search (Ctrl+F) ကိုသံုးၿပီး လုိက္ရွာတာ ပိုျမန္ပါတယ္။ Firefox user ေတြအတြက္ဆိုရင္ေတာ့ ပိုၿပီး ျပင္ရတာ လြယ္ကူပါလိမ့္မယ္။

Credit : 13styles

Comments

  1. ေကာင္းတယ္ေ်ာ..
    ခင္ေိား ပိုစ္ေတြ..
    ဟီး..အားကိုးရတယ္..

    ေတးမြန္

    ReplyDelete
  2. ေက်းဇူးတင္ပါတယ္ဗ်ာ :)

    ReplyDelete
  3. ဟုတ္ပါ႔. တယ္ေတာ္တဲ႔ ကုိဖိုးခ်မ္း..
    England မွာေနဖုိ႔ေတာင္ မေကာင္းဘူး. ဘယ္မွာေနခုိင္းရမလဲဆုိတာလည္း မစဥ္းစားတတ္ဘူး
    ဟီး...

    ReplyDelete
  4. ဟိုက္ရွ္ ကိုေရာင္အန္ ...
    ခဏေတာ့ ေနပါရေစဦး
    ဘယ္ကိုေရႊ႕ေပးမလို႔လဲ :P

    ReplyDelete
  5. ဆရာခ်မ္းေရ မဂၤလာပါ။ ဒီပုိ႔ေလးကုိဖတ္ၿပီးmenubar ေလးလုပ္လုိက္တာ အဆင္ေျပသြားတယ္ဗ်။
    ေက်းဇူးအမ်ား...ႀကီးတင္ပါတယ္။

    ReplyDelete

Post a Comment

Thanks for your comment.

Popular posts from this blog

မေရာက္တာၾကာၿပီ

ဘေလာ့လာၿပီး မေရးျဖစ္တာ ၂ ႏွစ္နီးပါးရွိသြားၿပီပဲ။ ေဖ့ဘုတ္ေတြေပၚလာၿပီးကတည္းက ဒီဘက္ကိုလွည့္မလာျဖစ္ဘူး။ ျပန္ေရးျဖစ္ေအာင္ လုပ္ရမယ္။ အဓိကကေတာ့ ကုိယ္စိတ္ဝင္စားတဲ့အေၾကာင္းအရာေတြကို ျပန္ၿပီးေရးခ်င္တယ္။ အဓိကကေတာ့ ဓာတ္ပံုႏွင့္ နည္းပညာသတင္းေတြကိုေပါ့။

ဆရာႀကီး မင္းသုဝဏ္ရဲ႕ ယခုေခတ္ႏွင့္ကိုက္ညီေသာ ကဗ်ာတစ္ပုဒ္

ျမန္မာတို႔အတြက္

ငါသာလွ်င္ေတာ္ သူမေတာ္ရ
လူေတာ္ထင္မွာ တို႔ျမန္မာကို
ဘယ္ခါဆယ္၍ရမည္လည္း

ၾကြားရင္းႏွင့္နစ္ ဝါးရင္းနစ္သည့္
နစ္လွ်က္ေနပါတို႔ျမန္မာကို
ဘယ္ခါဆယ္၍ရမည္လည္း

အေကာင္းဆိုးထင္ ဆိုးေကာင္းထင္ႏွင့္
အထင္လြဲပါ တို႔ျမန္မာကို
ဘယ္ခါဆယ္၍ ရမည္လည္း

သူ႔ကိုငါညွိဳး ငါ့သူညွိဳးႏွင့္
အညွိဳးႀကီးပါ တို႔ျမန္မာကို
ဘယ္ခါဆယ္၍ ရမည္လည္း

ၿငီး၍မၿပီး ညဴမၿပီးဘူး
အၿပီးတကာ လုပ္ႏုိင္ပါမွ
ေတာ္ရာေရာက္လိမ့္ ေနာင္အဖို႔
ႏိုးၾကထၾကျမန္မာတို႔ သားေျမးတို႔အတြက္ ႀကိဳးပမ္းစို႔

ဆရာႀကီး မင္းသုဝဏ္


Buddhapadipa Temple

Camera: Nikon D7000 | 35mm, F8 @ 1/200s, ISO 200 Software : Adobe Lightroom, Photoshop © Chan Mya Soe