Wednesday, 12 December 2012

က်ေနာ့္ Blog ရဲ႕ Button ေလးေတြပါ


<p style="text-shadow:4px 4px 8px #33ff00;">Saw Kyaw; 3 September 2012 01:35
အေတာ္ေလးေကာင္းပါတယ္ဗ်ာ PDF ဖိုင္ေလးနဲ႔ ေဒါင္းျပီး ဖတ္လို႕ရေအာင္လုပ္ထားေပးပါလား။ ေနာက္တခုက ဒီဆိုက္ကို ညႊန္းခ်င္ရငါ သူမ်ားေတြလို ( မိမိဆိုက္ကို ညႊန္ရန္) ဆိုတာေလးကို ဆိုက္ညာဘက္မွာ ထညိ့္ထားေပးပါလား က်ေနာ့္ဆိုက္မွာညႊန္းထားခ်င္လို႔ပါဗ်ာ။
ေလးစားစြာျဖင့္
ေစာေက်ာ္ဦး
ဒီ Comment ေလးက Blogger လူသစ္မ်ားအတြက္ မသိမျဖစ္ Blog အသံုးျပဳနည္းမ်ား ပိုစ့္မွာ ေရးထားခဲ့တဲ့ Comment ေလးပါ..။ အဲဒီပိုစ့္ကို အဲဒီေန႔ကတည္းက တခါတည္း PDF ဖိုင္နဲ႔ ထုတ္ေပးထားခဲ့ပါတယ္..။ ေဒါင္းယူလိုက္ရံုပါပဲ..။
အရင္တုန္းက သူငယ္ခ်င္းတစ္ေယာက္လည္း ဒါမ်ိဳ Button ေလးေတြ လုပ္ထားေပးဖို႔ ေတာင္းဆိုဖူးပါတယ္..။ အဲ့တုန္းကေတာ့ စာေရးဖို႔ေလာက္ပဲ စိတ္ကမ်ားေနလို႔ ဒီ Button ေလးေတြ ဖန္တီးဖို႔ စိတ္မပါခဲ့ပါဘူး.. အခု အစ္ကိုေစာေက်ာ္ဦးက ေတာင္းဆိုလာလို႔ က်ေနာ့္ဆိုဒ္ေလးကို ညႊန္းခ်င္တဲ့ တျခား Blogger ေတြလည္းရွိခဲ့ရင္ အဆင္ေျပေအာင္ ဒီ Button ေလးေတြကို ဖန္တီးခဲ့တာပါ..။ ေနာက္တခုက ဒီ Button ေလးေတြကို လုပ္ခဲ့တာ က်ေနာ္နာမည္ၾကီးခ်င္လို႔ မဟုတ္ပါဘူး..။ ၾကြားဝါခ်င္တဲ့စိတ္လည္း နည္းနည္းမွ မရွိခဲ့ပါဘူး..။ ကြန္ပ်ဴတာကို မကိုင္တတ္ေသးတဲ့သူေတာင္၊ မသံုးတတ္ေသးတဲ့သူေတာင္ က်ေနာ့္ Blog ေလးထဲက အသံုးျပဳနည္းေလးေတြနဲ႔ ေန႔စဥ္ေလ့က်င့္သြားမယ္ဆိုရင္ မၾကာခင္မွာ ကြန္ပ်ဴတာကို ဆရာၾကီးအဆင့္မဟုတ္ရင္ေတာင္ ကြ်မ္းကြ်မ္းက်င္က်င္ အသံုးျပဳတတ္လိမ့္မယ္ဆိုတာ က်ေနာ္လံုးဝ ယံုၾကည္ပါတယ္..။ ဒါေၾကာင့္ ကြန္ပ်ဴတာ အေျခခံနည္းပညာမ်ား ျပန္႔ပြါးေရးအတြက္.. ျမန္မာျပည္သားတိုင္း ကြန္ပ်ဴတာ အသံုးျပဳတတ္ဖို႔အတြက္ ရည္ရြယ္ျပီး က်ေနာ့္ Blog ရဲ႕ ဒီ Button ေလးေတြကို ဖန္တီးခဲ့တာပါ..။
ေအာက္မွာေတာ့ မိမိတို႔ရဲ႕ Blog နဲ႔ အဆင္ေျပမယ့္ Button ေလးေတြကို လင့္ေနရာမွာ အစားထိုးျပီး ေျပာင္းထည့္ရံုပါပဲ..။ ဒီေအာက္က HTML ကုဒ္ကို copy ယူျပီး မိမိတို႔ Blog ရဲ႕ Design>>Add a Gadget>>HTML/JavaScript မွာ paste နဲ႔ထည့္ျပီး Save လိုက္ရင္ ရပါျပီ..

