အလြယ္ကူဆုံး Add Elemic Green 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/AVvXsEjREI5kG-ZSS21Dt6q3PwKF8YxIL4TqTdYsq0LmKA8SgH5yWmtKMj1n2sPkVc5JAFm098hmIik-Wdp6GsHeMuUJ534qGqNsSwcD7ifsRERIkNd8adlNLZpxneImWsYRGXLdvCDY4jjSDzY/s1600/netoops-menu-blogger+green.png") repeat scroll 0 0 transparent !important; border: 1px solid #0E8410 !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/AVvXsEgba-oiBX3ZQCWSkpjnVWt2pwDbhaaYxGwNt1Zn_peq0Fh6w4LI4LMglUd5_5x9nmNA68YwFVAkmAYCf4OoBpMxpyW3QucECyH8Dkc2PJCyCOtrpvb5ueAxnJ3aWKYcudMwVqtuxM-LbOQ/s1600/1x1juice.png" /></a> <div class="noop-menu-green"> <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 ဆိုတာမွာ  ( မူလစာမ်က္ႏွာ) စသျဖင့္
ေျပာင္းလဲနိဳင္ပါတယ္.. လင့္ကိုေတာ့ မူရင္း မိမိဘေလာ့ရဲ႕ လိပ္စာ ကို # ေနရာေလးမွာ အစားထိုးေပးရပါမယ္... တျခားေခါင္းစဥ္မ်ားကိုေတာ့ သက္ဆိုင္ရာ ေခါင္းစဥ္ရဲ႕ လင့္နဲ႕ လင့္ခ်ိတ္ ေပးသြားရမွာ ျဖစ္ပါတယ္ေနာ္....... အဆင္ေျပပါေစ...

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

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

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

05:17  Paing Thu Kha  No comments

Read More

အလြယ္ကူဆုံး Add Elemic Tree Brown 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/AVvXsEil-UT8HvVHdPa9WuPP4yFYZ_chA2LNTRFoc9IpRX1gTEZnsTufB9TQ-vBjh5KzZU-9qyfhyphenhyphenC-RRSfpsL3t7lLHzGWqLXlHbJfMMrYpWhj6JCe4VSw7ICIsmW5FPL3LA43SpaqZ8btdUxw/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important; border: 1px solid #7C4B12 !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/AVvXsEgba-oiBX3ZQCWSkpjnVWt2pwDbhaaYxGwNt1Zn_peq0Fh6w4LI4LMglUd5_5x9nmNA68YwFVAkmAYCf4OoBpMxpyW3QucECyH8Dkc2PJCyCOtrpvb5ueAxnJ3aWKYcudMwVqtuxM-LbOQ/s1600/1x1juice.png" /></a> <div class="noop-menu-brown"> <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 ဆိုတာမွာ  ( မူလစာမ်က္ႏွာ) စသျဖင့္
ေျပာင္းလဲနိဳင္ပါတယ္.. လင့္ကိုေတာ့ မူရင္း မိမိဘေလာ့ရဲ႕ လိပ္စာ ကို # ေနရာေလးမွာ အစားထိုးေပးရပါမယ္... တျခားေခါင္းစဥ္မ်ားကိုေတာ့ သက္ဆိုင္ရာ ေခါင္းစဥ္ရဲ႕ လင့္နဲ႕ လင့္ခ်ိတ္ ေပးသြားရမွာ ျဖစ္ပါတယ္ေနာ္....... အဆင္ေျပပါေစ...

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

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

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

05:16  Paing Thu Kha  No comments

Read More

Dropdown Menu လွလွေလးနဲ႕ ဘေလာ့ကိုအလွဆင္ၾကစို႕

 မဂၤလာပါ  သည္နည္းပညာေလးကေတာ့ နိဳင္ငံျခားဆိုဒ္တစ္ခုမွ ျပန္လည္ မွ်ေ၀ျခင္းျဖစ္ပါတယ္..

အဆင္ေျပၾကမယ္လို႕ ယုံၾကည္ပါတယ္ေနာ္...ေအာက္မွာ ေလ့လာ နိဳင္ပါတယ္ေနာ္

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

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

သည္ေခါင္းစဥ္ေလးရဲ႕ ပုံစံကို နမူနာ ၾကည့္လိုပါက   သည္မွာ   သြားလုိက္ပါေနာ္။

                <style type="text/css">@charset 'UTF-8';#cssmenu{border:none;border:0;margin:0;padding:0;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#8e8e8e;width:auto}#cssmenu > ul{margin-top:6px !important}#cssmenu ul{background:#CDCDCD;background:-webkit-linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);background:linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);border-top:1px solid #A8A8A8;-webkit-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);height:27px;list-style:none;margin:0;padding:0}#cssmenu ul ul{border-top:6px solid #a80329;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#cssmenu ul ul a{line-height:43px}#cssmenu ul ul ul{left:100%;top:0}#cssmenu li{float:left;padding:0 8px}#cssmenu li a{color:#666;display:block;font-weight:bold;line-height:30px;padding:0 25px;text-align:center;text-decoration:none}#cssmenu li a:hover{color:#000;text-decoration:none}#cssmenu li ul{background:#e0e0e0;border-left:2px solid #a80329;border-right:2px solid #a80329;border-bottom:2px solid #a80329;display:none;height:auto;filter:alpha(opacity=95);opacity:0.95;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover > ul{display:block}#cssmenu li li{display:block;float:none;padding:0;position:relative;width:225px}#cssmenu li ul a{display:block;font-size:12px;font-style:normal;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover{background:#949494;color:#000;opacity:1.0;filter:alpha(opacity=100)}#cssmenu p{clear:left}#cssmenu .active > a{background:#a80329;-webkit-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;-moz-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;color:#fff}#cssmenu .active > a:hover{color:white}</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 class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

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

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

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

05:11  Paing Thu Kha  No comments

Read More

Blogger Dropdown Menu ကိုအရိုးရွင္းဆုံးနဲ႕ အလွပဆုံးေလး ဖန္တီးမယ္ ( လန္းမွလန္း )

မဂၤလာပါ  သည္ေန႕တင္တဲ့ နည္းလမ္းေလးကေတာ့... ဘေလာ့ကာတိုင္း စိတ္၀င္တစား ရွိတတ္ၾကတဲ့

