Blogger Labels ေတြကို Scorrl Bar ေလးနဲ႕ထားနည္း

 မဂၤလာပါ  ဘေလာ့မိတ္ေဆြအေပါင္းးတို႕....သည္တခါတင္မဲ့ နည္းလမ္းေလးကေတာ့  ဘောလ့ကာ မ်ားးအတြက္ အေတာ္ေလးကိုအသုံး၀င္ျပီး  ထိေရာက္ေစတဲ့နည္းပညာေလးပါ...ဘာလဲဆိုေတာ့

က်ေနာ္တို႕ ဘေလာ့ကာေတြမွာ Labels  ေတြမ်ားပ်ားလာတာနဲ႕အမွ် ေနရာအခက္ခဲေတြ႕ေနၾကရပါတယ္.

အဲအတြက္  ေလဘယ္ေတြကို  cloud  ထားၾကရျပန္တယ္.အဲလို ထားျပန္ေတာ့ ေလဘယ္  ေတြက

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

ေလဘယ္ေတြ အရမ္းမ်ားေနေတာ့မွ  ျပန္သတိယတယ္... သိမ္းးထားတာ မနည္းလုိက္ရွာယူရတယ္...

လက္ေတြ႕က်က် စမ္းသတ္ေပးျပီး  မွျပန္လည္ မွ်ေ၀ျခင္းပါ ယုံၾကည္စြာ  အသုံးျပဳ နိုႈ္ပါတယ္...ေနာ္

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

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

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

#Label1 ul{
max-height:500px;
overflow:auto;
}
#Label1 ul::-webkit-scrollbar {
height:12px;
width: 12px;
background: #333;}
::-webkit-scrollbar-thumb {
background-color: #ccc;
-moz-border-radius: 10px;
border-radius: 10px;
}

ကုဒ္ထဲမွာ  max-height:500px; ဆိုတာမွာ အေပၚေအာက္ လိုသေလာက္ နံပါတ္ ခ်ိန္းပါ။

 Preview Template နဲ႕ၾကည့္ေပးပါ စိတ္ၾကိဳက္ျပီဆိုမွ ေဆ့ပါ....

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

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

ဘေလာ့ခရီးသည္ 

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

Read More

အလြယ္ကူဆုံး Add Elemic Grape Purple Menu ( Grape Purple )

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

ဘေလာ့တစ္ခုမွာ မရွိမျဖစ္ လိုအပ္ခ်က္ျဖစ္တဲ့  ေခါင္းစဥ္လို႕ ေခၚတဲ့ 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/AVvXsEizrA6FkN7VGQFc_hgpTe1m8yKwKVOyncMu9EX_ayaXuU1ZCjx7u9PdeHZJNHUW9UBSU4dJUy7NrsqyRssjuC1rBn_2-9mc9LH468p96XclmK5FUa-aBgnqSEPVWLXFarOG5bCIAGQ6cgE/s1600/netoops-menu-blogger+purple.png") repeat scroll 0 0 transparent !important; border: 1px solid #7D0FAF !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/AVvXsEjSkQf6Zsv2DksOkzzDRmGSNZ8kwub7IJZiaqvaVcvmJ2645uRjMb0wKKF5E8b58WBeDampQ6P_pwSz8cdV-JZVINykiwO_Ip6JBm0LfKOYQd3ETY42tUkiUVgArsCdc3dwrBmZ74tGq1A/s1600/1x1juice.png" /></a> <div class="noop-menu-purple"> <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

အလြယ္ကူဆုံး 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/AVvXsEhDlaSf7jX2WFwR4iIhP3bICReqfyHjPfLhvahAA9CbunI1b67LghDJUMAMY4XxmJuTKV8AtU_4AZrwWsG8UNulUTJDZ-J8a4tLJ7DIm1omsq2n7mjeiM_5YDuXEiJB3jAVy3x88HwNQSA/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/AVvXsEjSkQf6Zsv2DksOkzzDRmGSNZ8kwub7IJZiaqvaVcvmJ2645uRjMb0wKKF5E8b58WBeDampQ6P_pwSz8cdV-JZVINykiwO_Ip6JBm0LfKOYQd3ETY42tUkiUVgArsCdc3dwrBmZ74tGq1A/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