<br />
<div class="Lwinminbo" style="center"><a href="http://lwinminbo.blogspot.com/"><br />
<img src="http://i1250.photobucket.com/albums/hh524/lwinminbo/c2115fed.gif" alt="Lwinminbo" width="200" height="50" /><br />
</a><br />
</div><!--end button code box--><br />

အေပၚက HTML ကုဒ္ထဲက အနီေရာင္နဲ႔ ျပထားတဲ့ Button လင့္ေနရာမွာ ေအာက္က Button လင့္ေလးေတြထဲက မိမိတို႔ရဲ႕ Blog နဲ႔ လိုက္ဖက္မယ့္ ဒီဇိုင္း ေနာက္ခံအေရာင္ကို ေရြးျပီး အစားထိုး ထည့္ေပးလိုက္ရင္.. မိမိတို႔ရဲ႕ Blog မွာ ေပၚလာမယ့္ Button ေလးလည္း ေျပာင္းလဲသြားပါလိမ့္မယ္..။ က်ေနာ့္Blog ေလးကို ညႊန္းထားခ်င္တဲ့ Blogger မ်ားအတြက္ အဆင္ေျပေအာင္ ေနာက္ခံ အျဖဴေရာင္သံုးတဲ့ Blog ေတြအတြက္ အျဖဴေရာင္လို႔ ေရးထားျပီး.. အနက္ေရာင္သံုးတဲ့ Blog ေတြအတြက္ အနက္ေရာင္္ (အမဲေရာင္) လို႔ ေရးထားပါတယ္..။ ေနာက္တခုက မိမိတို႔ Blog ရဲ႕ Sidebar မွာ ထည့္တဲ့အခါ တခ်ိုဳ႕ Button ေတြက ရွည္ေနခဲ့ရင္ (ၾကီးေနခဲ့ရင္) အေပၚမွာ ျပထားတဲ့ HTML  ကုဒ္ထဲက
(width="200" height="50") ဆိုတဲ့ ေနရာမွာ (width="150" height="40") စသျဖင့္ မိမိတို႔ Blog နဲ႔  အဆင္ေျပမယ့္ ဆိုဒ္ကို ေျပာင္းျပီး ထည့္သံုးႏိုင္ပါတယ္..။ မူလအေရာင္မ်ား (မူရင္းအေရာင္) ဆိုတာကေတာ့ က်ေနာ့္ Blog ရဲ့ ေနာက္ခံအေရာင္နဲ႔ ျပဳလုပ္ထားတဲ့ Button ေလးေတြကို ဆိုလိုတာပါ..။ 
</p>

Lwinminbo



Lwinminbo



Lwinminbo



Button မ်ား

Lwinminbo
အျဖဴေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/3c309605.gif
အမဲေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/e0cd4f1e.gif
---------------------------------
Lwinminbo
 အျဖဴေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/da6ec05b.gif
အမဲေရာင္...   http://i1250.photobucket.com/albums/hh524/lwinminbo/cea9f69f.gif
--------------------------
Lwinminbo

အျဖဴေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/ade56707.gif
အနက္ေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/0ada5a27.gif
--------------------------

Lwinminbo
အျဖဴေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/6083e1a1.gif
အမဲေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/e83ed1db.gif
-----------------------------