Menu ဆိုတဲ့ ေခါင္းစဥ္ တစ္ခုပါဘဲ... ခုေခတ္စားေနတာက menu ေတြကို dropdown ေလးေတြနဲ႕

ဖန္တီးၾကတာပါဘဲ... သည္ေနရာမွာ  ေအာ္တိုပါတဲ့ တက္ပလက္ေတြ သုံးတဲ့ခါ ျပႆနာ မရွိေပမယ့္

မူရင္းတက္ပလက္ကို သုံးၾကတဲ့သေူတြအတြက္ေတာ့ အရမ္း အခက္ေတြ႕ေစပါတယ္...

နည္းလမ္းေတြမ်ားစြာ ရွိပါတယ္  ဒါေပမယ့္ က်ေနာ့္ ေအတြ႕အၾကံဳအရ မူရင္းတက္ပလက္ေတြမွာ

ထည့္ယူ၇တဲ့ dropdown menu ေတြ အေတာ္မ်ားမ်ားအဆင္မေျပတာ ေတြ႕ရတယ္... တင္လုိက္ရင္

dropdown ေတြက တက္ပလက္ အထဲ၀င္ေနတာ ေတြ ျဖစ္တတ္ပါတယ္...သည္နည္းလမ္းေလးကေတာ့

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

တင္ေပးလိုက္ပါတယ္ေနာ္... လိုအပ္တဲ့ ကုဒ္ေတြကို ယူျပီးသုံးလိုက္ပါ...

သည္ထဲမွာ dropdown menu အေရအတြက္ ( ရ ) ခုထိ လုပ္ေပးထားပါတယ္...မလိုအပ္ရင္ ျဖဳတ္နိဳင္သလို လိုအပ္ရင္ ထပ္တိုးနိဳင္ပါတယ္... အဆင္မေျပတာရွိ ခ်က္ေဘာက္မွာ စာခ်န္ခဲ့ပါ..

စမယ္ေနာ္.....

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

           <script src='မိမိဘေလာ့လင့္ထည့္ပါ/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: 1.8px solid red; 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: 1.3px solid blue; } * 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="ddsubmenu3"> ေဆာ့၀ဲလ္ဆိုင္ရာ</a> </li><li> <a href="#" rel="ddsubmenu3"> သုတဆိုင္ရာ</a> </li><li> <a href="#" rel="ddsubmenu3"> စာေပဆိုင္ရာ</a> </li><li> <a href="#" rel="ddsubmenu3"> ေတးဂီတဆိုင္ရာ</a></li><li> <a href="#" rel="ddsubmenu3"> pcဆိုင္ရာ</a></li><li> <a href="#" rel="ddsubmenu3"> mobilesဆိုင္ရာ</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> </li><li> <a href='#'> နည္းပညာ 3</a> </li><li> <a href='#'> နည္းပညာ 4</a> </li><li> <a href='#'> နည္းပညာ 5</a> </li><li> <a href='#'> နည္းပညာ 6</a> </li><li> <a href='#'> နည္းပညာ 7</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><li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရ6</a> </li><li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရ 7</a> </li><li> <a href='#'> ေဆာ့၀ဲလ္ဆိုင္ရ8</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><li> <a href='#'> သုတ6</a> </li><li> <a href='#'> သုတ 7</a> </li><li> <a href='#'> သုတ 8</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><li> <a href='#'> စာေပ6</a> </li><li> <a href='#'> စာေပ7</a> </li><li> <a href='#'> စာေပ8</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><li> <a href='#'> ဂီတ6</a> </li><li> <a href='#'> ဂီတ7</a> </li><li> <a href='#'> ဂီတ8</a> </li></ul><ul class='ddsubmenustyle' id='ddsubmenu3'><li> <a href='#'>pc1</a> </li><li> <a href='#'> pc2</a> </li><li> <a href='#'> pc3</a> </li><li> <a href='#'> pc4</a> </li><li> <a href='#'> pc5</a> </li><li> <a href='#'> pc6</a> </li><li> <a href='#'> pc7</a> </li><li> <a href='#'> pc8</a> </li></ul><ul class='ddsubmenustyle' id='ddsubmenu3'><li> <a href='#'>mobile 1</a> </li><li> <a href='#'> mobile 2</a> </li><li> <a href='#'> mobile 3</a> </li><li> <a href='#'> mobile 4</a> </li><li> <a href='#'> mobile 5</a> </li><li> <a href='#'> mobile 6</a> </li><li> <a href='#'> mobile 7</a> </li><li> <a href='#'> mobile 8</a> </li></ul>

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

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

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

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

05:08  Paing Thu Kha  No comments

Read More

ဘေလာက္လုပ္ပုံ အဆင့္ဆင့္ အပုိင္း(၃)

1.3. Moderate Comments
ဘေလာ႔ဂ္မ်ားတြင္ ပိုစ္႔တစ္ခုခ်င္းစီကို Comment မွတ္ခ်က္ ေပးလို႔ရသည္။ မည္သူမဆို ေပးလို႔ရေအာင္ ခြင္႔ျပဳႏိုင္သလို
ကိုယ္ခြင္႔ျပဳလိုသူမ်ားကိုသာ မွတ္ခ်က္ေပးႏိုင္ေအာင္ သတ္မွတ္ေပးထားလို႔လည္း ရသည္။ Blospotက အသင္႔ေပးထားေသာ Comment System ကို အသံုးျပဳလို႔ ရသလို အျခားကိုယ္ႏွစ္သက္ေသာ စနစ္ကို အသံုးျပဳမည္ ဆိုလွ်င္လည္း အဆင္ေျပသည္။ ဤေနရာတြင္မူ Blogspot မွအသင္႔ေပးထားေသာ ကြန္မန္႔ စနစ္အေၾကာင္းကိုသာ ရွင္းျပသြားပါမည္။