Dropdown Menu စတိုင္ လွလွေလးမ်ား ( အလြယ္တကူထည့္နိဳင္)

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

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

ေအာင္ ဖန္တီးထားပါတယ္... မူရင္း http://24work.blogspot.com/  ကေန မွ်ေ၀ျခင္းျဖစ္ပါတယ္

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

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

 ပုံစံ  ( ၁ ) 

 

 နမူနာၾကည့္ရန္   သည္မွာ   သြားလုိက္ပါ

            <style type="text/css">#cssmenu{border:1px solid #b9121b;background:#b9121b}#cssmenu > ul{padding:1px 0;margin:0;list-style:none;width:100%;height:21px;border-top:1px solid #FFF;border-bottom:1px solid #FFF;font:normal 8pt verdana,arial,helvetica}#cssmenu > ul li{margin:0;padding:0;display:block;float:left;position:relative;width:148px}#cssmenu > ul li a:link,#cssmenu > ul li a:visited{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#b9121b;color:#fff;width:148px;height:13px}#cssmenu > ul li:hover a,#cssmenu > ul li a:hover,#cssmenu > ul li a:active{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#ec454e;color:#fff;width:146px;height:13px;border-left:1px solid #fff;border-right:1px solid #fff}#cssmenu > ul li ul{margin:0;padding:1px 1px 0;list-style:none;display:none;background:#fff;width:146px;position:absolute;top:21px;left:-1px;border:1px solid #b9121b;border-top:none}#cssmenu > ul li:hover ul{display:block}#cssmenu > ul li ul li{clear:left;width:146px}#cssmenu > ul li ul li a:link,#cssmenu > ul li ul li a:visited{clear:left;background:#b9121b;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li:hover a,#cssmenu > ul li ul li a:active,#cssmenu > ul li ul li a:hover{clear:left;background:#ec454e;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li ul.navigation-3{display:none;margin:0;padding:0;list-style:none;position:absolute;left:145px;top:-2px;padding:1px 1px 0 1px;border:1px solid #b9121b;border-left:1px solid #b9121b;background:#fff;z-index:900}#cssmenu > ul li ul li:hover ul.navigation-3{display:block}#cssmenu > ul li ul li ul.navigation-3 li a:link,#cssmenu > ul li ul li ul.navigation-3 li a:visited{background:#b9121b}#cssmenu > ul li ul li ul.navigation-3 li:hover a,#cssmenu > ul li ul li ul.navigation-3 li a:hover,#cssmenu > ul li ul li ul.navigation-3 li a:active{background:#ec454e}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

 ပုံစံ  ( ၂ ) 

 ပု့စံ ( ၂ ) အားနမူနာ ၾကည့္ရန္    သည္မွာ   သြားလိုက္ပါ

            <style type="text/css">#cssmenu{border:1px solid #009;background:#009}#cssmenu > ul{padding:1px 0;margin:0;list-style:none;width:100%;height:21px;border-top:1px solid #FFF;border-bottom:1px solid #FFF;font:normal 8pt verdana,arial,helvetica}#cssmenu > ul li{margin:0;padding:0;display:block;float:left;position:relative;width:148px}#cssmenu > ul li a:link,#cssmenu > ul li a:visited{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#009;color:#fff;width:148px;height:13px}#cssmenu > ul li:hover a,#cssmenu > ul li a:hover,#cssmenu > ul li a:active{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#06F;color:#fff;width:146px;height:13px;border-left:1px solid #fff;border-right:1px solid #fff}#cssmenu > ul li ul{margin:0;padding:1px 1px 0;list-style:none;display:none;background:#fff;width:146px;position:absolute;top:21px;left:-1px;border:1px solid #009;border-top:none}#cssmenu > ul li:hover ul{display:block}#cssmenu > ul li ul li{clear:left;width:146px}#cssmenu > ul li ul li a:link,#cssmenu > ul li ul li a:visited{clear:left;background:#009;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li:hover a,#cssmenu > ul li ul li a:active,#cssmenu > ul li ul li a:hover{clear:left;background:#06F;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li ul.navigation-3{display:none;margin:0;padding:0;list-style:none;position:absolute;left:145px;top:-2px;padding:1px 1px 0 1px;border:1px solid #009;border-left:1px solid #009;background:#fff;z-index:900}#cssmenu > ul li ul li:hover ul.navigation-3{display:block}#cssmenu > ul li ul li ul.navigation-3 li a:link,#cssmenu > ul li ul li ul.navigation-3 li a:visited{background:#009}#cssmenu > ul li ul li ul.navigation-3 li:hover a,#cssmenu > ul li ul li ul.navigation-3 li a:hover,#cssmenu > ul li ul li ul.navigation-3 li a:active{background:#06F}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