Lwinminbo
မူရင္းအေရာင္..    http://i1250.photobucket.com/albums/hh524/lwinminbo/c2115fed.gif
အျဖဴေရာင္..     http://i1250.photobucket.com/albums/hh524/lwinminbo/4f06e5af.gif
အျဖဴေရာင္၂..  http://i1250.photobucket.com/albums/hh524/lwinminbo/24387935.gif
အနက္ေရာင္..   http://i1250.photobucket.com/albums/hh524/lwinminbo/9b5e7099.gif
အနက္ေရာင္၂..  http://i1250.photobucket.com/albums/hh524/lwinminbo/578be3f0.gif
--------------------------

စာလံုးဒီဇိုင္းမ်ား..

Lwinminbo
မူလအေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/d44ca7a6.gif
အျဖဴေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/138b392c.gif
အမဲေရာင္...  http://i1053.photobucket.com/albums/s474/lwinminbo1/9c9764db.gif
-------------------------------------------

Lwinminbo


မူလအေရာင္.. http://i1250.photobucket.com/albums/hh524/lwinminbo/3a3c0035.gif
အျဖဴေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/fcf52fc2.gif
အနက္ေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/2f7498e3.gif
----------------------

Lwinminbo

မူရင္းအေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/0727fee7.gif
အျဖဴေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/010ad6af.gif
အမဲေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/acf58891.gif
--------------------

Lwinminbo

မူရင္းအေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/7c43ee17.gif
အျဖဴေရာင္..  http://i1250.photobucket.com/albums/hh524/lwinminbo/9a894586.gif
အနက္ေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/095304a7.gif
-------------------------
Button မ်ား

Lwinminbo
မူလအေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/bd5beb7b.gif
အျဖဴေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/4b664c37.gif
အမဲေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/79febbfe.gif
------------------------------

Lwinminbo
မူလအေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/ab5f96d2.gif
အျဖဴေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/644f4d8a.gif
အမဲေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/34973e7b.gif
----------------------------------

Lwinminbo
မူလအေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/69891b77.gif
အျဖဴေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/e07f0644.gif
----------------------------------

Lwinminbo
မူလအေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/e40d9258.gif
အျဖဴေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/c2db2ec0.gif
အမဲေရာင္...  http://i1250.photobucket.com/albums/hh524/lwinminbo/be7879b7.gif
----------------------------------

Text Effect - Photoshop ျဖင့္စာလံုးဒီဇိုင္းမ်ား ဖန္တီးျခင္း




 ဒီေန႔ေတာ့ Photoshop နဲ႔ စာလံုး Design ေလးဖန္းတီးပံုကို photoshop အေျခခံေလးေတြ လိုခ်င္ေနတဲ့ သူငယ္ခ်င္းမ်ားအတြက္ တင္ေပးလိုက္ပါတယ္..။ သူငယ္ခ်င္းေတြကလည္း ခဏခဏနပူနစာ တိုက္ေနတာနဲ႔ မသိေသးတဲ့ သူမ်ားနဲ႔ အေဝးကသူငယ္ခ်င္းေတြအတြက္ ဒီေန႔ဒီပိုစ့္ေလး ကိုတင္လိုက္ရပါတယ္.. လုပ္ပံုလုပ္နည္းကေတာ့ သိပ္မခက္ပါဘူး..။ အေသးစိတ္ရွင္းျပထားလို႔ ပံုေတြေတာ့ နည္းနည္းမ်ားတယ္..။ အေပၚကပံုေလးကို ဘယ္လိုဖန္တီးလဲဆိုတာ ကိုတင္ျပသြားပါမယ္..
အရင္ဆံုး Photoshop ရဲ့ File ကေန New .. အဲဒီကေန Photo စာရြက္တခုကို စယူပါမယ္..။ ေအာက္ကပံုမွာ ျပထားတဲ့အတိုင္း နံပါတ္စဥ္တိုင္း ႏွိပ္သြားလိုက္ပါ..