Moderate Comments ဆိုသည္မွာ Comments မ်ားကို ထိန္းခ်ဳပ္ျခင္းပင္ ျဖစ္သည္။ အျခားသူမ်ားကို မျမင္ေစခ်င္ေသာ အခ်ိဳ ႔ေသာ Comments မ်ားကို ခြင္႔မျပဳေသးဲ ဆိုင္းငံ႔ထားႏိုင္သည္။ ပယ္ဖ်က္ ပစ္ႏိုင္သည္။ သို႔မဟုတ္ ကိုယ္႔ဘေလာ႔ဂ္ကို ဖတ္ရႈေသာ မည္သူကိုမဆို Comments လုပ္ခြင္႔ ေပးႏိုင္သလို၊ Comments ေပးႏိုင္ခြင္႔ကို သတ္မွတ္ထားေသာ သူမ်ားမွသာ ရရွိရန္ သတ္မွတ္ေပးႏိုင္သည္။ ယင္းသို႔ ထိန္းခ်ဳပ္ႏိုင္ရန္အတြက္မူ မိမိဘေလာ႔ဂ္၏ Comment စနစ္ကို Setting ေအာက္မွ Comments က႑တြင္ သြားေရာက္ ျပင္ဆင္ေပးရမည္ ျဖစ္သည္။ Blogger ၏ အသင္႔သံုး မွတ္ခ်က္ စနစ္မွာ လူတိုင္းကို မွတ္ခ်က္ေပးႏိုင္ေအာင္ ခြင္႔ျပဳထားသည္။ ထို႔ေၾကာင္႔ ထိုစနစ္ကို သြား၍ မျပင္ဆင္သမွ် မိမိဘေလာ႔ဂ္တြင္ လူတိုင္းေပးေသာ မွတ္ခ်က္မ်ားကို အလိုအေလ်ာက္ ေဖာ္ျပေနမည္ ျဖစ္သလို ယခု Posting>Moderate Comment ခလုတ္ကို ႏွိပ္လွ်င္လည္း ဘာမွ ျမင္ရမည္ မဟုတ္ေပ။ Moderate လုပ္စရာ Comments မရွိဘူး ဟူ၍သာ ေျပာေပလိမ္႔မည္။
2. SettingSetting က႑တြင္ အပိုင္း (၇)ပိုင္း ရွိသည္။
1. Basic
2. Publishing
3. Formatting
4. Comments
5. Archiving
6. Site Feed
7. Email
8. Permissions စသည္တို႔ ျဖစ္သည္။2.1. Basic
ယင္းက႑သည္ ဆိုဒ္တစ္ခုလံုး၏ အေျခခံ အဆင္႔ျဖစ္သည္။ အဓိက အပိုင္း ကိုးပိုင္း ပါဝင္သည္။ ယင္းတို႔မွာ
1. Title (ဘေလာ႔ဂ္ ေခါင္းစဥ္)
2. Description (ဘေလာ႔ဂ္ အေၾကာင္းအရာ)
3. Add your blog to our listings? (Blogger.com မွာ ေဖာ္ျပမွာလား)
4. Let search engines find your blog? (Search Engine ေတြကို အလိုအေလ်ာက္ ရွာခြင္႔ျပဳမွာလား)
5. Show quick editing on your blog? (ပိုစ္႔ေတြကို အလြယ္တကူ ျပင္တဲ႔ ခလုတ္ တပ္မွာလား)
6. Show email post links? (ပိုစ္႔ေတြကို အီးေမးလ္နဲ႔ ပို႔လို႔ရတဲ႔ လင္႔ခ္ ထားေပးမွာလား)
7. Show compose mode for all your blogs? (ဘေလာ႔ဂ္ေတြမွာ တိုက္ရိုက္ပိုစ္႔ တင္တဲ႔စနစ္ ထားမွာလား)
8. Show transliteration button for your posts? (စာရိုက္တဲ႔ ေနရာမွာ ဘာသာျပန္တဲ႔ ခလုတ္ ထားမွာလား)
9. Delete your blog? (လုပ္ထားတဲ႔ ဘေလာ႔ဂ္ကို ဖ်က္မွာလား)



Po

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

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

07:17  Paing Thu Kha  No comments

Read More

ဘေလာက္လုပ္ပုံအဆင့္ဆင့္ အပုိင္း(၂)

အားလုံးၿပီးသြားၿပီဆုိရင္ေတာ့ ဒီလုိမ်ိဳးေလးေတြ႔ရမွာပါ။ Dashboard တြင္ မိမိဖန္တီးထားေသာ ဘေလာ႔ဂ္ကို ျမင္ေတြ႔ရမည္ ျဖစ္သည္။ ဂူဂယ္လ္ အေကာင္႔တစ္ခုျဖင္႔ ဘေလာ႔ဂ္အေရအတြက္ အကန္႔အသတ္မရွိ ဖန္တီးႏိုင္သည္။ ယခု Dashboard တြင္ ျမင္ရသည္႔ ဘေလာ႔ဂ္မ်ားထဲမွ မိမိအသံုးျပဳလိုသည္ ဘေလာ႔ဂ္ကို ေရြးခ်ယ္ေပးရမည္။ ယခုမွ ပထမစလုပ္ေသာ ဘေလာ႔ဂ္မ်ား အေနႏွင္႔မူ ယင္းေနရာတြင္ ဘေလာ႔ဂ္ တစ္ခုတည္းသာ ေတြ႔ေနရမည္ ျဖစ္သည္။

ဘေလာ႔ဂ္တစ္ခု တည္ေဆာက္ရာတြင္ အဓိက အခန္းက႑ သံုးခုရွိသည္။ ယင္းတို႔မွာ
• Posts
• Setting
•Layouts
စသည္တို႔ျဖစ္သည္။ Posts အပိုင္းမွာ စာရိုက္ျခင္း၊ တင္ျခင္းမ်ားႏွင္႔ သက္ဆိုင္သည္။ Setting အပိုင္းမွာ ဘေလာ႔ဂ္ကို မည္သို႔ ထိန္းခ်ဳပ္မည္၊ မည္သုိ႔ တင္ျပမည္ စသည္တို႔ႏွင္႔ သက္ဆိုင္သည္။ Layout အပိုင္းမွာ ဘေလာ႔ဂ္၏ အဆင္အျပင္ႏွင္႔ ဖြဲ႔စည္းမႈ ပံုစံမ်ားကို ဖန္တီးယူေသာ အပိုင္းျဖစ္သည္။

(၁) Posting (စတင္ျခင္း)
ိdashboard မွာျမင္ေနျဖစ္ပါတဲ့ Post ဆုိတာေလးကုိ ႏွိပ္မယ္ဆုိရင္ ကၽြန္ေတာ္တုိ႔ဟာ စာရုိက္တဲ့ေနရာကို တုိက္ရုိက္ေရာက္သြားမွာျဖစ္ပါတယ္။ Posting ေခါင္းစဥ္ေအာက္က creat, Edit Post, Moderate Commant စသည္ျဖင့္ ရွိေနပါတယ္။
Creat က ပုိ႔စ္အသစ္ေတြကုိ ဖန္တီးေရးသားတာ
Edit Post က ပုိ႔စ္ေတြကုိ ျပန္ျပင္တာ
Moderate Commant က သူမ်ား ေပးလာတဲ့ မွတ္ခ်က္ေတြကုိ ထိန္းခ်ဳပ္ထားတာပါ။

