dropdown menu လွလွေလး ထည့္ၾကရေအာင္

ဒီဟာတစ္ခုကေတာ့ dropdown menu ဆိုတဲ့ ေခါင္းစဥ္ လွလွနဲ႔
နည္းလမ္းေလးတစ္ခုပါဘဲ။ သူငယ္ခ်င္းတို႔အားလံုးလည္း
 အဆင္ေျပေျပနဲ႔အသံုးျပဳႏိုင္ၾကလိမ့္မယ္လို႔ေမွ်ာ္လင့္ပါတယ္

1။ပထမဦးဆံုးအေနနဲ႔ blogger loginဝင္လိုက္ပါ။
2။Templateကို ကိုႏွိပ္လိုက္ပါ။
3။ Edit HTMLကုိႏွိပ္္လိုက္ပါ။

ျပီးေနာက္

Expand Widget Templates  

မွာအမွန္ျခစ္ျပီး Ctrl+F ႏွိပ္ျပီး  ]]></b:skin> ကိုရွာပါ။

ေတြ႔တာနဲ႔ ေအာက္ကကုဒ္ကို]]></b:skin>အေပၚမွာထည့္လိုက္ပါ။

/* Flying Css3 menu www.bloggertrix.com*/

#flyingmenubt,#flyingmenubt ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    height:500px;}
#flyingmenubt {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#flyingmenubt ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#flyingmenubt li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#flyingmenubt li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#flyingmenubt li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}

/* keyframes #animation1 */

ၿပီးတာႏွင့္ preview ကုိႏွိပ္ျပီးၾကည့္လိုက္ပါ။

အဆင္ေျပရင္save template ကုိႏွိပ္လိုက္ပါ။

 ေနာက္တစ္ဆင့္အေနႏွင့္

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

<ul id="flyingmenubt">
    <li><a href="http://www.khunpaohlay.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="http://www.bloggertrix.com/">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://www.khunpaohlay.blogspot.com/">Back</a></li>
</ul>

အဆင္ေျပသလို... လုိအပ္သေလာက္ ေခါင္းစဥ္ေတြကိုလဲ ပြားယူနိဳင္ပါတယ္
မွတ္ခ်က္။ ။ khunpaohlay.blogspot.com ေနရာမွမိမိ၏ဘေလာ့ကိုရိုက္ထည့္ပါ။

" #" ဆိုတဲ့ေနရာမွာမိမိတို႔ လင့္ကိုcopy ထည့္လိုက္။

မြိဳးရက္ပိုေမာင္ကို အားေပးၾကတဲ့ေနသူမ်ားအတြက္ အထူးပဲေက်းဇူးတင္ပါတယ္။

တံု႔ျပန္မႈအေနျဖင့္ fb like ေလးေတာ့လုပ္ေပးပါေနာ္။

အဆင္မေျပတာမ်ားရွိခဲ့ရင္လည္း C- box ကေနတစ္ဆင့္ ေျပာခဲ့ပါေနာ္။