ပုံစံ  ( ၃ ) 

ပုံစံ (၃) အားနမူနာၾကည့္ရန္  သည္မွာ   သြားလိုက္ပါေနာ္။

           <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Capriola);/* Let's import the lovely google font,please keep this line at the top of your stylesheet *//* Menu CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{zoom:1;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcUu68Rc9iL0cWqkEe9C3rxyn1TTsOQpV-Eagzhwmf_Gs0swHGilk0n24FcY0liel2Yy8vJPsN3CqUGbqABcbIxqdyrkxAz8Vomh5SgOblO4bcfEG8uqM7V7DCttWDuK-BS6QaXHeRlca/s1600/bottom-bg.png) repeat-x center bottom;border-radius:2px;width:auto}#cssmenu ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZByH4XzpcGiL9ICBQj7i0FOCXi06lvPE8SsGuywQBOxYnkJnVWODibQjtvgUm-J2snfGBshQQjGhTmkd0ScoUFifNqIIxaEkJW36i8miajjrMbBRhtoSOVnxAV4KY6Uu4CTKJ3hiMwpiL/s1600/nav-bg.png) repeat-x 0 4px;height:69px}#cssmenu ul li{float:left;list-style:none}#cssmenu ul li a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 0;border-radius:2px 2px 0 0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-HJDwe3uZOivvEy8qCuqsQtEguG5AzJhrK6QlZ9qVL_akdBryk4Z4uEX7khnl7W8McKImPPX77VPLOIdBBD9SIoKWz3T8ig5RTydhH_Im11FftsOOZ9lAaIgJUtkZRSm-nc5u-rH91Al-/s1600/color.png) center bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#004f7c;text-shadow:0 1px 1px rgba(255,255,255,0.55);opacity:1}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li><a href="#"><span>Products</span></a></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>


မွတ္ခ်က္  ။                ။ ကုဒ္မွာပါေသာ ေခါင္းစဥ္အမည္မ်ားကို ၾကိဳက္သလို ျပဳျပင္ပါေနာ္..

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

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

Read More

Calleria တက္ပလက္ လွလွေလးလာျပီ ( စာအုပ္ဆိုဒ္မ်ားအတြက္ )

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

 

                         အစမ္းၾကည့္ရန္                                        ေဒါင္းေလာ့ယူရန္

                                                မူရင္းလင့္သည္ေနရာေလးပါ

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

<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>

ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။

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

Read More

Blog Template မ်ား၏ width အား ခ်ဲ႕ျခင္း/ခ်ံဳ႕ျခင္း

အားလုံးမဂၤလာပါခင္ဗ်ာ..။ အေၾကာင္းအေၾကာင္းအမ်ိဳးမ်ိဳးေၾကာင့္ ပုိ႔စ္အသစ္ေတြ မတင္ႏုိင္တဲ့အတြက္ လာလည္ၾကသူ မိတ္ေဆြအေပါင္းအား အလြန္ပဲ အားနာမိပါတယ္ခင္ဗ်ာ..။ အခုလည္း မအားတဲ့ၾကားကပဲ ေတာင္းဆုိထားတဲ့သူမ်ားအတြက္ ဘေလာ့မွာ width ကုိ မိမိတုိ႔လုိသလုိ ခ်ဲ႕ႏုိင္/ခ်ံဳ႕ႏုိင္ေအာင္ ဒီပုိ႔စ္ေလးကုိ ေရးသားလုိက္ရပါတယ္။ မိမိနားလည္သလုိ တင္ျပထားျခင္းျဖစ္တဲ့အတြက္ အားနည္းခ်ိဳ႕ယြင္းခ်က္မ်ားရွိပါက နားလည္ခြင့္လႊတ္ေပးၾကပါလုိ႔ ဦးစြာေတာင္းပန္အပ္ပါတယ္။ လုိအပ္ခ်က္မ်ားရွိခဲ့ရင္လည္း ျဖည့္စြက္ေပးၾကေစလုိပါတယ္။

ဘေလာ့ရဲ႕ width ကုိခ်ဲ႕ျခင္း/ခ်ံဳ႕ျခင္းျပဳလုပ္ဖုိ႔အတြက္ သူ႔ရဲ႕ အေျခခံသေဘာတရားေလးကုိေတာ့ သိဖုိ႔လုိအပ္ပါတယ္။ ဒါမွသာ မိမိတကယ္ ျပင္ဆင္တဲ့အခါ နားလည္လြယ္မွာျဖစ္ပါတယ္။ ဒါေၾကာင့္ Template ကုိ အၾကမ္းဖ်ဥ္းအားျဖင့္ header-wrapper ၊ outer-wrapper နဲ႔ footer ဆုိၿပီး (၃)ပုိင္း ပုိင္းျခားထားေၾကာင္းကုိ သိထားရပါ့မယ္။ အဲဒီ (၃)ပုိင္းစလုံးရဲ႕ width ေတြကလည္း တူညီေနရပါ့မယ္။ ဥပမာ.. header-wrapper ရဲ႕ width က 980px ဆုိရင္ outer-wrapper နဲ႔ footer တုိ႔ရဲ႕ width ေတြကလည္း 980px စီပဲ ရွိၾကရပါမယ့္။ ဒါမွသာ အခ်ိဳးညီလွပတဲ့ Template တစ္ခု ျဖစ္ပါလိမ့္မယ္။

header-wrapper = outer-warpper = footer

အဲဒီ အပုိင္းႀကီး(၃)ပုိင္းအနက္ outer-wrapper အေၾကာင္းကုိ ထပ္ေျပာပါ့မယ္။ outer-warpper ဆုိတာကေတာ့  main-wrapper နဲ႔ sidebar-wrapper ႏွစ္ခုကုိ ေပါင္းထားတာပဲျဖစ္ပါတယ္။ သေဘာကေတာ့ outer-wrapper ရဲ႕ width ဟာ main-wrapper နဲ႔ sidebar-wrapper ႏွစ္ခုေပါင္းတာနဲ႔ ညီပါတယ္။

ဥပမာ...

outer-wrapper = 980px ဆုိပါက..

main-wrapper + sidebar-wrapper = 980px ျဖစ္ရပါမယ္။

outer-wrapper = main-wrapper + sidebar-wrapper (sidebar တစ္ခုသာပါသည့္ template မ်ားအတြက္)

outer-wrapper = main-wrapper + right-sidebar-wrapper + left-sidebar-wrapper (sidebar ႏွစ္ခုပါသည့္ template မ်ားအတြက္)

ဒါေပမယ့္ main-wrapper နဲ႔ sidebar-wrapper ႏွစ္ခုအၾကားမွာေတာ့ margin ေတာ့ထားေပးရပါတယ္။ တစ္ခုနဲ႔တစ္ခု ထိစပ္ေနရင္ ၾကည့္ရတာလည္း အဆင္ေျပမွာမဟုတ္ပါဘူး.။ ဒါေၾကာင့္ margin အတြက္ 30px, 40px.. စသည္ျဖင့္ ထားေပးရပါတယ္။ ေအာက္မွာ ေပးထားတဲ့ နမူနာပုံေလးေတြကုိၾကည့္ၾကပါခင္ဗ်ာ..။

အေပၚကပုံေတြကုိၾကည့္မယ္ဆုိရင္...

Sidebar တစ္ခုသာပါတဲ့ Template အတြက္..

Main + margin + sidebar = outer

640px + 30px + 310px = 980px

Sidebar ႏွစ္ခုပါတဲ့ Template အတြက္

left-sidebar + margin + main + margin + right-sidebar = outer

200px         + 30px   +520px + 30px + 200px             = 980px

ဒါဆုိရင္ေတာ့ Template ရဲ႕အေျခခံသေဘာတရားကုိ နားလည္ေလာက္ၿပီလုိ႔ထင္ပါတယ္။ အခု မိမိတုိ႔ရဲ႕ Template width ေတြကုိ လုိအပ္သလုိျပင္ၾကည့္ၾကရေအာင္..။ မူလက 980px ရွိတဲ့ Sidebar (၂)ခုပါ Template ကုိ 1200px အျဖစ္ ျပင္ၾကည့္ပါမယ္..။ 

မိမိတုိ႔ရဲ႕ဘေလာ့မွာ sign in လုပ္ၿပီး Design ေအာက္က Edit HTML ကုိသြားပါ။ ထုံးစံအတုိင္း Download Full Template လုပ္ၿပီး မိမိတုိ႔ရဲ႕ ဘေလာ့ကုိ backup လုပ္ထားလုိက္ပါ။

Ctrl + F နဲ႔ “#header-wrapper”, “#outer-wrapper”, “#main-wrapper”, and “#footer” ဆုိတဲ့ code ေတြကုိရွာပါ..

#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 980px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 520px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#right-sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#footer {
width:980px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

980px ရွိတဲ့ Template ကုိ 1200px အထိခ်ဲ႕မွာ ျဖစ္တဲ့အတြက္ အေပၚက code ေတြထဲက header-wrapper, outer-wrapper, footer တုိ႔ရဲ႕ width ေတြကုိ 1200px လုိ႔ျပင္လုိက္ပါ့မယ္။


outer-wrapper ရဲ႕ width ဟာ 1200px ျဖစ္သြားၿပီးျဖစ္တဲ့အတြက္ main-wrapper နဲ႔ sidebar (2)တုိ႔ရဲ႕ width စုစုေပါင္းကုိလည္း 1200px ျဖစ္ေအာင္ ျပင္ေပးရပါ့မယ္။ sidebar ေတြရဲ႕ width ဟာ မိမိဘေလာ့ရဲ႕ လုိအပ္ခ်က္နဲ႔ ကုိက္ညီၿပီးသားဆုိရင္ေတာ့ ျပင္စရာမလုိပါဘူး။ အကယ္၍ မကုိက္ဘူးဆုိရင္ေတာ့ ေျပာင္းေပးႏုိင္ပါတယ္။ မူလ sidebar ရဲ႕ 200px ကုိ 220px အထိ္ခ်ဲ႕ခ်င္တယ္ ဆုိပါစုိ႔ ။ ဒါဆုိရင္ 1200 ထဲက ေန margin (၂)ခုအတြက္ 60 (30px + 30px) ကုိဖယ္ၿပီး ေအာက္ပါအတုိင္းေျပာင္းေပးရပါမယ္။ ဒါမွသာ စုစုေပါင္း 1200 px ျဖစ္ပါလိမ့္မယ္။

main-wrapper=700px
left-sidebar=220px
right-sidebar =220px

အားလုံး ေျပာင္းၿပီးသြားရင္ေတာ့ save မလုပ္ေသးဘဲ preview အရင္ၾကည့္ပါ။ အဆင္ေျပတယ္ဆုိမွသာ Save လုပ္ပါ။

Template ခ်ဲ႕ျခင္း/ခ်ံဳ႕ျခင္းအတြက္ကေတာ့ ဒီေလာက္ဆုိရင္ အနည္းငယ္ အေထာက္အကူျဖစ္ၿပီလုိ႔ ယူဆပါတယ္။ မရွင္းလင္းတဲ့အခ်က္အလက္မ်ားရွိရင္လည္း ေဆြးေႏြးေမးျမန္းႏုိင္ၾကပါတယ္။ တစ္လက္စတည္း ဒီပုိ႔စ္ေလးနဲ႔ ဆက္စပ္ေနတဲ့ မိမိတုိ႔ဘေလာ့ header banner ပုံေလးကုိ မိမိတုိ႔စိတ္ႀကိဳက္ ပုံေလးေတြနဲ႔ အစားထုိးတဲ့အေၾကာင္းကုိ ေျပာခ်င္ပါတယ္။ အခ်ိဳ႕ေသာ ဘေလာ့ေတြမွာ Header Banner ပုံေတြ အခ်ိဳးမက်တာကုိ ေတြ႕ေနရပါတယ္။ ဘာေၾကာင့္လဲဆုိေတာ့ မိမိဘေလာ့ Header ရဲ႕ width နဲ႔ မိမိအစားသြင္းမယ့္ banner ပုံရဲ႕ width တုိ႔ မကုိက္ညီတာေၾကာင့္ပဲျဖစ္ပါတယ္။ ဒါေၾကာင့္ မိမိဘေလာ့ရဲ႕ Header width က 1200px ဆုိရင္ မိမိအစားသြင္းမယ့္/အသုံးျပဳလုိတဲ့ Header image ရဲ႕ width ကုိလည္း 1200px ျဖစ္ေအာင္ photoshop လုိ image editor တစ္ခုခုကုိအသုံးျပဳႏုိင္ၾကပါတယ္။ အားလုံးအဆင္ေျပ ေပ်ာ္ရႊင္ခ်မ္းေျမ့ၾကပါေစခင္ဗ်ာ.......။

Guest post by - IT-Traveller

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

<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>

ဘေလာ့ခရီးသည္   ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။

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

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

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

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

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

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

/* 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

ပို ့စ္ ေရ့ွစာလံုး အစ ကို အၾကီးၾကီးနဲ ့ေပၚေအာင္ ေရးနည္း

  ေရ့ွစာလံုး အစ ကို အၾကီးၾကီးနဲ ့ေပၚေအာင္ ေရးနည္းေလးပါ ။

ၾကိဳက္ၾကမယ္လို ့ေတာ့ထင္ပါတယ္ ။

ျမန္မာဘေလာ့ေတြၾကားထဲမွာေတာ့ သံုးထားတာ သိပ္မေတြ ့ရေသးေပမဲ ့

အဂၤလိပ္ ဆိုဒ္ေတြမွာေတာ့ ခဏခဏ ေတြ ့ဖူးၾကမွာပါ ။

အသံုးျပဳပံုက

1. သင့္  blogger account ကို Log in လုပ္ပါ

2. ဘေလာ့အသစ္စေရးပါ ,ဘေလာ့စေရးသည့္ box ထဲမွာေအာက္ကကုဒ္ကိုထည့္ေပးပါ

<span style="float: left; color: #000000; font-size: 50px; line-height: 30px; padding-top: 5px; padding-right: 5px; font-family: Times New Roman;"> letter that will be make drop cap </span>

ကုဒ္ေတြထဲက  lettre that will be make drop cap ဆိုတဲ့ ေနရာမွာ မိမိ စာသားကို အစားထိုးထည့္းေပးရပါမယ္။

သည္ဆိုဒ္ေလး ျဖစ္ဖို႕ က်ေနာ္ စိတ္ကူးယဥ္ခဲ့တာ ျကာပါျပီဗ်ာ.. စုေဆာင္းထားသမွ်ေလးေတြနဲ႕ ျကိဳးစားထူေထာင္လိုက္ပါျပီ။ က်ေနာ့္ရဲ႕ ျမင္ဆရာ kp-3 ကိုအားက်မိလို႕ပါ။ အားေပးမွဳကိုအစဥ္ေလးစားလွ်က္ပါ။ တုန္ျပန္မွဳေလးတစ္ခုအေနနဲ႕...စကားေလးတစ္ခြန္းဘဲ ခ်န္ခဲ့ရင္ ေက်နပ္ပါျပီ။ ေအာင္ေအာင္(မကစ)

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

Read More

ဘေလာ့ထဲမွာYoutube သီခ်င္းေတြကိုလြယ္ကူစြာထည့္နည္း

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

ပုံ(၁)  မိမိတို႕တင္လိုတဲ့ YOUTUBE ကသီခ်င္းတစ္ခုဆိုပါေတာ့...

ဖြင့္လိုက္ပါ  သူ႕ေအာက္မွာ Share ဆိုတာေလးေတြ႕မယ္ ကလစ္လုိက္ပါ။

 

ပုံ(၂)   အေပၚပုံတိုင္းး share ကိုကလစ္တာနဲ႕ ေတြ႕ရမွာက Embed ဆိုတာေလးပါ..

ကလစ္လုိက္ပါ... ဒါဆို သူ႕ေအာက္က မိမိတို႕လိုျခင္တဲ့ ကုဒ္ကို ရပါျပီ... copy ယူလာပါ။။

မိမိတို႕ တင္မယ္ဆို posting ကိုသြားပါ  

(၁) Edit Html ကိုကလစ္ပါ..သူ႕ကိုကလစ္တာနဲ႕ ကုဒ္ေလးေတြအလုိလို က်လာမယ္ ဖ်က္လုိက္ပါ။

(၂) ေစာေစာက  ေကာ္ပီယူလာတာေလးကို past ခ်ေပးလိုက္ပါ။ အဲမွာဘဲ...လုပ္စရာေလးေတြေပါ့။

(၃) past ခ်တဲ့ ကုဒ္ထဲက နံပါတ္ေတြ ပါမယ္ မိမိဘေလာ့နဲ႕ ကိုက္ညီသလို ျပင္ေပးနိဳင္ပါတယ္..ေနာ္

(၄)  အားလုံး ျပဳျပင္လို႕ စိတ္တိုင္းက်ျပီဆိုတာ နဲ႕  အထက္နားက Compose ဆိုတာကိုကလစ္ၾကည္ံ

အိုေကေနျပီေပါ့... အဆင္ေျပပါေစ။

သည္ဆိုဒ္ေလး ျဖစ္ဖို႕ က်ေနာ္ စိတ္ကူးယဥ္ခဲ့တာ ျကာပါျပီဗ်ာ.. စုေဆာင္းထားသမွ်ေလးေတြနဲ႕ ျကိဳးစားထူေထာင္လိုက္ပါျပီ။ က်ေနာ့္ရဲ႕ ျမင္ဆရာ kp-3 ကိုအားက်မိလို႕ပါ။ အားေပးမွဳကိုအစဥ္ေလးစားလွ်က္ပါ။ တုန္ျပန္မွဳေလးတစ္ခုအေနနဲ႕...စကားေလးတစ္ခြန္းဘဲ ခ်န္ခဲ့ရင္ ေက်နပ္ပါျပီ။ ေအာင္ေအာင္(မကစ)

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

Read More