ဒီပုံမွာ ပိုစ္႔တစ္ခုတင္ျခင္းႏွင္႔ ပတ္သတ္ေသာ အရာအားလံုးကို ျပသထားပါသည္။ ကိုယ္ရိုက္ခ်င္ေသာ စာသားမ်ားကို အျပာေရာင္ ျပထားေသာ ေနရာတြင္ ရိုက္ရပါမည္။ ျမန္မာလို စာသားထည္႔သြင္းျခင္းမ်ားအတြက္ ဘေလာ႔ဂါ အမ်ားစုက ေဇာ္ဂ်ီ ကီးဘုတ္ႏွင္႔ ေဖာင္႔ကို အသံုးျပဳၾကသည္။ ယင္းအေၾကာင္းကို ေနာက္ပိုင္း အခန္းတြင္ ဆက္ရွင္းျပပါမည္။ စာရိုက္ၿပီးသြားလွ်င္ မိမိ၏စာႏွင္႔ သက္ဆိုင္ေသာ ေခါင္းစဥ္ကို Title ေနရာတြင္ တပ္ေပးရပါမည္။ Labels ဆိုသည္မွာ ကိုယ္ေရးထားေသာ စာႏွင္႔ ကိုက္ညီေသာ နာမည္တစ္ခု ျဖစ္သည္။ ဥပမာအားျဖင္႔ ကိုယ္က ခရီးသြားအေတြ႔အၾကံဳတစ္ခု ေရးသားသည္ဆိုလွ်င္ Travel လိုနာမည္မ်ိဳး ေပးျခင္း ျဖစ္သည္။ ယင္းေလဘယ္လ္ ေပးျခင္းသည္ ေနာက္ပိုင္းတြင္ မိမိ၏ ပိုစ္႔မ်ားကို သက္ဆိုင္ရာ က႑အလိုက္ ျပန္လည္ခြဲျခားရာတြင္ အထူးအေရးပါသည္။ ထို႔ေၾကာင္႔ စာတစ္ပုဒ္ ေရးၿပီးတိုင္းတြင္ ယင္းစာႏွင္႔ ပတ္သတ္ေသာ ေလဘယ္မ်ားကို သတိမေမ႔ေစဘဲ မွတ္မွတ္သားသား ေပးသင္႔သည္။ စာသားမ်ားကို ဘယ္ကပ္၊ ညာကပ္၊ Text Alignment မ်ားျပဳလုပ္လိုလွ်င္လည္း Text Editor တြင္ လြယ္ကူစြာ ေျပာင္းလဲႏိုင္သည္။ အားလံုး ၿပီးသြားေသာ္လည္း စာကို အင္တာနက္ေပၚသို႔ ခ်က္ခ်င္း မတင္ခ်င္ေသးဘူးဆိုလွ်င္ Save Now ဟူေသာ ခလုတ္ကို ႏွိပ္ျခင္းျဖင္႔ သိမ္းထားႏိုင္သည္။ ထိုသို႔မဟုတ္ဘဲ ခ်က္ခ်င္း အင္တာနက္ေပၚ တိုက္ရိုက္ တင္မည္ဆိုလွ်င္ Publish Post ဆိုသည္ကို ႏွိပ္လိုက္သည္ႏွင္႔ မိမိစာသည္ ဘေလာ႔ဂ္ေပၚ တင္ၿပီးသား ျဖစ္သြားေပလိမ္႔မည္။ ယင္းသို႔ စာရိုက္ရာတြင္ ပံုမ်ားကိုလည္း ပူးတြဲ တင္ျပႏိုင္သည္။ ယင္းသို႔ ပံုတင္ရာတြင္ ၂မ်ိဳးရွိသည္။ မိမိ၏ ဘေလာ႔ဂါ အေကာင္႔မွ ပံုကို မိမိဘေလာ႔ဂ္တြင္ တင္ျခင္းႏွင္႔ ဘေလာ႔ဂါမဟုတ္ေသာ အျခားအေကာင္႔မွပံုကို မိမိဘေလာ႔ဂ္တြင္ တင္ျခင္းဟူ၍ ျဖစ္သည္။

မိမိ၏ ဘေလာ႔ဂ္ အေကာင္႔တြင္ တိုက္ရိုက္တင္ျခင္း
ပထမ ကိုယ္တင္ခ်င္တဲ႔ ပံုကို စက္ထဲကေန ေရြးေပးပါ။ တစ္ပံုထက္ ပိုတယ္ဆိုရင္ Add Another Image ဆိုတာေလးကို ႏွိပ္ရပါမယ္။ ပံုကို ဘေလာ႔ဂ္ေပၚမွာ ဘယ္လို ေပၚေစခ်င္သလဲ ဆိုတာကိုေတာ႔ ဒုတိယ အဆင္႔ အေနနဲ႔ ေရြးေပးရပါတယ္။ ဘယ္ဘက္မွာလား၊ ညာဘက္မွာလား စသည္ျဖင္႔။ ေနာက္ဆံုးကေတာ႔ Image Size ေရြးေပးရတာပါ။ စမ္းသပ္ခ်က္မ်ားအရ Medium ကအေကာင္းဆံုးပါ။ အားလံုး ၿပီးသြားရင္ ေအာက္ဆံုးက Upload Image ဆိုတာကို ႏွိပ္ေပးလိုက္ပါ။

ႏွိပ္ေပးလိုက္ပါ။အထက္ပါကဲ႔သို႔ ပံုတင္ၿပီးသြားၿပီျဖစ္ေၾကာင္း အေၾကာင္းၾကားစာ ေပၚလာလွ်င္ Done ကိုႏွိပ္ၿပီး အတည္ျပဳေပးလိုက္ပါ။ ၿပီးလွ်င္ ယခင္အဆင္႔တြင္ ျပထားသကဲ႔သို႔ စာကို ပံုႏွင္႔တကြ မိမိဘေလာ့ဂ္ေပၚသို႔ Publish ကိုႏွိပ္ၿပီး တိုက္ရိုက္ တင္ႏိုင္ၿပီ ျဖစ္သည္။

