Dark Colour Dropdown Menu

ဒါေလးကေတာ့ မိမိတို႕ဘေလာ့ လွပေသသပ္ေစတဲ့ Dropdown Menu ေလးပါေနာ္  အနက္ေရာုင္
Menu လွလွေလးပါ..လိုအပ္ရင္ စမ္းသတ္ၾကည့္လိုက္ပါ...

ထည့္နည္းေလးနဲ႕  လိုအပ္တဲ့ ကုဒ္ေတြအတိုင္း ဆက္လက္ ေလ့လာလိုကပါေနာ္
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  Expand  Widget  Template  ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
                          ]]></b:skin> ကုဒ္ကိုရွာလုိက္ပါ  ေတြ႕တာနဲ႕ သူ႕အေပၚကေန ေပးထားေသာ
                                                ေအာက္ကကုဒ္ေတြကို ထည့္လုိက္ပါ။

/* The CSS Code for the menu starts here bloggertrix.com */ .containerbt {margin: 0 auto;width: 610px;text-align: center;height:300px;} ul.dark_menu { list-style: none;padding: 0; font-family: Arial;font-size: 14px;line-height: 14px;} ul.dark_menu:after {content: "";clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;} ul.dark_menu li {float: left;margin: 0 0 0 10px;position: relative;} ul.dark_menu li:first-child {margin: 0;} ul.dark_menu li a, ul.dark_menu li a:link {color: #FFFFFF;text-decoration: none; display: block;padding: 10px 26px;text-shadow: 0 1px 0 #4b433e; background: #362f2c; background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321));background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%); background: -o-linear-gradient(top, #362f2c 0%,#282321 100%); background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 ); background: linear-gradient(top, #362f2c 0%,#282321 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514; -moz-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514; box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;} ul.dark_menu li a:hover { color: #73635e; text-shadow: 0 1px 1px #000; background: #282321; background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;} ul.dark_menu li a.selected, ul.dark_menu li a:active { color: #73635e;background: #282321; text-shadow: 0 1px 1px #000; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;} ul.dark_menu li ul {display: none;} ul.dark_menu li ul:before {content: " ";position: absolute;display: block;z-index: 1500;left: 0;top: -10px;height: 10px;width: 100%;} ul.dark_menu li:hover ul { position: absolute;display: block;z-index: 1000;left: 0;top: 44px;padding: 5px 0;list-style: none;background: #282321; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} ul.dark_menu li ul li { float: none;margin: 0 10px;border-bottom: 1px solid #191614;border-top: 1px solid #3a3230;} ul.dark_menu li ul li:first-child { margin: 0 10px; border-top: 0 none;} ul.dark_menu li ul li:last-child { border-bottom: 0 none;} ul.dark_menu li ul li a, ul.dark_menu li ul li a:link { color: #73635e;display: block;background: transparent none;padding: 10px 20px 10px 5px;white-space: nowrap;text-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);-moz-box-shadow: 0 0 0 rgba(0,0,0,0);box-shadow: 0 0 0 rgba(0,0,0,0); -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;} ul.dark_menu li ul li a:hover {text-decoration: underline;background: #2a2523;}

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

ေနာက္တဆင့္အေနနဲ႕  ဆက္လုပ္လိုက္ပါေနာ္...

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

<div class="container"> <!-- Dark Menu Begin --> <ul class="dark_menu"> <li><a href="#" class="selected">Home</a></li> <li> <a href="#">Download</a> <!-- Sub Menu Begin --> <ul> <li><a href="#">Menu Link 1</a></li> <li><a href="#">Menu Link 2</a></li> <li><a href="#">Menu Link 3</a></li> <li><a href="#">Menu Link 4</a></li> </ul> <!-- Sub Menu End --> </li> <li> <a href="#">Blog</a> <!-- Sub Menu Begin --> <ul> <li><a href="#">Menu Link 1</a></li> <li><a href="#">Menu Link 2</a></li> <li><a href="#">Menu Link 3</a></li> <li><a href="#">Menu Link 4</a></li> </ul> <!-- Sub Menu End --> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <!-- Dark Menu End --> </div>

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

လင့္ခ်ိတ္နည္း (၁)   သည္မွာ  ေလ့လာနိဳင္ပါတယ္...
လင့္ခ်ိတ္နည္း(၂)    သည္မွာ   သြားလိုက္ပါ 

လာေရာက္ေလ့လာၾကတဲ့ မိတ္ေဆြအေပါင္း အဆင္မေျပမွဳေလးေတြ ရွိက ကြန္မက္ေသာ္လည္းေကာင္း
c-box မွေသာ္လည္းေကာင္း  ေျပာခဲ့နိဳင္ပါတယ္...

Read more »

Sidebar Menu Style လွလွေလးလာျပီေနာ္... ( လန္းမွလန္း )

ကဲ ဘေလာ့ကာ မိတ္ေဆြတို႕ေရ  သည္နည္းေလးကေတာ့  ခပ္လန္းလန္းေလးေပါ့ဗ်ာ... ဘေလာ့မွာ

မ်ားေသာအားျဖင့္ေတာ့ Menu   ေတြကို Dropdown   ေတြႏွစ္သက္ၾကပါတယ္.... အဲတာကိုလည္း

ဘေလာ့ရဲ႕ အေပၚဘားမွာ ထားေလ့ရွိၾကပါတယ္... ပုံမွန္ေအနထားလို႕ဆိုရမယ္ေပါ့...

သည္တစ္ခါေတာ့  က်ေနာ္ တင္တဲ့နည္းလမ္းေလးကေတာ့  Sidebar Dropdown ေလးေနာ္

လန္းေတာ့လန္းတယ္..သူကလည္းး တမ်ိဳးခ်စ္စရာေလးေပါ့..အေပၚမထားျခင္တဲ့ ေဘာ္ဒါမ်ားအတြက္  ေဘးကေန  ထားလို႕ရတာေပါ့...ကဲ

ေအာက္မွာ လုပ္နည္းေတြ  ကုဒ္ေတြ  ေလ့လာ ယူေဆာင္ၾကပါစို႕.....

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ..
►5- Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

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

post-image /* The CSS Code for the menu starts here s2free.blogspot.com */ #nav12,#nav ul { background-color: #8899AA; list-style: none outside none; margin: 0; padding: 0; } #nav12 { display: block; padding: 5px; position: relative; width: 112px; -moz-perspective: 200px; -ms-perspective: 200px; -webkit-perspective: 200px; -o-perspective: 200px; perspective: 200px; } #nav12 ul { left: -9999px; opacity:0; overflow: hidden; padding: 5px; position: absolute; top: -9999px; -moz-transform: rotateY(70deg); -ms-transform: rotateY(70deg); -o-transform: rotateY(70deg); -webkit-transform: rotateY(70deg); transform: rotateY(70deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear; -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear; -o-transition: -o-transform 0.3s linear, opacity 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear; transition: transform 0.3s linear, opacity 0.3s linear; } #nav12 li { background-color: #FFFFFF; position: relative; } #nav12 > li { -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #nav12 li a { background-color: #AABBCC; border-color: #DDDDDD #555555 #555555 #DDDDDD; border-style: solid; border-width: 1px; color: #000000; display: block; font-size: 15px; padding: 8px 10px 8px 5px; text-decoration: none; width:95px; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } #nav12 li:hover > a { background-color: #8899AA; border-color: #8899AA; color: #FFFFFF; } #nav12 li:hover ul.subs { left: 114px; opacity:1; top: 0; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } #nav12 ul li { width: 100%; }

အိုေက  မိမိတို႕ တက္ပလက္ကို ေဆ့လုိက္ပါေတာေ့နာ္.....

ေနာက္တဆင့္အေနနဲ႕..........

Sing In Blogger....

Layout    ကို၀င္လိုက္ပါ..ေနာက္...  Add a Gadget  ကိုကလစ္ေပးလိုက္ပါ

အဲမွာဘဲ   Html/Java script  ဆိုတာေတြ႕မယ္.. ရွာလိုက္ပါ.... ေတြ႕တာနဲ႕....

အဲထဲကို   ေအာက္ကကုဒ္ေတြ ထည့္ေပးလိုက္ပါေတာ့.....ဗ်ာ...လန္းးမွလန္းးသြားးမယ္...ေိေိ

.  ေအာက္မွာ ေပးထားေသာကုဒ္မ်ားေကာ္ပီယူ ထည့္လိုက္ပါ

<div class="container">
    <ul id="nav12">
        <li><a href="http://www.s2free.blogspot.com/">Home</a></li>
        <li><a 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 href="#">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 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.s2free.blogspot.com/">Add This</a></li>
    </ul>
</div>

  မွတ္ခ်က္    ။     ။ ေခါင္းစဥ္ေတြကို  မိိမိတို႕ လိုအပ္သလို  ထပ္တိုးနိဳင္ပါတယ္.... မ်ားျခင္သေလာက္ မ်ားနိဳင္တယ္... အဓိက  <li><a href="#">Menu 6</a></li>   ဒါေလးဘဲ ေပါ့...

မိမိတို႕ ေခါင္းစဥ္ေတြ ထဲမွာ....ေတြကေနတဲ့   #  ေနရာကေတာ့  ေခါင္းစဥ္ရဲ႕  Link  ကိုထည့္ရမွာပါ။
Menu  ေတြ   Submenu   ေတါေနရာမွာေတာ့ မိမိတို႕ ပို႕စ္တင္ထားတဲ့ Labels အမည္ေတြေပါ့...
အဆင္ေျပျပီေနာ္..ဒါဆို.... နမူနာေလးလည္းး ပုံျပထားပါတယ္.. ႏွစ္သက္မယ္ဆို သုံးလိုက္ပါေနာ္..

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္... လိုအပ္တာမ်ားရွိပါက.. C-Box မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္...

ဘေလာ့ခရီးသည္
www.ledimye.blogspot.com
www.aungsanmks.com
www.ninilayy.blogspot.com
တို႕မွာ လည္ပါတ္နိဳင္ပါတယ္.....ေနာ္

Read more »

အလြယ္ကူဆုံးျဖစ္တဲ့ Easy Dropdown Menu ေလးလာျပီေနာ္..

မဂၤလာပါ.... သည္ေန႕တင္တဲ့နည္းပညာေလးကေတာ့ ဘေလာ့တစ္ခု မွာ မရွိမျဖစ္ ဆိုသလို လိုအပ္ေနတဲ့

Tab Menu ဆိုတဲ့ ေခါင္းစဥ္ ဘားေလးဘဲျဖစ္ပါတယ္.. ဒါေလးကို က်ေနာ္တို႕ နည္းပညာေတြ မွ်ေ၀ၾကတဲ့ မိတ္ေဆြ တို႕အေနနဲ႕  လည္းႏွစ္သက္ၾကပါတယ္... Drop Down Menu လို႕ေခၚတဲ့  စတိုင္ေလးပါ... 

သည္စတိုင္ေလးကို   ဘယ္ Html ထဲကိုမွ ကုဒ္ေတြ ရွာ ကုဒ္ေတြ ထည့္ ဆိုတဲ့ အလုပ္ေတြနဲ႕ မလုပ္ဘဲ... 

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

ေအာက္မွာ လိုအပ္ေသ ာ ကုဒ္မ်ားႏွင့္အတူ   လုပ္ေဆာင္နည္းေတြကိုပါ ရွင္းျပလိုက္ပါတယ္..

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

ေအာက္မွာ ပုံေလးနဲ႕အတူ ရွင္းျပလိုက္ပါတယ္..ေနာ္..

မိမိဘေလာ့ LAYOUT ေရာက္တာနဲ႕ Add a Gadget ဆိုတာကိုကလစ္လိုက္ပါ

အေပၚကလို ဇယားေလးက်လာတာနဲ႕ အဲထဲက Html/Java Script ဆိုတာကလစ္လုိက္ပါ

ဒါဆို က်လာတဲ့ေဘာက္ေလးထဲမွာဘဲ ေအာက္ကေပးထားေသာကုဒ္ေတြကို ေကာ္ပီယူထည့္လုိက္ေပါ့။

          <script src='http://code.helperblogger.com/dd-level-menu.js' type='text/javascript'></script><style>/* ######### Drop Down Menu Bu HelperBlogger.com ######### */ /* ######### Matt Black Strip Main Menu Bar CSS ######### */ .ddsubmenustyle, .ddsubmenustyle div { /*topmost and sub DIVs, respectively*/ font: normal 13px Verdana; margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; background: white; border: 1px solid black; border-bottom-width: 0; visibility: hidden; z-index: 100; } .ddsubmenustyle ul { margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; border: 0px none; } .ddsubmenustyle li a { display: block; width: 170px; /*width of menu (not including side paddings)*/ color: black; background-color: lightyellow; text-decoration: none; padding: 4px 5px; border-bottom: 1px solid black; } * html .ddsubmenustyle li { /*IE6 CSS hack*/ display: inline-block; width: 170px; /*width of menu (include side paddings of LI A*/ } .ddsubmenustyle li a:hover { background-color: black; color: white; } .downarrowpointer { /*CSS for "down" arrow image added to top menu items*/ padding-left: 4px; border: 0; } .rightarrowpointer { /*CSS for "right" arrow image added to drop down menu items*/ position: absolute; padding-top: 3px; left: 100px; border: 0; } .ddiframeshim { position: absolute; z-index: 500; background: transparent; border-width: 0; width: 0; height: 0; display: block; } /* ######### Black Strip Main Menu Bar CSS ######### */ .mattblackmenu ul { margin: 0; padding: 0; font: bold 12px Verdana; list-style-type: none; border-bottom: 1px solid gray; background: #414141; overflow: hidden; width: 100%; } .mattblackmenu li { display: inline; margin: 0; } .mattblackmenu li a { float: left; display: block; text-decoration: none; margin: 0; padding: 6px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: white; background: #414141; } .mattblackmenu li a:visited { color: white; } .mattblackmenu li a:hover { background: black; /*background of tabs for hover state */ } .mattblackmenu a.selected { background: black; /*background of tab with "selected" class assigned to its LI */ } </style><div id="ddtopmenubar" class="mattblackmenu"> <ul> <li> <a href="မိမိဘေလာ့လိပ္စာထည့္ပါ">HOME</a> </li> <li> <a href="#" rel="ddsubmenu1">နည္းပညာဆိုင္ရာ</a> </li> <li> <a href="#" rel="ddsubmenu2">စာေပဆိုင္ရာ</a> </li> <li> <a href="#">အက်ိဳးေဆာင္လုပ္ငန္းမ်ား</a> </li> <li> <a href="#" rel="ddsubmenu3"> ေဆာ့၀ဲလ္ဆိုင္ရာ</a> </li> <li> <a href="#">ရည္ရြယ္ခ်က္</a> </li> <li> <a href="#">ဘာသာေရး</a> </li> <li> <a href="#">ဆက္သြယ္ရန္</a> </li> </ul> </div> <script type="text/javascript"> ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") </script><ul class='ddsubmenustyle' id='ddsubmenu1'> <li> <a href='#'>နည္းပညာဆိုင္ရာ1</a> </li> <li> <a href='#'>နည္းပညာဆိုင္ရာ 2</a> <ul> <li> <a href='#'>နည္းပညာဆိုင္ရာ2.1</a> </li> <li> <a href='#'>နည္းပညာဆိုင္ရာ 2.2</a> </li> </ul> </li> <li> <a href='#'>နည္းပညာဆိုင္ရာ 3</a> <ul> <li> <a href='#'>နည္းပညာဆိုင္ရာ 3.1</a> </li> </ul> </li> <li> <a href='#'>နည္းပညာဆိုင္ရာ4</a> </li> </ul> <ul class='ddsubmenustyle' id='ddsubmenu2'> <li> <a href='#'>စာေပဆိုင္ရာ 1</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ2</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 3</a> <ul> <li> <a href='#'>စာေပဆိုင္ရာ 3.1</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 3.2</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 3.3</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 3.4</a> </li> </ul> </li> <li> <a href='#'>စာေပဆိုင္ရာ 4</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 5</a> <ul> <li> <a href='#'>စာေပဆိုင္ရာ 5.1</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 5.2</a> <ul> <li> <a href='#'>စာေပဆိုင္ရာ 5.2 1</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 5.2 2</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 5.2 3</a> </li> </ul> </li> </ul> </li> <li> <a href='#'>စာေပဆိုင္ရာ 6</a> </li> </ul> <ul class='ddsubmenustyle' id='ddsubmenu3'> <li> <a href='#'>ေဆာ့၀ဲလ္ဆိုင္ရာ 1</a> </li> <li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရာ 2</a> </li> <li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရာ3</a> </li> <li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရာ 4</a> </li> <li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရာ 5</a> </li> </ul>

မွတ္ခ်က္  ။          ။  မိမိတို႕ လိုအပ္သလို ကုဒ္ေတြမွာ ကုလာကုဒ္ေတြ ေရာပါ ပါတယ္.. ဒါကို လိုအပ္သလို ႏွစ္သက္သလို ေျပာင္းလဲနိဳင္ပါတယ္
ေခါင္းစဥ္အမည္ေတြကိုေတာ့ ေသျခာ ၾကည့္ျပီး မိမိတို႕ စိတ္ၾကိဳက္ ဘေလာ့နဲ႕ကိုက္ညီေသာ ေခါင္းစဥ္မ်ားကို ထည့္သြင္းအစားထိုးေပးလိုက္ပါေနာ္... မ်က္စိရွဳပ္မသြားေစလိုပါဘူးးး  သူက အေပၚက ေခါင္းစဥ္ၾကီးေတြရဲ႕ DROP DOWN ေခါင္းစဥ္ခြဲေလးေတြကို ေအာက္မွာ သီးျခား ရွိထားတာေၾကာင့္ မ်က္စိလည္တတ္ပါတယ္...က်ေနာ္ ေပးထားေသာ ေခါင္းစဥ္ အမည္နဲ႕ ကိုက္ညီျပီး ဆိုင္ရာဆိုင္ရာ ေခါင္းစဥ္ကို အစားထိုးေပးလို္ကပါေနာ္....အဆင္ေျပပါေစ

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

Read more »

အလြယ္ကူဆုံးျဖစ္တဲ့ Easy Dropdown Menu ေလးလာျပီေနာ္..

အလြယ္ကူဆုံးျဖစ္တဲ့ Easy Dropdown Menu ေလးလာျပီေနာ္..

မဂၤလာပါ.... သည္ေန႕တင္တဲ့နည္းပညာေလးကေတာ့ ဘေလာ့တစ္ခု မွာ မရွိမျဖစ္ ဆိုသလို လိုအပ္ေနတဲ့

Tab Menu ဆိုတဲ့ ေခါင္းစဥ္ ဘားေလးဘဲျဖစ္ပါတယ္.. ဒါေလးကို က်ေနာ္တို႕ နည္းပညာေတြ မွ်ေ၀ၾကတဲ့ မိတ္ေဆြ တို႕အေနနဲ႕  လည္းႏွစ္သက္ၾကပါတယ္... Drop Down Menu လို႕ေခၚတဲ့  စတိုင္ေလးပါ... 

သည္စတိုင္ေလးကို   ဘယ္ Html ထဲကိုမွ ကုဒ္ေတြ ရွာ ကုဒ္ေတြ ထည့္ ဆိုတဲ့ အလုပ္ေတြနဲ႕ မလုပ္ဘဲ... 

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

ေအာက္မွာ လိုအပ္ေသ ာ ကုဒ္မ်ားႏွင့္အတူ   လုပ္ေဆာင္နည္းေတြကိုပါ ရွင္းျပလိုက္ပါတယ္..

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

ေအာက္မွာ ပုံေလးနဲ႕အတူ ရွင္းျပလိုက္ပါတယ္..ေနာ္..

မိမိဘေလာ့ LAYOUT ေရာက္တာနဲ႕ Add a Gadget ဆိုတာကိုကလစ္လိုက္ပါ

အေပၚကလို ဇယားေလးက်လာတာနဲ႕ အဲထဲက Html/Java Script ဆိုတာကလစ္လုိက္ပါ

ဒါဆို က်လာတဲ့ေဘာက္ေလးထဲမွာဘဲ ေအာက္ကေပးထားေသာကုဒ္ေတြကို ေကာ္ပီယူထည့္လုိက္ေပါ့။

          <script src='http://code.helperblogger.com/dd-level-menu.js' type='text/javascript'></script><style>/* ######### Drop Down Menu Bu HelperBlogger.com ######### */ /* ######### Matt Black Strip Main Menu Bar CSS ######### */ .ddsubmenustyle, .ddsubmenustyle div { /*topmost and sub DIVs, respectively*/ font: normal 13px Verdana; margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; background: white; border: 1px solid black; border-bottom-width: 0; visibility: hidden; z-index: 100; } .ddsubmenustyle ul { margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; border: 0px none; } .ddsubmenustyle li a { display: block; width: 170px; /*width of menu (not including side paddings)*/ color: black; background-color: lightyellow; text-decoration: none; padding: 4px 5px; border-bottom: 1px solid black; } * html .ddsubmenustyle li { /*IE6 CSS hack*/ display: inline-block; width: 170px; /*width of menu (include side paddings of LI A*/ } .ddsubmenustyle li a:hover { background-color: black; color: white; } .downarrowpointer { /*CSS for "down" arrow image added to top menu items*/ padding-left: 4px; border: 0; } .rightarrowpointer { /*CSS for "right" arrow image added to drop down menu items*/ position: absolute; padding-top: 3px; left: 100px; border: 0; } .ddiframeshim { position: absolute; z-index: 500; background: transparent; border-width: 0; width: 0; height: 0; display: block; } /* ######### Black Strip Main Menu Bar CSS ######### */ .mattblackmenu ul { margin: 0; padding: 0; font: bold 12px Verdana; list-style-type: none; border-bottom: 1px solid gray; background: #414141; overflow: hidden; width: 100%; } .mattblackmenu li { display: inline; margin: 0; } .mattblackmenu li a { float: left; display: block; text-decoration: none; margin: 0; padding: 6px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: white; background: #414141; } .mattblackmenu li a:visited { color: white; } .mattblackmenu li a:hover { background: black; /*background of tabs for hover state */ } .mattblackmenu a.selected { background: black; /*background of tab with "selected" class assigned to its LI */ } </style><div id="ddtopmenubar" class="mattblackmenu"> <ul> <li> <a href="မိမိဘေလာ့လိပ္စာထည့္ပါ">HOME</a> </li> <li> <a href="#" rel="ddsubmenu1">နည္းပညာဆိုင္ရာ</a> </li> <li> <a href="#" rel="ddsubmenu2">စာေပဆိုင္ရာ</a> </li> <li> <a href="#">အက်ိဳးေဆာင္လုပ္ငန္းမ်ား</a> </li> <li> <a href="#" rel="ddsubmenu3"> ေဆာ့၀ဲလ္ဆိုင္ရာ</a> </li> <li> <a href="#">ရည္ရြယ္ခ်က္</a> </li> <li> <a href="#">ဘာသာေရး</a> </li> <li> <a href="#">ဆက္သြယ္ရန္</a> </li> </ul> </div> <script type="text/javascript"> ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") </script><ul class='ddsubmenustyle' id='ddsubmenu1'> <li> <a href='#'>နည္းပညာဆိုင္ရာ1</a> </li> <li> <a href='#'>နည္းပညာဆိုင္ရာ 2</a> <ul> <li> <a href='#'>နည္းပညာဆိုင္ရာ2.1</a> </li> <li> <a href='#'>နည္းပညာဆိုင္ရာ 2.2</a> </li> </ul> </li> <li> <a href='#'>နည္းပညာဆိုင္ရာ 3</a> <ul> <li> <a href='#'>နည္းပညာဆိုင္ရာ 3.1</a> </li> </ul> </li> <li> <a href='#'>နည္းပညာဆိုင္ရာ4</a> </li> </ul> <ul class='ddsubmenustyle' id='ddsubmenu2'> <li> <a href='#'>စာေပဆိုင္ရာ 1</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ2</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 3</a> <ul> <li> <a href='#'>စာေပဆိုင္ရာ 3.1</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 3.2</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 3.3</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 3.4</a> </li> </ul> </li> <li> <a href='#'>စာေပဆိုင္ရာ 4</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 5</a> <ul> <li> <a href='#'>စာေပဆိုင္ရာ 5.1</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 5.2</a> <ul> <li> <a href='#'>စာေပဆိုင္ရာ 5.2 1</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 5.2 2</a> </li> <li> <a href='#'>စာေပဆိုင္ရာ 5.2 3</a> </li> </ul> </li> </ul> </li> <li> <a href='#'>စာေပဆိုင္ရာ 6</a> </li> </ul> <ul class='ddsubmenustyle' id='ddsubmenu3'> <li> <a href='#'>ေဆာ့၀ဲလ္ဆိုင္ရာ 1</a> </li> <li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရာ 2</a> </li> <li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရာ3</a> </li> <li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရာ 4</a> </li> <li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရာ 5</a> </li> </ul>

မွတ္ခ်က္  ။          ။  မိမိတို႕ လိုအပ္သလို ကုဒ္ေတြမွာ ကုလာကုဒ္ေတြ ေရာပါ ပါတယ္.. ဒါကို လိုအပ္သလို ႏွစ္သက္သလို ေျပာင္းလဲနိဳင္ပါတယ္
ေခါင္းစဥ္အမည္ေတြကိုေတာ့ ေသျခာ ၾကည့္ျပီး မိမိတို႕ စိတ္ၾကိဳက္ ဘေလာ့နဲ႕ကိုက္ညီေသာ ေခါင္းစဥ္မ်ားကို ထည့္သြင္းအစားထိုးေပးလိုက္ပါေနာ္... မ်က္စိရွဳပ္မသြားေစလိုပါဘူးးး  သူက အေပၚက ေခါင္းစဥ္ၾကီးေတြရဲ႕ DROP DOWN ေခါင္းစဥ္ခြဲေလးေတြကို ေအာက္မွာ သီးျခား ရွိထားတာေၾကာင့္ မ်က္စိလည္တတ္ပါတယ္...က်ေနာ္ ေပးထားေသာ ေခါင္းစဥ္ အမည္နဲ႕ ကိုက္ညီျပီး ဆိုင္ရာဆိုင္ရာ ေခါင္းစဥ္ကို အစားထိုးေပးလို္ကပါေနာ္....အဆင္ေျပပါေစ

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

♥ မွ်ေ၀သူ ♥ ဘေလာ့ခရီးသည္

♥ သင့္အျမင္ ♥

Read more »

Tab Menu Circle Style လွလွေလးေနာ္

Tab Menu Circle Style လွလွေလးေနာ္

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

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ..
►5- Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

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

/* The CSS Code for the menu starts here s2free.blogspot.com */ <style type="text/css"> .circlemenu{ width: 100%; overflow:hidden; } .circlemenu ul{ margin: 0; padding: 0; font: bold 14px Verdana; list-style-type: none; text-align: center; } .circlemenu li{ display: inline; margin: 0; } .circlemenu li a{ display:inline-block; text-align:center; text-decoration: none; color: white; background:#b30707; margin: 0; margin-right:5px; width:100px; height:100px; border-radius: 400px; -moz-border-radius: 400px; -webkit-border-radius: 400px; } .circlemenu a span{ position:relative; top:40%; } .circlemenu li a:visited{ color: white; } .circlemenu a:hover{ background: #ff1774; } </style>

ထည့္ျပီး ေဆ့လို႕ရပါျပီ... တစ္ခု အၾကံျပဳပါရေစ...

 ေနာက္တဆင့္အေနနဲ႕ကေတာ့......
ဘေလာ့ကာကို၀င္လိုက္ပါ.. Layout  ကိုသြား Add a gadget  ကိုကလစ္ပါ...

 html/java script  ကိုကလစ္ က်လာတဲ့ေဘာက္မွာ ေအာက္ကကုဒ္ေတြထည့္လိုက္ပါ..

<div class="circlemenu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="h#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="http://www.s2free.blogspot.com/"><span>Contact Us</span></a></li>
</ul>
</div>

မိမိတို႕ လိုသေလာက္ တိုးနိဳင္ပါတယ္...ပြါးးနိဳင္ပါတယ္..

  မွတ္ခ်က္အေနနဲ႕ ေျပာျခင္တာကေတာ့........။       ။.........ကုဒ္ထဲမွာ ၾကည့္လိုက္ပါ ..ေနာ္

width  100px

hight  100px ဆိုတာေတြကမယ္..အဲတာ  မိမိတို႕ မယ္ညဳ botton ေလးရဲ႕ အရြယ္အစားပါ...အဲတာကို အရမ္းၾကီးေနရင္
သည္ေနရာျပန္၀င္ျပီး  ျပဳျပင္ေပးလိုက္ပါ...ေလွ်ာ့ခ်ျပီး  Preview Template နဲ႕ျပန္ျပန္ၾကည့္ရင္း
စိတ္ၾကိဳက္ အရြယ္ရလာတာနဲ႕ ေဆ့နိဳင္ပါတယ္...တျခား ေနာက္ခံကာလာေတြ  ၀ိတ္ေတြလဲ ျပဳျပင္နိဳင္တာေတြပါပါတယ္.... ကုဒ္ထဲမွာ ေသချာ ၾကည့္ျပီး  ေလ့လာ လုိက္ပါေနာ္..
အဆင္ေျပပါေစ

<<<တာ၀န္မေလးပါကတခ်က္ေလာက္ကလစ္ေပးခဲ့ေစလို>>>

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

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

Read more »

ဘေလာ့မွာ လွပေသာ Vertical Navigation Menu လုပ္နည္း

ခုတင္မွာေလးကေတာ့..TAB MENU ေလးတစ္မ်ိဳးပါ ..Vertical Navigation Menu လို႕ေခၚပါတယ္....

ေအာက္ကတိုင္း လုပ္ၾကည့္ပါေနာ္..

အဆင့္  (၁)  ။               ။   သြားၾကမယ္ေနာ္  ေအာက္ကအတိုင္း

(1)-   ဘေလာ့ကာ၀င္ပါ  Dashboard > Template> Edit HTML  အစဥ္လုိက္သြားလိုက္ပါ။

(2)-    the Expand Widget ေနရာမွ အမွန္ျဖစ္ခဲ့ေပးပါ။

(3)-    Ctrl + F  အကူညီျဖင့္ ေအာက္ကကုဒ္ကို ရွာလိုက္ပါ။

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

#page_paramsInspector-shell .tabShell { width:480px; } #page_paramsInspector-shell .tabShell { width:480px; } #page_paramsInspector_settings { width:400px; height:286px; font-size:12px; } #page_paramsInspector_preview { width:466px; } .menuLinks { position:relative; width:200px; background:#364040; padding:10px; padding-bottom:5px; } .menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active { display:block; font-size:12px; text-transform:uppercase; font-weight:bold; text-align:center; letter-spacing:4px; color:#bbb; background:#000; border:2px solid #000; width:182px; padding:5px 7px; margin-bottom:5px; text-decoration:none; overflow:hidden; }

အဆင့္ (၂)    ။    ။  ေနာက္ထပ္  <head>  ဆိုတဲ့ ကုဒ္ကို ထပ္ရွာလိုက္ပါ။
                         ေတြ႕တာနဲ႕ ေအာက္ကကုဒ္ေတြကို သူ႕ ေနာက္က ကပ္ထည့္ေပးပါ။

 

<script src='https://dl.dropbox.com/u/24344387/How%20Do%20Blog/

UIZE-JavaScript-Framework/js/Uize.js' type='text/javascript'/>     

အဆင့္  (၃)  ။     ။ ေအာက္က အတိုင္း ေပးထားေသာကုဒ္မ်ားကို ထည့္လိုက္ပါ။
    1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို   

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

<script type="text/javascript">Uize.module ({

 required:[

 'UizeDotCom.Page.Example.library',

 'UizeDotCom.Page.Example',

 'Uize.Widget.HoverFader',

 'Uize.Curve.Rubber',

 'Uize.Fx.xShadows'

 ],

 builder:function () {

 /*** create the example page widget ***/

 var page = window.page = UizeDotCom.Page.Example ();



 /*** create the hover fader instance ***/

 page.addChild (

 'hoverFader',

 Uize.Widget.HoverFader,

 {

 nodes:{className:/\bmenuLink\b/},

 defaultStyle:{marginLeft:0,marginTop:0,

 color:'f',borderColor:'#9F9797',

 backgroundColor:'044',

 textShadow:'-3 0 3 #0,3 0 3 #0,#0ff -30 0 .5em,#0ff 30 0 .5em,#0f0 -20 0 1em,#0f0 20 0 1em'

 },

 hoverStyle:{marginLeft:5,marginTop:5,borderColor:'0',

 color:'8',

 backgroundColor:'000',

 textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'

 },

 fadeIn:{duration:350},

 fadeOut:{duration:1000}

 }

 );



 /*** wire up the page widget ***/

 page.wireUi ();

 }

});



</script>



<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">

 <tr valign="top">

 <td>

 <div>

 <div style="left:20px; top:0px;">

 <a href=" YOUR_PAGE_URL " style="

 textShadow:0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em;">About Us</a>

 </div>

 <div style="left:77px; top:93px;">

 <a href=" YOUR_PAGE_URL " style="background:#0;">Products</a>

 </div>

 <div style="left:176px; top:17px;">

 <a href=" YOUR_PAGE_URL " style="background:#0;">Services</a>

 </div>

 <div style="left:232px; top:158px;">

 <a href=" YOUR_PAGE_URL " style="background:#0;">Technology</a>

 </div>

 <div style="left:319px; top:-8px;">

 <a href=" YOUR_PAGE_URL " style="background:#0;">Solutions</a>

 </div>

 <div style="left:390px; top:73px;">

 <a href=" YOUR_PAGE_URL " style="background:#0;">My Account</a>

 </div>

 <div style="left:506px; top:-3px;">

 <a href=" YOUR_PAGE_URL " style="background:#0;">Store Locator</a>

 </div>

 <div style="left:559px; top:90px;">

 <a href=" YOUR_PAGE_URL " style="background:#0;">Investors</a>

 </div>

 <div style="left:42px; top:176px;">

 <a href=" YOUR_PAGE_URL " style="background:#0;">Support</a>

 </div>

 <div style="left:447px; top:176px;">

 <a href="YOUR_PAGE_URL" style="background:#0;">Contact Us</a>

 </div>

 </div>

 </td>

 <td id="page_paramsInspector-shell"></td>

 </tr>

 </table>   

မွတ္ခ်က္ ။     ။

YOUR_PAGE_URL  ဆိုတဲ့ေနရာမွာ မိမိတို႕ ရဲ႕ url ကိုထည့္ေပးရမွာ ျဖစ္ပါတယ္....

 Products-Services-Technology    စတဲ့ စာသားေနရာေတြမွာေတာ့ မိမိတို႕ ဘေလာ့ရဲ႕ ေခါင္းစဥ္ေတြကို 

ထည့္ေပးလိုက္ပါ.............ဥပမာ  ။    ။  ကဗ်ာ-သုတ-ဘာသာေရး   စသျဖင့္ေပါ့။

သည္ေလာက္ဆို အဆင္ေျပမွာပါေနာ္...

ေပ်ာ္ရႊင္ပါေစ

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

www.aungsanmks.blogspot.com

www.ledimyethar.com 

Read more »

အလြယ္ကူဆုံး Add Elemic Light-Dark SkyBlue Menu ( မိုးျပာေရာင္ )

မဂၤလာပါ  ဘေလာ့ခ်စ္ေသာပရိတ္သတ္အေပါင္းတို႕... သည္ေန႕ ေရးျဖစ္တဲ့ အေၾကာင္းရာေလးကေတာ့

ဘေလာ့တစ္ခုမွာ မရွိမျဖစ္ လိုအပ္ခ်က္ျဖစ္တဲ့  ေခါင္းစဥ္လို႕ ေခၚတဲ့ Menu ေလးေတြ ဖန္တီးနည္းပါ။

သည္နည္းေလးကို အလြယ္ဆုံးနဲ႕ မရွင္းဆုံး ျဖစ္ေအာင္ ေရးသား တင္ျပေပးထားပါတယ္... သူကေတာ့

Animated ပုံစံေလးနဲ႕ တမ်ိဳးေတာ့ လွပါတယ္... စိတ္၀င္စားမယ္ဆို ေအာက္မွာ လုပ္နည္းနဲ႕  လိုအပ္ေသာ

ကုဒ္ေတြကို ညႊန္ျပ ရွင္းလင္းထားပါတယ္... အရမ္းလြယ္ကူပါတယ္...

နည္းလမ္းကေတာ့

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

ေနာက္ က်လာေသာ ေဘာက္ထဲကေန ေအာက္ကပုံတိုင္းေရြးလိုက္ပါ

အိုေက ဒါဆို ေအာက္မွာ ေပးထားေသာ ဇယားထဲကကုဒ္ေတြ ကိုယူထည့္ေပးလုိက္ပါ..

                    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvRDVpJiEhrQdmAUivAaSKjPL8POap71-eNa9gLnwcs_qi1rDno-fOcWj-e7NIfRdKU_eL2IYlOZN6CplOrfCZSEBEuogLEn2MkytK4AGFmBuwqTl6cvFjt1EWmPfBvccMN5NFCkB0QTQ/s1600/netoops-menu-blogger+skyblue.png") repeat scroll 0 0 transparent !important; border: 1px solid #138F93 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio9AM4koZK-QwYK5WPtYDMeg1IGP25Amr9r6j-SjkA3_mVMFlNAyBjmYSBFgw9QF4d6wdDJF8iMHt2yD43zDAoi42_rKOb2WqgyB1N8rTSN7YSPxU2wWg7S0xRxlkJDafJX7K7E46ovrw/s1600/1x1juice.png" /></a> <div class="noop-menu-skyblue"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Tips</a></li> <li><a href="#">Tricks</a></li> <li><a href="#">About</a></li> </ul> </div>

နမူနာၾကည့္ရန္ ကလစ္ပါ

မွတ္ ခ်က္  ။               ။ ေခါင္းစဥ္ေတြမွာ  မိမိတို႕ တပ္လိုေသာ ေခါင္းစဥ္အမည္နဲ႕..လင့္ခ်ိတ္ဖို႕ ဆိုတာ
                                 ရွိပါတယ္...    နမူနာအေနနဲ႕  တစ္ခုျပပါ့မယ္....
<li><a href="#">Home</a></li>  သည္လင့္မွာ ဆို Home ဆိုတာမွာ  ( မူလစာမ်က္ႏွာ) စသျဖင့္
ေျပာင္းလဲနိဳင္ပါတယ္.. လင့္ကိုေတာ့ မူရင္း မိမိဘေလာ့ရဲ႕ လိပ္စာ ကို # ေနရာေလးမွာ အစားထိုးေပးရပါမယ္... တျခားေခါင္းစဥ္မ်ားကိုေတာ့ သက္ဆိုင္ရာ ေခါင္းစဥ္ရဲ႕ လင့္နဲ႕ လင့္ခ်ိတ္ ေပးသြားရမွာ ျဖစ္ပါတယ္ေနာ္....... အဆင္ေျပပါေစ...

လင့္ခ်ိတ္နည္းမသိပါက    သည္ေနရာမွာ      ေလ့လာနိဳင္ပါတယ္။

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

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ

လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ

စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

Read more »