မိမိ ဘေလာဂ္ အတြက္ css menu bar

 

မိမရဲ့  menubar ကိုသြားလိုက္ပါ

1. ပထမဦးစြာ   Design >> Edit HTML ကိုသြားပါ။

2. အမွန္ ခ်စ္ေပးလိုက္ပါ... Expand Widget Templates

3.  Ctrl+F   ႏွိပ္ လိုက္ပါ  ..... ]]></b:skin>



4.  ]]></b:skin> ဒီ ကုတ္ေလးရဲ့ အေပၚမွာ..ေအာက္က ကုတ္ေလးေတြ ကူးခ် လိုက္ပါ.....

/*NavBar --------------*/
#navbar{
        width: 780px;
        height: 48px;
        overflow: hidden;
        margin: 0px 0px 20px 0px;
        padding: 0px;
}

.navbar-top{
        width: 910px;
        height: 9px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
 
}

.navbar-bottom{
        width: 910px;
        height: 9px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
       
}

.navbar-mid{
        width: 910px;
        height: 30px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
     
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjprGEK-W68O7zch_PTQZutB9EXooDWnPJAd8s3upVDwgQMvKd-zsMWAUGyzbOCkTYemvFupbgILXVm81k-vzzxYqbgwphzci6o3rks_71GADkPPC2to_xUgW5RY8UUUxpTOS4uhBZ19UA/s1600/black1.png);
}

.navbar-mid ul{
        padding: 0px;
        margin: 0px;
        list-style-type: none;
        display: inline;
}

.navbar-mid ul li{
        height: 30px;
        float: left;
        padding: 0px;
        margin: 0px;
        display: inline;
        border-left: 1px solid #292929;
        border-right: 1px solid #555;
}

.navbar-mid ul li a:link, .navbar-mid ul li a:visited{
        display: block;
        margin: 0px;
        padding: 8px 10px 8px 10px;
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        color: #FFFFFF;
}

.navbar-mid ul li a:hover{
        font-color: #FFFFFF;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyt1URPr8BIIxvi26M4yVrd-RAZkH8COBW8x7F14WsEFYFbSadOFrwupjpvIVSvf9qS9jqvruraFfJIOPUNDl_US7afKe3NfF4RiNFp2p1jvzNAlmOOyoPLjqOAibIGliL45EjhktzNw8/s320/hover.png);
}

.single-black-bar{
        float: left;
        width:1px;
        height: 30px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        background: #292929;
}

.navbar-mid ul li.current_page_item a:link, .navbar-mid ul li.current_page_item a:visited, .navbar-mid ul li.current_page_item a:hover {
        display: block;
        margin: 0px;
        padding: 8px 10px 8px 10px;
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        color: #FFF;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfdhrOy0uv-Vl1ljY_uE6nUy5zBf27vA7AGMP_XHKjge-Pen-WFXBIjNF_yUWomCJtM2I3H6m57VNdzRbDmrl4F7LWvKqJj6XGBa8JTq0jaJO5AOqrJsNsAtIiN4FlENXYGgSM6CPqPSE/s320/black2.png);
}
/*Bloggertrix.com --------------*/

5. ျပီးလ်င္.. Design >>page Element   ကိုသြား

6. Add gadget  ႏွိပ္ျပီးရင္   HTML/JavaScript  ထဲမွာ

7. ေအာက္က code ေတြကို ကူးခ်လုိက္ပါ.....................

<div id="navbar">
            <div class="navbar-top">
            </div>
            <div class="navbar-mid">
                <ul>
                    <li class="page_item">
                        <a href="မိမိ၇ဲ့ label URL" title="Home">မိမိရဲံ ့ label အမည္</a>
                    </li>

<li class="page_item page-item-2"><a href="URL" title="About">About</a></li>
<li class="page_item page-item-18"><a href="URL" title="Contact">Contact</a></li>
<li class="page_item page-item-20"><a href="URL" title="Portfolio">Portfolio</a></li>
<li class="page_item page-item-22"><a href="URL" title="Make Money">Make Money</a></li>
<li class="page_item page-item-24"><a href="URL" title="Themes">Themes</a></li>
<li class="page_item page-item-26"><a href="URL" title="Comments">Comments</a></li>
<li class="page_item page-item-28"><a href="URL" title="Links">Links</a></li>
<li class="page_item page-item-30"><a href="URL" title="Forum">Forum</a></li><li class="page_item page-item-32"><a href="URL" title="Download">Download</a></li>
                </ul>
<div class="single-black-bar">
                </div>         
            </div>
            <div class="navbar-bottom">
            </div>
        </div>

  ထိုစာတန္းအနီေရာင္ေနရာ မွာ URL  မိမိ၇ဲ့  URL လင့္ ကုိထည့္ပါ
  Blue color words ဒီ အျပာေရာင္..ေနရာမွာ...မိမိရဲ့ လိုရာ menu အမည္ကုိထည့္ပါ........

8.  save  HTML/JavaScript  လိုက္ပါ....


သတိ......html/javaScript ကို post ရဲ့ အေပၚေလးမွာ ဆြဲ ထားလိုက္ပါ.......