Edit Posts
ယခု အပိုင္းမွာ ယခင္ ေရးသြင္းထားၿပီးသား ပိုစ္႔မ်ားတြင္ တစ္ခုခု အမွားအယြင္း ရွိလွ်င္ေသာ္လည္းေကာင္း၊ အျခား အေၾကာင္းအမ်ိဳးမ်ိဳး ေၾကာင္႔ေသာ္လည္းေကာင္း ျပင္ဆင္ တည္းျဖတ္မႈ ျပန္လည္ ျပဳလုပ္လိုလွ်င္ အသံုးျပဳရသည္။

Edit Posts က႑ေအာက္တြင္ ရွိေနေသာ ပိုစ္႔ သံုးခုကို ေတြ႔ရမည္ ျဖစ္သည္။ ယင္းပိုစ္႔မ်ားထဲမွ တစ္ခုခုကို ျပင္ခ်င္လွ်င္ သက္ဆိုင္ရာပိုစ္႔၏ ေဘးတြင္ ရွိေနေသာ Edit ဆိုသည္႔ ခလုတ္ကို ႏွိပ္ေပးရန္သာ ျဖစ္သည္။ ထိုအခါ ယခင္ တင္ခဲ႔ေသာ ျပင္ဆင္လိုသည္႔ ပိုစ္႔သည္ Create အဆင္႔မွာကဲ႔သို႔ ျပန္ေပၚလာမည္ ျဖစ္သည္။ ထိုအခ်ိန္တြင္မွ ပံုအသစ္မ်ား၊ စာသားအသစ္မ်ား ထည္႔သြင္းမည္ ဆိုလွ်င္လည္း ရသည္။ တင္ထားၿပီးသား စာမ်ား ပိုစ္႔မ်ားကို ဖ်က္မည္ဆိုလွ်င္လည္း ရသည္။ ယင္းက႑ထဲတြင္ ပိုစ္႔မ်ားႏွင္႔ သက္ဆိုင္ေသာ Labels မ်ားကိုလည္း ေတြ႔ႏိုင္သည္။

ညီေနမင္း (နည္းပညာ)

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

07:16  Paing Thu Kha  No comments

Read More

ဘေလာက္လုပ္ပုံအဆင့္ဆင့္ အပုိင္း(၁)

ကၽြန္ေတာ္ ကုိညီလင္းဆက္ဆီကေန သိလာတာေလးကုိ ေလ့လာသူမ်ားအေနႏွင့္ အက်ိဳးရွိမယ္ထင္လုိ႔ ပုိ႔စ္အျဖစ္တင္လုိက္ပါတယ္ ..
သာမန္ ဘေလာ႔ဂ္တစ္ခု တည္ေဆာက္ျခင္း

အဆင္႔ (၁)
Create Google Account
ဘေလာ႔ဂ္တစ္ခု တည္ေဆာက္ရန္အတြက္ သင္႔ထံတြင္ Google Account သို႔မဟုတ္ Gmail Account တစ္ခု ရွိရန္ လိုအပ္ပါသည္။ Google Account ကို ဒီေနရာမွာ ရယူႏိုင္သည္။

အဆင္႔ (၂)
First Step to Blog
www.blogger.com ကိုသြားပါ။ သင္၏ Google Account ႏွင္႔ စကားဝွက္ကို ထည္႔သြင္းပါ။




အဆင္႔ (၃)
Name Your Blog
သင္၏ ဘေလာ႔ဂ္အတြက္ နာမည္ (Blog Title)၊ လိပ္စာ (Blog Address) စသည္တို႔ကို ထည္႔သြင္းပါ။ ဘေလာ႔ဂ္ နာမည္မွာ ထိုဘေလာ႔ဂ္ကို ကိုယ္စားျပဳေသာ နာမည္ျဖစ္လွ်င္ ပိုေကာင္းပါသည္။ လိပ္စာကိုေတာ႔ အရွည္ႀကီး ေပးမည္႔အစား ခပ္တိုတိုေပးျခင္းက ပိုၿပီး အဆင္ေျပေစပါသည္။ (ထိုအရာမ်ားမွာ အခ်ိန္မေရြး ကိုယ္ႏွစ္သက္သလို ေျပာင္းလဲႏိုင္သည္ကို ေနာက္ပိုင္း သက္ဆိုင္ရာ အခန္းတြင္ ရွင္းျပသြားပါမည္)

သင္႔ဘေလာ႔ဂ္ လိပ္စာကို ေပးၿပီးပါက အဆိုပါ လိပ္စာမွာ အသံုးျပဳ၍ ရႏိုင္မရႏိုင္ကို အနီေရာင္ျဖင္႔ ျပထားေသာ Check Availability ဆိုသည္ကို ႏွိပ္ၿပီး စစ္ေဆးႏိုင္ပါသည္။ ထို႔ေနာက္ အျပာကြင္းျပထားေသာ ေနရာတြင္ အလိုအေလ်ာက္ ေပၚလာေသာ စာလံုးမ်ားကို မလြဲေအာင္ ျပန္ရိုက္ေပးရပါမည္။ အားလံုးၿပီးဆံုးလွ်င္ Continue ကိုႏွိပ္ရပါမည္။

အဆင္႔ (၄)
Choose Template
ထိုအဆင္႔တြင္ ကိုယ္႔ဘေလာ႔ဂ္၏ အသြင္အျပင္ ပံုသ႑ာန္ Template ကိုေရြးခ်ယ္ေပးရမည္ ျဖစ္သည္။ ကိုယ္ႏွစ္သက္ေသာ ေနာက္ခံအေရာင္၊ စာသား အထားအသို စသည္တို႔ႏွင္႔ ကိုက္ညီေသာ Template တစ္ခုကို ေရြးခ်ယ္ၿပီး အနီေရာင္ အဝိုင္းျပထားေသာ ေနရာတြင္ Mark လုပ္ေပးရမည္ ျဖစ္သည္။ ေရြးခ်ယ္ၿပီးလွ်င္ Continue ကိုႏွိပ္ပါ။ ထိုအခါ ေအာက္ေဖာ္ျပပါ ပံုတြင္ ေတြ႔ရသကဲ႔သို႔ သင္႔တြင္ ဘေလာ႔ဂ္တစ္ခု ဖန္တီးၿပီးျဖစ္ေၾကာင္း အသိေပးမည္ ျဖစ္သည္။ စာစတင္ ရိုက္သြင္းရန္အတြက္ ေအာက္ေျခမွ Start Posting ဆိုသည္ကို ႏွိပ္ေပးရန္ လိုအပ္ပါသည္။