ေအာက္ပံုမွာေတာ့ စာရြက္ျဖဴကို အေရာင္တင္မွာျဖစ္တဲ့အတြက္ ပံုေလးေတြၾကည့္ျပီး အဆင့္ဆင့္ႏွိပ္သြား ေပးလိုက္ပါ..


ေအာက္ပံုအတိုင္း 3 ေနရာက Simple ကိုကလစ္လိုက္ပါ.. 



အေပၚပံုအတိုင္း OK ေပးလိုက္ရင္.. ေဆးေရာင္ျခယ္ထားတဲ့ အကြက္ေလးေတြ ေျပာင္းသြားတာကို ေအာက္ပံုအတိုင္း ျမင္ရပါလိမ့္မယ္.. ျပီးရင္ေတာ့ ေအာက္ပံုက အနီဝိုင္းထားတဲ့အတိုင္း မိမိတို႔ စိတ္ၾကိဳက္ အေရာင္တခုကို ကလစ္လိုက္ပါ..


ျပီးရင္ေတာ့ ေအာက္ပံုအတိုင္း ေမာက္စ္မွ်ားျဖင့္ ဖိဆြဲပါ..။ 


ဒါဆိုရင္ ေနထိုးေနတဲ့ ဒီဇိုင္းေလး စာရြက္တရြက္ရလာပါျပီ... ေအာက္ကပံုမွာေတာ့ စာစေရးပါေတာ့မယ္..။ ဒါေၾကာင့္ နံပါတ္စဥ္တိုင္းႏွိပ္သြားျပီး စာလံုးအေရာင္ေရြး... စာေရးပါ..



စာလံုးအေရာင္နဲ႔ စာေရးတာကို ေအာက္ပံုမွာ ဆက္ၾကည့္ပါ.. 



စာလံုေတြကို  စိတ္ၾကိဳက္ပံုေဖၚဖို႔ ဆိုရင္ေတာ့ Type ကိုေျပာင္းေပးရပါတယ္.. လုပ္နည္းကို ေအာက္ပံုမွာ ဆက္ၾကည့္လိုက္ပါ..


Type ကိုႏွိပ္ျပီးရင္ေတာ့ ေအာက္ပံုအတိုင္း စာလံုးကို စိတ္ၾကိဳက္ေျပာင္းလို႔ ရပါျပီ.. 



အေပၚပံုအတိုင္း ျပီးရင္ေတာ့ စာလံုးကသိပ္မလွေသးပါဘူး.. ဒါေၾကာင့္ ေအာက္ပံုမွာျပထားတဲ့ အတိုင္း သြားလိုက္ပါ..


Inner Glow ရဲ့ ေဘာက္စ္ေပၚလာရင္ ေအာက္ပံုအတိုင္း ေျပာင္းလဲေပးလိုက္ပါ..။ ဒီေနရာမွာ ဒီပံုအတိုင္း လုိက္လုပ္ရမယ္လို႔ မဆိုလိုပါဘူး..။ မိမိတို႔ မ်က္စိနဲ႔ ၾကည့္လို႔ အဆင္ေျပမယ့္ စတိုင္ေလးေတြကို ေျပာင္းလဲ ရင္လည္း ရပါတယ္..။ စိတ္ၾကိဳက္လုပ္ပါ.. ျပီးရင္ေတာ့ OK ႏွိပ္လိုက္ပါ..


ေအာက္ကပံုမွာေတာ့ ေလယာတခုပြါး လိုက္ပါ.. Ctrl+Alt+Down Arrow န႔ဲ ေလယာပြါးပါမယ္.. ေရွာ့ကပ္ ကီးကိုႏွိပ္လိုက္ရင္ေတာ့ ေအာက္ပံုအတိုင္း Lwinminbo Copy ေလယာ တခုထြက္လာပါျပီ..

  
ေအာက္ကပံုကေတာ့ Copy ထြက္လာတဲ့ ေလယာကို ေျပာင္းျပန္လွန္ခ်မွာ ျဖစ္ပါတယ္.. ဆက္ၾကည့္လိုက္ပါ..



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


