ေရာက္လာသူ မိတ္ေဆြအေပါင္းကို ကိုေဇာ္သြင္း (နည္းပညာမွ်ေ၀ျခင္း) ဆိုဒ္ေလးမွ Domain&Hosting ေႏြးေထြးစြာ ၾကိဳဆိုလိုက္ပါတယ္..အားေပးမွဳအတြက္ အထူးေက်းဇူးတင္လွ်က္...။

Sunday, May 31, 2015

✔Facebook Groupထဲမွပို႔စ္​မ်ားကိုျပန္​လည္​႐ွာ​ေဖြနည္​း✔











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 မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္... 
ဘေလာ့ခရီးသည္ 

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

[IMG]
[IMG]

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

မဂၤလာပါ  ဘေလာ့ခ်စ္ေသာပရိတ္သတ္အေပါင္းတို႕... သည္ေန႕ ေရးျဖစ္တဲ့ အေၾကာင္းရာေလးကေတာ့
ဘေလာ့တစ္ခုမွာ မရွိမျဖစ္ လိုအပ္ခ်က္ျဖစ္တဲ့  ေခါင္းစဥ္လို႕ ေခၚတဲ့ Menu ေလးေတြ ဖန္တီးနည္းပါ။
သည္နည္းေလးကို အလြယ္ဆုံးနဲ႕ မရွင္းဆုံး ျဖစ္ေအာင္ ေရးသား တင္ျပေပးထားပါတယ္... သူကေတာ့
Animated ပုံစံေလးနဲ႕ တမ်ိဳးေတာ့ လွပါတယ္... စိတ္၀င္စားမယ္ဆို ေအာက္မွာ လုပ္နည္းနဲ႕  လိုအပ္ေသာ
ကုဒ္ေတြကို ညႊန္ျပ ရွင္းလင္းထားပါတယ္... အရမ္းလြယ္ကူပါတယ္...
နည္းလမ္းကေတာ့
   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ
ေနာက္ က်လာေသာ ေဘာက္ထဲကေန ေအာက္ကပုံတိုင္းေရြးလိုက္ပါ

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



               



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

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

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

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

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

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




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

[IMG]
[IMG]

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

မဂၤလာပါ  ဘေလာ့ခ်စ္ေသာပရိတ္သတ္အေပါင္းတို႕... သည္ေန႕ ေရးျဖစ္တဲ့ အေၾကာင္းရာေလးကေတာ့
ဘေလာ့တစ္ခုမွာ မရွိမျဖစ္ လိုအပ္ခ်က္ျဖစ္တဲ့  ေခါင္းစဥ္လို႕ ေခၚတဲ့ Menu ေလးေတြ ဖန္တီးနည္းပါ။
သည္နည္းေလးကို အလြယ္ဆုံးနဲ႕ မရွင္းဆုံး ျဖစ္ေအာင္ ေရးသား တင္ျပေပးထားပါတယ္... သူကေတာ့
Animated ပုံစံေလးနဲ႕ တမ်ိဳးေတာ့ လွပါတယ္... စိတ္၀င္စားမယ္ဆို ေအာက္မွာ လုပ္နည္းနဲ႕  လိုအပ္ေသာ
ကုဒ္ေတြကို ညႊန္ျပ ရွင္းလင္းထားပါတယ္... အရမ္းလြယ္ကူပါတယ္...
နည္းလမ္းကေတာ့
   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ
ေနာက္ က်လာေသာ ေဘာက္ထဲကေန ေအာက္ကပုံတိုင္းေရြးလိုက္ပါ

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

                   


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

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

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






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

[IMG]
[IMG]

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

  မဂၤလာပါ  သည္တစ္ခါေတာ့  မိမိတို႕ဘေလာ့အတြက္ လိုအပ္ခ်က္ေလးျဖစ္တဲ့ ေခါင္းစဥ္ျဖစ္တဲ့  
Dropdown Menu ေလးေတြဘဲ ျဖစ္ပါတယ္.. သည္နည္းေလးကို အရင္ကဆို HTML ထဲ၀င္ထည့္ေနရာေကန  အခုေတာ့  အလြယ္တကူဘဲ..ထည့္နိဳင္ရန္အတြက္.. ကုဒ္မ်ားကို  အဆင္ေျပ
ေအာင္ ဖန္တီးထားပါတယ္... မူရင္း http://24work.blogspot.com/  ကေန မွ်ေ၀ျခင္းျဖစ္ပါတယ္


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




သည္ေဘာက္ေလး တိုင္းကလ္စျပီး က်လာတဲ့ ေဘာက္ထဲမွာ ေအာက္က ကုဒ္ေတြ ထည့္ေပးလုိက္ပါ။
 ပုံစံ  ( ၁ ) 
 Simple Red
 နမူနာၾကည့္ရန္   သည္မွာ   သြားလုိက္ပါ

           

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

           

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

          


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



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

[IMG]
[IMG]

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

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

 Galleria Blogger Template


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

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

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

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

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 ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>
ဘေလာ့ခရီးသည္   ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
ဘေလာ့ဆုိင္ရာနည္းပညာမ်ား{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ

အလြယ္ကူဆုံးျဖစ္တဲ့ 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 ဆိုတာကလစ္လုိက္ပါ
ဒါဆို က်လာတဲ့ေဘာက္ေလးထဲမွာဘဲ ေအာက္ကေပးထားေသာကုဒ္ေတြကို ေကာ္ပီယူထည့္လုိက္ေပါ့။


         

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

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

[IMG]
[IMG]

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 တခ်က္ေခါက္ပါက လိုျခင္ေသာကုဒ္ ေတြ႕ပါမယ္...



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

 ေနာက္တဆင့္အေနနဲ႕ကေတာ့......
ဘေလာ့ကာကို၀င္လိုက္ပါ.. 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 နဲ႕ျပန္ျပန္ၾကည့္ရင္း
စိတ္ၾကိဳက္ အရြယ္ရလာတာနဲ႕ ေဆ့နိဳင္ပါတယ္...တျခား ေနာက္ခံကာလာေတြ  ၀ိတ္ေတြလဲ ျပဳျပင္နိဳင္တာေတြပါပါတယ္.... ကုဒ္ထဲမွာ ေသချာ ၾကည့္ျပီး  ေလ့လာ လုိက္ပါေနာ္..
အဆင္ေျပပါေစ

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

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

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

[IMG]
[IMG]

Related Posts Plugin for WordPress, Blogger...