အမွန္စစ္စစ္ အဆင္႔ေလးတြင္ ေယဘုယ် ဘေလာ႔ဂ္တစ္ခု ဖန္တီးျခင္းလုပ္ငန္း ၿပီးဆံုးၿပီျဖစ္သည္။ သို႔ရာတြင္ အဆိုပါ Start Posting ကိုႏွိပ္လိုက္ပါက ေအာက္ပါ စာမ်က္ႏွာကို ျမင္ရမည္ ျဖစ္သည္။ တဆက္တည္း ျမင္သာထင္ရွားေစရန္ ပထမဆံုး စာမူတစ္ခုကို စမ္းသပ္ တင္ၾကည္႔ပါ။ စာရုိက္တဲ့ေနရာမွာ Edit Html အကြက္ထဲမွာပဲ စာကုိရုိက္ရမွာပါ.. compose မွာ စာမရုိက္ရပါဘူး။ ေတာ္ေတာ္မ်ားမ်ားဟာ compose မွာပဲ ရုိက္ၾကတာပါ။ ပုိ႔စ္မေပၚဘူးလားလုိ႔ေမးစရာရွိပါတယ္။ ေပၚပါတယ္ ဒါေပမယ့္ ကုတ္ေတြထည့္ခ်င္တယ္ဆုိတာမ်ိဳး တစ္ခုခု html ကုတ္တစ္ခုခု တင္မယ္ဆုိရင္ အဲ့ဒီ့မွာ ကုတ္ေတြမ်ားေတာ့ ရႈပ္ကုန္ေရာေပါ့။ compose ဆုိတာ တစ္ကယ္ေတာ့ ကာလာထည့္မွာတုိ႔ကို စာလုံးညွိတာတုိ႔ကုိ လုပ္ေပးပါတယ္။ ဆုိလုိတာက ပုိ႔စ္ေတြကုိ ဘယ္ညွိလား၊ ညာညွိလား၊ အလယ္ညွိလား၊ ႏွစ္ဖက္ညီလား၊ ဒါမ်ိဳးေတြကို ညွိေပးတာကုိ အဓိကထားလုပ္ပါတယ္။ အဲ့ဒီ့ေတာ့ ကၽြန္ေတာ္တုိ႔ ပုိ႔စ္ေတြကို Edit Html နဲ႔ပဲေရးၾကရေအာင္ဗ်ာ။ ကုတ္ေတြေရာမေရာသိခ်င္ရင္ ကၽြန္ေတာ္တုိ႔ compose နဲ႔ရုိက္ၿပီးရင္ html နဲ႔ျပန္ၾကည့္ပါ ကုတ္ေတြထြက္က်လာပါလိမ့္မယ္။ html နဲ႔ရုိက္ရင္ေတာ့ ဘာကုတ္မွ ေပၚမွာမဟုတ္ပါဘူး။ အဲ စာအားလုံးရုိက္ၿပီးၿပီဆုိရင္ေတာ့ publish post ဆုိတာေလးကုိ ႏွိပ္ဖို႔မေမ့ပါနဲ႔ဗ်ာ။ ဘာျဖစ္လုိ႔လဲဆုိရင္ Publish ကုိမႏွိပ္ရင္ စာဖတ္သူ တင္တဲ့ပုိ႔စ္ကုိ သူက ေပၚေပးမွာမဟုတ္ပါဘူး။

ညီေနမင္း(နည္းပညာ)

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

07:15  Paing Thu Kha  No comments

Read More

Popular Posts ကို slider ေလးနဲ႕ ဘေလာ့ထိပ္ကေနအလွဆင္မယ္

 

အေပၚကပုံထဲ႕လိုေလးး လုပ္ၾကည့္မယ္ေနာ္....ကဲ စမယ္

1.ဘေလာ့ကာအေဟာင္းပုံစံအတြက္၀င္နည္း: 

• Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template 

ဘေလာ့ကာအသစ္ပုံစံကိုေတာ့ သည္တိုင္း၀င္ပါ

• Go - Tto Dashboard emplate - Edit HTML - - (make a backup)

2.  (CTRL + F) အကူညီျဖင့္ ေအာက္ကကုဒ္ကိုရွာလိုက္ပါ

]]></b:skin>

3.ေတြ႕ျပီဆိုရင္ သူ႕ရဲ႕အေပၚကပ္ျပီးး ေအာက္ကေပးထားတဲ့ကုဒ္ေတြ ထည့္ေပးပါ:

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDl8-6QMMEOv0fdF0Hq9I5ICnFh15mJWncJaSAyFgSuILqkZR3oYj3grNmVhJHv54pANeSTc5uGIwW08pub-p1whDENHl-HzaNTyeoQCdporbGpHHJrgjoCk1iHJzu4WSCHSYGbjUlO5ug/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Note: ဒါဆိုအဆင္ေျပပါျပီ အနီေရာင္နဲ႕ နံပါတ္ေတြကို မိမိဆိုဒ္နဲ႕ သင့္ေတာ္သလို ေျပာင္းသုံးပါ (590 and 126). ကိုေပါ့

4. ေနာက္ထပ္ ေအာက္ကကုဒ္ကို ထပ္ရွာလုိက္ပါ:

</head>

5. ေတြ႕တာနဲ႕ အေပၚကေန ကပ္ျပီး ေပးထားတဲ့ေအာက္ကကုဒ္ေတြထည့္ပါ:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4oMuzYoFoF0xl54UGaqlrCDbVcmNykoXPP-lntvwTO73oATmMxGvMm8LgROodNCtrYGstQy8rsGTqtqn4WCE5SB-wsG_2An-_Z6viZlytBh3rfKZpRKOwXYAfScyjdFfs6KsijdXj4r8Y/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJynRS0oLkLxkwZdMZcxkFSppzoLFl6MdEbl76kpccNJ-faIYlGdmTXh2fYawXOOKbFMFqHOOg5CvYdCw5xnXZnlm02_5SfVtN5ROBO3M3GOXi4zvTRA5S6MJURa9I6qHwQ4saP9E2C8l/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