Fill မွာလည္း မိမိတို႔ မ်က္လံုးနဲ႔ ၾကည့္လို႔ အဆင္ေျပမယ့္ အေနအထားထိ ေလွ်ာ့ေပးပါ.. 



ျပီးရင္ေတာ့ ေအာက္ပံုမွာ ေနာက္ထပ္စာတေၾကာင္း ထပ္ရိုက္ပါမယ္.. ဆက္ၾကည့္လိုက္ပါ.. နံပါတ္စဥ္တိုင္း ႏွိပ္သြားလိုက္ပါ..





အေပၚပံုအတိုင္း စိတ္ၾကိဳက္ေရးျပီးရင္ေတာ့ Layer ကေန Type ကိုကလစ္ေပးပါ.. ေအာက္ပံု


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


Stoke ေဘာက္စ္ေပၚလာရင္ ေအာက္ပံုအတိုင္း အေရာင္ေရြးေပးပါ.. ျပီးရင္ Ok ႏိွပ္ပါ..


ေအာက္ပံုအတိုင္း Design စာလံုးမွာ ေဘာင္ကြပ္ျပီးသားျမင္ရပါျပီ... 


ဒီေနရာမွာ တခုက်န္ခဲ့ပါတယ္.. ဘာလဲဆိုေတာ့ အေပၚမွာ Lwinminbo Layer နဲ႔ Lwinminb Copy Layer ႏွစ္ခုကို အေပၚေအာက္ညီေအာင္ ၾကည့္ေကာင္းေအာင္ ညွိေပးဖို႔ပါ..။ ဒါေၾကာင့္ အဲဒီအဆင့္ကို ဒီေနရာမွာ ျပန္လုပ္ပါမယ္.. Layer ေဘာက္စ္ထဲက Lwinminbo Copy ေလယာကို တခ်က္ကလစ္ပါတယ္..


ေလယာကို ကလစ္ျပီးရင္ ေအာက္ပံုအတိုင္း ဆက္ႏွိပ္သြားပါ.. 



အေပၚပံုအတိုင္း ညီေအာင္ညွိျပီးရင္ေတာ့ Enter တခ်က္ေခါက္ေပးပါ.. ဒါဆိုေအာက္ကပံုအတိုင္း ျမင္ရမွာ ျဖစ္ပါတယ္..


စာလံုး ဒီဇိုင္း လုပ္တာျပီးဆံုးသြားပါျပီ.. ေအာက္ကပံုကေတာ့ က်ေနာ့္ စိတ္ၾကိဳက္ ပံုေလးေတြကို ျဖတ္ထည့္ ထားတာပါ.. ဓါတ္ပံု ျဖတ္ကပ္လုပ္တာကိုေတာ့ ေနာက္တင္တဲ့ ပိုစ့္မွာ ဆက္ၾကည့္ၾကပါဗ်ာ..

ေအာက္ကအဆင့္ေတြကေတာ့ ေလယာေတြ ေပါင္းျပီး သိမ္းတာပါ..။ မသိေသးတဲ့သူမ်ားကေတာ့ ဓါတ္ပံုဆိုဒ္နဲ႔ သိမ္းတာကို ဆက္ၾကည့္ေပးပါ..။ A,B ေန၇ာေတြကေန ေလယာေတြကို ေပါင္းပါမယ္..





ဒီပံုေတြအတိုင္း အဆင့္ဆင့္ ႏွိပ္သြားျပီးရင္ေတာ့ မိမိတို႔ ျပဳလုပ္လိုက္တဲ့ ပံုေလးဟာ Desktop မွာေရာက္လာပါျပီ..
အားလံုးပဲ လုပ္တတ္ကိုင္တတ္၍ အဆင္ေျပၾကပါေစဗ်ာ..