မိမိတို႕ရလာတဲ့ ဟာေလးကို post ရဲ႕အထက္မွာ ေရႊ႕ေပးလိုက္ပါ.

6. ေအာက္ကကုဒ္ကို ထပ္ရွာပါ:

<b:section class='main' id='main' showaddelement='yes'>

...အကယ္လို႕ အေပၚကကုဒ္မေတြ႕ခဲ့ပါက ေအာက္ကကုဒ္ရွာပါ:

<b:section class='main' id='main' showaddelement='no'>

7. ေတြ႕တာနဲ႕ သူ႕ရဲ႕ေအာက္ကေနကပ္ျပီးေပးထားတဲ့ ေအာက္ကကုဒ္ေတြထည့္ေပးလုိက္ပါ:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGK9_gs2qpBOF0p4ih-QjW_MEtQcukacXRxkq9-g1qyEfruJvAaF9a6hyphenhyphen8N36liOHJlZDZJ12R3QhZiAdYseULK9AjbUvHlrSJqPjJ7iCj66MmFJelal-whzghC_0nrpEZLO8MZZoJ-zS4/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also.

8. Preview နဲ႕ျပန္စစ္ၾကည့္လိုက္ပါ အိုေကတာနဲ႕ Save the Template.

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

07:10  Paing Thu Kha  No comments

Read More

ဘေလာ့မွာrelated posts widget ေလးထည့္ၾကမယ္.

 

က်ေနာ့္ ဘေလာ့မွာလည္း တင္မထားရေသးတာနဲ႔ ဒီ related posts widget ေလးကို တင္အံုးမယ္လို႔ စိတ္ကူးလိုက္တာပါ။ အရင္ကေတာ့ thumbnails နဲ႔ ျပတဲ့ related post widgetကိုသုံးၾကပါတယ္..ဒါေလးကေတာ့အဆန္းေလးေပါ့ သုံးၾကည့္ပါေနာ္..

အဆင့္(၁)။ အေနနဲ႔ Relatedposts ဆိုတဲ့ .js ဖိုင္ေလးကို အရင္ download ယူထားလိုက္ပါ။ ၿပီးရင္ ျပန္တင္ေပးရမွာ ျဖစ္ပါတယ္။
အဆင့္(၂)။ က်ေနာ္တို႔ ထံုးစံအတိုင္း Layout ထဲက Edit HTML ကို သြားရပါမယ္။
အဆင့္(၃)။ backup ေလး လုပ္ဖို႔ မေမ႔နဲ႔ေပါ့ဗ်ာ။
အဆင့္(၄)။ ၿပီးရင္ html ကို၀င္လိုက္ပါ
အဆင့္(၅)။ ၿပီးရင္ေတာ့ </head> ဆိုတာေလးကို ရွာလိုက္ပါ။


အဆင့္(၆)။ ေအာက္က code ေတြကို အဲဒီ </head> ရဲ႕အေပၚ မွာ ထည့္ေပးလိုက္ပါ။

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://img38.imagefra.me/img/img38/6/4/29/thetnaing/f_i29o2gm_44959d9.gif) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://ေဒါင္းလုပ္ယူခဲ့တဲ့ relatedposts.js' type='text/javascript'/><!--RelatedPostsStops-->

အေရာင္နဲ႔ ျပထားတာေတြကို စိတ္ႀကိဳက္ျပင္လို႔ ရပါတယ္။ အားလံုးလည္း သိၿပီးျဖစ္မွာပါ။

အဆင့္(၇)။ <data:post.body/> ဆိုတာေလးကို ရွာလိုက္ပါ။
အဆင့္(၈)။ ေအာက္က code ေတြကို <data:post.body/> ဆိုတာရဲ႕ ေအာက္မွာ ထည့္ေပးလိုက္ပါ။

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; data:label.name &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

အေရာင္နဲ႔ ျပထားတာေတြကို စိတ္ႀကိဳက္ျပင္လို႔ ရပါတယ္။ အားလံုးလည္း သိၿပီးျဖစ္မွာပါ။

အဆင့္(၉)။ အားလံုးၿပီးသြားၿပီ ဆိုရင္ေတာ့ Save Template ကိုႏွိပ္လုပ္လိုက္ပါ။ ဒါဆို related post widget ထည့္တာ ၿပီးသြားပါၿပီ။ ပို႔စ္ title သို႔မဟုတ္ readmore ဆိုတာေတြ ႏွိပ္ၾကည့္မွ related post က ေပၚမွာျဖစ္ပါတယ္။တကူးတက ဖတ္ေပးတာ ေက်းဇူးပဲဗ်ာ....

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

07:06  Paing Thu Kha  No comments

Read More

Blog တစ္ခုအတြင္း ေဘာင္ခပ္ျခင္းအေထြေထြ

ဘေလာ့ Template တစ္ခုလံုးကိုပဲျဖစ္ျဖစ္ ဘေလာ့ Template ထဲက Widget တစ္ခုခ်င္းစီကိုပဲျဖစ္ျဖစ္
ကိုယ္ႏွစ္သက္သလို ေဘာင္ခပ္တဲ့ နည္းပညာေလးတစ္ခုကို မွ်ေ၀ေပးခ်င္ပါတယ္ ..
အရင္ဆံုး Template ႀကီး တစ္ခုလံုးကို ေဘာင္ခပ္တဲ့နည္းကို မွ်ေ၀ေပးပါ့မယ္
ဒီနည္းရဲ႕ နမူနာ ( Demo ) ကို ၾကည့္ခ်င္တယ္ဆိုရင္ေတာ့ ကၽြန္ေတာ္အခုသံုးထားတဲ့ Template ႀကီးတစ္ခုလံုးရဲ႕ ေဘးပတ္ပတ္လည္မွာခပ္ထားတဲ့ ေဘာင္ကိုသာ ၾကည့္လိုက္ၾကပါလို႔ ..


ကဲ .. အရင္ဆံုး Blogger ကို Lon in ၀င္လိုက္ပါ ..
ၿပီးရင္ Template က ေန Edit HTML ကို ၀င္ပါ
HTML ကုဒ္ေတြထဲက ]]></b:skin>  ကို လိုက္ရွာပါ ...
ေတြ႕ၿပီဆိုရင္ အဲဒီ ]]></b:skin> ရဲ႕ အေပၚမွာ ေအာက္ကကုဒ္ေတြကို ေကာ္ပီကူးၿပီး ထည့္ေပးလိုက္ပါ

#mblwrap {       background: #Ffffff;       width: 960px;       margin: 10px auto 5px auto;        padding: 0;       position: relative;       border-right: 15px solid #333;       border-left: 15px solid #333;       border-top: 10px solid #333;       border-bottom: 15px solid #333;       -moz-border-radius:10px;       -webkit-border-radius:10px;       border-radius:10px;       box-shadow: #333 0px 1px 3px;     }

 


အဲဒီကုဒ္ေတြထဲက ကၽြန္ေတာ္ အနီေရာင္နဲ႔ ျပထားတဲ့ေနရာမွာ ကိုယ္ႏွစ္သက္တဲ့ အေရာင္ကုဒ္ကို ေျပာင္းလဲေပးႏိုင္သလို Border ရဲ႕ အထူအပါးကိုလည္း 15px, 15px, 10px စတဲ့ေနရာေတြမွာ လိုက္ၿပီး ခ်ိန္ၫွိေပးႏိုင္ပါေသးတယ္

ၿပီးရင္ <body> ကို ထပ္ရွာပါ ..
ေတြ႕ၿပီဆိုရင္ အဲဒီ <body> ရဲ႕ ေအာက္မွာ

<div id='mblwrap'>

အဲဒီကုဒ္ကို ကူးထည့္လိုက္ပါ

ၿပီးရင္ </body> ကို ထပ္ရွာပါ ..
ေတြ႕ၿပီဆိုရင္ အဲဒီ </body> ရဲ႕ အေပၚမွာ</div> ဆိုတဲ့ကုဒ္ကို ထည့္ေပးလိုက္ပါ
အေပၚမွာထည့္တာ ေအာက္မွာထည့္တာေတြကို ေသခ်ာ ဂ႐ုစိုက္ေပးေစခ်င္ပါတယ္
Preview Template ကေန ဘေလာ့ကို ၾကည့္လို႔ အဆင္ေျပသြားၿပီဆိုရင္ေတာ့
Save Template ကို ႏွိပ္လိုက္႐ံုပါပဲ ...
ဒါဆိုရင္ေတာ့ Template ႀကီးတစ္ခုလံုးကို ေဘာင္ခပ္လို႔ ၿပီးသြားပါၿပီ ..

ေနာက္တစ္နည္းကေတာ့ Template ထဲမွာ ရွိတဲ့ Widget တစ္ခုခ်င္းစီကို ေဘာင္ခပ္မယ္ေပါ့
အရင္ဆံုး ကိုယ္ေဘာင္ခပ္ခ်င္တဲ့ Widget ID ကို သိေအာင္လုပ္ထားပါ ..
ဥပမာ .. Post ရဲ႕ Widget ID ကို သိခ်င္တယ္ေပါ့ .. Layout ကေန အဲဒီ Post ရဲ႕ ညာဖက္ေအာက္ေဒါင့္က Edit ကိုႏွိပ္လိုက္ရင္ ပြင့္လာတဲ့ ၀င္းဒိုးအေသးေလးရဲက Address bar ထဲမွာ Widget ID ကို ရွာလို႔ရပါတယ္ .. Template ထဲမွာ ရွာတတ္ရင္လည္း ရပါတယ္ ..
မ်ားေသာအားျဖင့္ေတာ့ Post ရဲ႕ Widget ID က Blog1 ျဖစ္ေနေလ့ရွိပါတယ္ ..
ကဲ .. အဲဒီ Post ေတြကို ေဘာင္ခပ္ေတာ့မယ္ေပါ့ဗ်ာ ..
Template က ေန Edit HTML ကို သြားလိုက္မယ္ေပါ့

HTML ကုဒ္ေတြထဲက ]]></b:skin> ကို လိုက္ရွာပါ ..
ေတြ႕ၿပီဆိုရင္ သူ႕ရဲ႕ အေပၚမွာ ေအာက္ကကုဒ္ေတြကို ေကာ္ပီကူးၿပီး ထည့္ေပးလိုက္ပါ

#YourWidgetID { padding: 5px; border: 1px solid #ff0000; }

ကုဒ္ေတြထဲက #ff0000 ကေတာ့ ကိုယ္ ေဘာင္အျဖစ္ခပ္မယ့္ အေရာင္ေပါ့ .. 
ကုဒ္ေတြထဲမွာ အနီေရာင္နဲ႔ျပထားတဲ့ YourWidgetID ဆိုတဲ့ေနရာမွာ ကိုယ္ ေဘာင္ခပ္ခ်င္တဲ့ Widget ရဲ႕ ID ကို ထည့္ေပးရမွာပါ
ဥပမာ .. ကၽြန္ေတာ္က Post ေတြကို ေဘာင္ခပ္ခ်င္တယ္ဆိုပါေတာ့ Post ရဲ႕ ID က Blog1 ဆိုပါေတာ့
ကုဒ္က ဒီလိုျဖစ္သြားမယ္

#Blog1 {
padding: 5px;
border: 1px solid #ff0000;
}

ၿပီးရင္ေတာ့ Save Template ေပါ့ ...
ကဲ .. အဆင္ေျပပါေစဗ်ာ

နည္းပညာလမ္းေၾကာင္းေပၚကသူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး

06:57  Paing Thu Kha  No comments

Read More

Popular Post Style လွလွေလးနဲ႕ အလွဆင္မယ္...

 

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

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

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

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

အိုေခ........
မိမိတို႕ တက္ပလက္ကို ေဆ့လုိက္ပါေနာ္.... ေနာက္ထပ္ က်န္တာကေတာ့...
 မိမိတို႕ဘေလာ့ကာကို၀င္လိုက္ပါ......

Blogger  Layout  ကို၀င္ပါ.....
Add a Gadget  ကိုကလစ္ပါ....
Popular  Post  ကိုကလစ္ပါ....

 ေရြးခ်ယ္ရမွာျဖစ္ပါတယ္.. "display up to 9 posts"  and uncheck image thumbnail and snippet

 ဒါဆို မိမိတို႕လိုျခင္ေသာအေပၚကပုံစံအတိုင္းး လွပေသာ  ေပၚပ်ဴလာပို႕စ္  ေလးကိုရပါျပီ.....

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

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

06:50  Paing Thu Kha  No comments

Read More