အိုင္တီဖိုးသားေလး(နည္းပညာ)

Showing posts with label ဘေလာ့အလွဆင္ဖို႕. Show all posts

Navigation လွလွေလး ဖန္တီးၾကရေအာင္

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

(သင္ခန္းစာမစခင္မွာ ႀကိဳတင္ေျပာထားခ်င္တာေလးရွိပါတယ္၊ ယခုလက္ရွိ facebook မွာ တင္ရတာျဖစ္တဲ့အတြက္ ပံုနဲ႔တကြ ေဖာ္ျပဖို႔ အခက္အခဲရွိပါတယ္၊ note အေနနဲ႔တင္ရင္ ျဖစ္ေသာ္လဲ note အေနနဲ႔တင္ရင္ စိတ္၀င္စားမႈ နည္းတဲ့အတြက္ လက္ရွိသင္ခန္းစာေတြကို pdf file နဲ႔ ေအာက္မွာ တင္ေပးထားမွာျဖစ္သလို ေရးၿပီးသား ကုဒ္ေတြကိုလဲ အလြယ္တကူ Download ရယူၿပီး စမ္းသပ္ၾကည့္ႏိုင္ပါတယ္၊ ဒါကိုမွ နားမလည္ႏိုင္ေသးဘူးဆိုရင္ေတာ့ comment ခ်န္၍ေသာ္လည္းေကာင္း၊ brightermyanmar@gmail.com သို႔ email ပို႔၍ေသာ္လည္းေကာင္း ေမးျမန္းႏိုင္ပါေၾကာင္း ႀကိဳတင္ အသိေပးအပ္ပါတယ္ခင္ဗ်ာ)

သင္ခန္းႏွင့္ပါတ္သက္လို႔ နည္းနည္းေလးေျပာခ်င္ပါတယ္။ HTML ကို CSS နဲ႔ အလွဆင္ရာမွာ Inline style, Internal style ႏွင့္ External style ဟူ၍ (၃) မ်ိဳး ရွိေသာ္လည္း External style ကိုပဲ အသံုးျပဳသြားပါမယ္။

ပထမဆံုး HTML file ကို ေအာက္ပါအတိုင္းတည္ေဆာက္ပါမယ္။
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Brighter Myanmar</title>
</head>
<body>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</nav>
</body>
</html>

အထက္ပါကုဒ္ကို မိမိႏွစ္သက္ရာ file name ေပးၿပီး .html ျဖင့္ save လိုက္ပါ။

ေနာက္တစ္ဆင့္အေနနဲ႔ Css file ကို တည္ေဆာက္ရပါမယ္။ file နာမည္ကို style.css လို႔ နာမည္ေပးပါမယ္။ ၎ file ကို HTML file နဲ႔ ခ်ိပ္ဆက္အလုပ္လုပ္ရန္ ေအာက္ပါအတိုင္း <header> tab အတြင္းမွ </title> အပိတ္ေအာက္မွာ ေရးပါမယ္။

<title>Brighter Myanmar</title>
<link rel="stylesheet" href="style.css" />

CSS file တည္ေဆာက္ျခင္း စတင္ၾကရေအာင္။
ပထမဆံုး Css တည္ေဆာက္တိုင္း ေအာက္ပါ code ကို ထည့္သင့္ပါတယ္။

*{
margin:0;
padding:0;
}

select လုပ္ထားတဲ့ selector * ေလးကေတာ့ body အတြင္းမွ tab ေတြ အားလံုးကို select မွတ္တဲ့ အဓိပၸါယ္ပါပဲ။ ဘာလို႔ margin:0; , padding:0; ထားတာလဲဆိုေတာ့ နဂိုမူလအတိုင္းဆို <html> ႏွင့္ </html> အၾကားက tab ေတြ တစ္ခုနဲ႔တစ္ခုၾကား အလိုအေလွ်ာက္ 5- pixels(5px) ကြာေ၀းေနမွာျဖစ္ပါတယ္။

ေနာက္ပိုင္း Website တစ္ခုလံုးတည္ေဆာက္ရာမွာ tab ေတြအားလံုးရဲ့ margin ႏွင့္ padding ေတြရဲ့တန္ဖိုးကို လိုအပ္သလို သတ္မွတ္ေပးမွာျဖစ္ပါတယ္။

လက္ရွိအခ်ိန္မွာ run ၾကည့္လိုက္ရင္ေတာ့ အရင္ပံုစံနဲ႔မတူဘဲ margin:0 ရဲ့ အဓိပၸါယ္ကို သိရမွာျဖစ္ပါတယ္။ maring ကို 0 ထားလိုက္တဲ့အတြက္ အေပၚဘက္နဲ႔ ဘယ္ဘက္မွာ ေဘာင္ကပ္သြားတာကိုေတြ႔ရပါတယ္။

ေနာက္တစ္ဆင့္အေနနဲ႔ Navigation ရဲ့ အက်ယ္နဲ႔ ေနာက္ခံအေရာင္ကို ေအာက္ပါအတိုင္း ေပးပါမယ္။

nav{
width:1000px;
background:skyblue;
margin:0 auto;
}

အထက္ပါကုဒ္မွာ margin:0 auto; ဆိုတာကိုရွင္းပါမယ္ ေရွ႕က 0 က အထက္နဲ႔ေအာက္ဘက္ရဲ့ margin ကို 0 ထားမယ္လို႔ေျပာပါတယ္၊ ေနာက္က auto ဆိုတာကေတာ့ ဘယ္ဘက္နဲ႔ညာဘက္ကို အလိုလိုတစ္၀က္ဆီခြဲလိုက္တာပါပဲ။

ေနာက္တစ္ဆင့္အေနနဲ႔ေအာက္ပါ ကုဒ္ကိုေရးပါမယ္။

ul li{
width:200px;
background:chocolate;
line-height:35px;
text-align:center;
list-style:none;
}

List item တစ္ခုခ်င္းဆီရဲ့ အက်ယ္ကို ၂၀၀ ထားပါမယ္၊ ဘာလို႔လဲဆိုေတာ့ nav ရဲ့ အက်ယ္ကို ၁၀၀၀ ေပးခဲ့လို႔ပါပဲ၊ list item က ၅ ခုယူထားတဲ့အတြက္ တစ္ခုကို ၂၀၀ ေပးပါတယ္။

ေနာက္တစ္ခုက list ရဲ့ ေနာက္ခံအေရာင္ကို chocolate ဆိုတဲ့အေရာင္ေပးပါမယ္။ အေရာင္စပ္တာ ညံ့သည့္အတြက္ အေရာင္ေတြကို နာမည္ေတြနဲ႔ပဲ အမ်ားဆံုးအသံုးျပဳသြားမွာပါ။ ေနာက္တစ္ေၾကာင္းျဖစ္တဲ့ line-height ဆိုတာကေတာ့ list ရဲ့ အထက္ေအာက္ အက်ယ္ပါပဲ၊ ဒီေနရာမွာ height ကိုသံုးရင္ list ရဲ့အထဲက စာလံုးေတြ (Content)ဟာ အထက္ေအာက္အလယ္မွာေနရာယူမွာမဟုတ္ပါဘူး၊ ဒါေၾကာင့္ line-height ကို သံုးရတာပါ။ ေနာက္တစ္ခု text-align:center; ဆိုတာကေတာ့ list item ရဲ့ width အက်ယ္ 200 pixel ရဲ့အလယ္မွာ ေနရာယူမယ္လို႔ ဆိုလိုပါတယ္။ ေနာက္တစ္ခု list-style:none; ဆိုတာကေတာ့ list တစ္ခုခ်င္းဆီရဲ့ေရွ႕က အစက္အေပ်ာက္ေလးေတြကို ေဖ်ာက္တာပါပဲ၊ ဒီေနရာမွာ မေဖ်ာက္ခ်င္ဘဲ တျခား စတိုင္ေလးေတြလဲသံုးလို႔ရပါတယ္။ ဒါေတြကေတာ့ square, circle,disc စတာေတြလဲ အသံုးျပဳႏိုင္ပါတယ္။

ေနာက္တစ္ဆင့္အေနနဲ႔ vertical လိုက္ျဖစ္ေနတဲ့ list ေတြကို horizontal အျဖစ္ေျပာင္းလဲေစဖို႔ အထက္ပါကုဒ္ ေအာက္မွာပဲ float:left; ကိုသံုးရပါမယ္။

float:left;

List items ေတြကို horizontal အျဖစ္ေျပာင္းလဲၿပီး ကၽြန္ေတာ္တို႔လိုခ်င္တဲ့ စတိုင္ လွလွေလးျဖစ္ေအာင္ ေအာက္ပါကုဒ္ေတြေရးရပါမယ္။

ul li{
width:200px;
background:chocolate;
line-height:35px;
text-align:center;
list-style:none;
float:left;
border-right:2px groove sienna;
-moz-box-sizing:border-box;
}
ul li:first-child{
border-left:2px groove sienna;
}
ul li a{
text-decoration:none;
}

border-right:2px groove black; ဆိုတာကေတာ့ List တစ္ခုခ်င္းဆီရဲ့ ညာဘက္မွာ border ေပးမွာျဖစ္ပါတယ္၊ border အထူကို 2px ေပးပါတယ္။ groove ဆိုတာကေတာ့ border ရဲ့ style ပါပဲ။ မ်ားေသာအားျဖင့္ ဒီေနရာမွာ solid ကိုသံုးၾကပါတယ္။ ကၽြန္ေတာ္ကေတာ့ ပိုလွေအာင္ groove ကိုသံုးလိုက္တာပါ။ sienna ဆိုတာကေတာ့ အေရာင္နာမည္တစ္ခုပါ။ chocolate ထက္ပိုၿပီးထင္တဲ့အေရာင္ကိုေရြးထားတာျဖစ္ပါတယ္။ ေနာက္တစ္ခု -moz-box-sizing:border-box; ဆိုတာကိုေသခ်ာရွင္းျပပါမယ္။ ပံုမွန္အတိုင္းဆို border 2px ထည့္လိုက္ရင္ List ေတြရဲ့ width ဟာ 2px ဆီ ထပ္ၿပီးေတာ့ က်ယ္သြားပါတယ္၊ ကၽြန္ေတာ္တို႔ nav ကို 1000px ယူခဲ့တဲ့အတြက္ List ၅ ခုအတြက္ 200px ဆီပဲရမွာပါ။ border အတြက္ 2px ထပ္ေပါင္းထည့္လိုက္ရင္ ေနာက္ဆံုး List ဟာ ေအာက္ကိုအလိုလိုေရာက္သြားပါလိိမ့္မယ္၊ ဒါေၾကာင့္ box-sizing:border-box; ကိုသံုးရတာပါ။ဒီလိုသံုးလိုက္လို႔ border တစ္ခုခ်င္းဆီအတြက္ 2px ေနရာမယူေတာ့ပါဘူး၊ ေရွ႕ဆံုးက ေရးထားတဲ့ -moz- ဆိုတာကေတာ့ ဒီ box-sizing:border-box; ကုဒ္ကို Mozilla မွာ သံုးရင္ Mozilla က မသိမွာမို႔ Mozilla အတြက္ -moz- ကိုေရွ႕ဆံုးက ထည့္ေပးရတာပါ။ Google Chrome အတြက္ကေတာ့ -webkit- ကိုသံုးပါတယ္။ Internet Explorer အတြက္ -ms- ကိုသံုးပါတယ္ Opera အတြက္ -o- ကို ထည့္သြင္းေရးသားရမွာျဖစ္ပါတယ္။

ေနာက္တစ္ခုအေနနဲ႔ ul li:first-child{ border-left:2px groove sienna; } ဆိုတာကေတာ့ ပထမဆံုး List ရဲ့ ဘယ္ဘက္ကိုလဲ border 2px ေပးမယ္လို႔ ဆိုလိုပါတယ္။

ul li a{ text-decoration:none;} ဆိုတာကေတာ့ Home ဆိုတဲ့ စာသားေလးေတြရဲ့ေအာက္က underline ေတြကို ေဖ်ာက္လိုက္တာျဖစ္ပါတယ္၊ ျပန္ထည့္ခ်င္တယ္ဆိုရင္ေတာ့ text-decoration:underline; ကိုသံုးရမွာပါ။ underline အစား blink ဆိုတာကိုလဲ အသံုးျပဳႏိုင္ပါတယ္၊ blink ကိုသံုးလိုက္ရင္ေတာ့ စာလံုးေလးေတြက ေပၚလိုက္ ေပ်ာက္လိုက္ျဖစ္ေနမွာ ျဖစ္ပါတယ္။

ေနာက္ဆံုးအေနနဲ႔ ပံုမွာျပထားတဲ့အတိုင္း Navigation ေဘးဘက္ေတြမွာ အခၽြန္ေလးေတြထပ္ထည့္ပါမယ္။ ဒီအခၽြန္ေလးေတြထည့္ဖို႔ ေရးနည္းမ်ိဳးစံုရွိတဲ့အထဲက အထက္မွာသတ္မွတ္ထားတဲ့ nav ရဲ့ width 1000 ကိုျပန္လည္ျပင္ဆင္ျခင္းမရွိဘဲ လုပ္လို႔ရတဲ့ နည္းလမ္းကိုသံုးသြားမွာပါ။ ဒီအတြက္ ေအာက္ပါ ကုဒ္ေတြလိုပါတယ္။

nav:before{
content:"";
font-size:0px;
border:17.5px solid chocolate;
position:absolute;
right:100%;
border-left-color:transparent;
}
nav:after{
content:"";
font-size:0px;
border:17.5px solid chocolate;
position:absolute;
left:100%;
border-right-color:transparent;
}

အထက္ပါကုဒ္မွာ nav:before ဆိုတဲ့ selector ရဲ့အဓိပၸါယ္ကေတာ့ ေစာေစာကရွိၿပီးသား nav ရဲ့ေရွ႕မွာ ေနရာသတ္မွတ္လိုက္တာပါ။ ေနာက္ဆံုး result ပံုရဲ့ ေရွ႕ဆံုးက ၾတိဂံအခၽြန္ေလးရဖို႔ပါပဲ။ content:””; ဆိုတာကေတာ့ ဘာမွေရးမထားတဲ့ content တစ္ခုကိုသတ္မွတ္တာပါ။ ဒီဘာမွမရွိတဲ့ content ကိုပဲ ကၽြန္ေတာ္တို႔ Border ယူၿပီး သံုးသြားမွာပါ။ font-size:0px; ဆိုတာကေတာ့ လက္ရွိ content မွာ ဘာမွမေရးဘဲ ဗလာျဖစ္ေနေပမယ့္ font-size ရဲ့ height ကို 16 pixel အလိုလိုယူထားျခင္းျဖစ္လို႔ font-size ကို 0 သတ္မွတ္ေပးရတာပါ။ ဒီေနရာမွာ နားမလည္ႏိုင္တာ တစ္ခုရွိပါလိမ့္မယ္။ font-size ကလဲ 0 ေပးထားတယ္၊ content မွာလဲ ဘာစာမွေရးမထားဘဲ ဘယ္လိုလုပ္ Border ေပးလို႔ရမလဲေပါ့၊ ဒါေပမယ့္ ရပါတယ္၊ ဘာမွမရွိဘူးဆိုေပမယ့္ အဲ့ဒီမရွိဘဲယူထားတဲ့ ေနရာေလးကိုပဲ Border ယူသြားတာပါ။ border:17.5px solid chocolate; ဆိုတာကေတာ့ border အထူကို 17.5px ထားပါမယ္။ ဘာလို႔လဲဆိုေတာ့ ကၽြန္ေတာ္တို႔ List ေတြရဲ့ height ကို 35px ထားခဲ့လို႔ပါပဲ။ 17.5px ရွိတဲ့ border ၂ ခုေပါင္းလိုက္မွ 35px အျမင့္ရွိတဲ့ List ရဲ့ height ကို မီမွာျဖစ္လို႔ပါ။ solid ဆိုတာကေတာ့ မ်ဥ္ေၾကာင္းလို႔ တစ္ဆက္တည္းယူတာပါ၊ chocolate ဆိုတာကေတာ့ List ရဲ့ အေရာင္နဲ႔တူေအာင္ ယူလိုက္တာပါ။
ဆက္ၿပီး position:absolute; ထားဖို႔အတြက္ nav မွာသြားၿပီး position:relative; ထားရပါမယ္။ ေအာက္ပါကုဒ္ကိုၾကည့္လိုက္ပါ။

position:relative;

selector တစ္ခုအတြင္းမွာ position ကို absolute ထားလိုက္ရင္ page တစ္ခုလံုးမွာ ႀကိဳက္ႏွစ္သက္တဲ့ေနရာကိုေရႊ႕ႏိုင္ပါတယ္။ ဒါေပမယ့္ nav မွာ position:relative; ထားျခင္းအားျဖင့္ nav ကေနပဲ စမွတ္ယူၿပီး ေရႊးလွ်ားမယ္လို႔ ဆိုလိုပါတယ္။ ခု လက္ရွိ right:100%; ထားလိုက္ျခင္းဟာ nav ဆိုတဲ့ Element တစ္ခုလံုး ရဲ့ ညာဘက္ကေန တစ္ရာ ရာခိုင္ႏႈန္းေရြ႕မယ္လို႔ဆိုလိုပါတယ္။ 100% ေရႊ႕လိုက္ရင္ 100% အေက်ာ္ျဖစ္တဲ့ nav ရဲ့ ဘယ္ဘက္မွာ လာကပ္မွာျဖစ္ပါတယ္။ ေနာက္တစ္ေၾကာင္းအေနနဲ႔ border-left-color:transparent; မွာ transparent ဆိုတာ ထိုးေဖာက္ျမင္ႏိုင္ျခင္း ဆိုတဲ့အဓိပၸါယ္အရ border ရဲ့ ဘယ္ဘက္က အေရာင္ကို ေဖ်ာက္ေပးလိုက္ျခင္းျဖစ္ပါတယ္။ ဒါေၾကာင့္ ကၽြန္ေတာ္တို႔လိုခ်င္တဲ့ အခၽြန္ေလးရလာျခင္းျဖစ္ပါတယ္။

ေအာက္က nav:after ဆိုတဲ့အရာကလဲ nav:before နဲ႔အတူတူပါပဲ။ ဘယ္ညာပဲကြာသြားတာပါ။ ဒါေၾကာင့္ left ကို right ေျပာင္း ၊ right ကို left ေျပာင္းလိုက္ရင္ အဆင္ေျပသြားမွာပါ။ ဒီသင္ခန္းစာကို ဒီေလာက္နဲ႔ပဲ အဆံုးသတ္ပါရေစ။ ေနာက္ဆံုးလုပ္သြားခ်င္တာက ကၽြန္ေတာ္တို႔ရဲ့ Navigation ေလးကို အေပၚမွာ ကပ္မေနေစဘဲ ေအာက္ကို နည္းနည္းဆင္းသြားေစဖို႔ nav ရဲ့ margin top ကို 50px ထားလိုက္ပါမယ္။

nav{
width:1000px;
background:skyblue;
margin:0 auto;
position:relative;
margin-top:50px;
}

အထက္ပါကုဒ္အတိုင္း margin-top:50px; ကိုမေရးဘဲ margin:0 auto; ေနရာမွာ margin:50px auto 0px; လို႔ျပင္လိုက္ရင္လဲ ရပါတယ္။ ဒါေပမယ့္ အထက္မွာေရးထားတာကို မျပင္ခ်င္တဲ့အတြက္ ေအာက္ကတစ္ေၾကာင္းသီးသန္႔ေရးလိုက္တာပါ။
ခုလိုဖတ္ေပးတာေက်းဇူးအမ်ားႀကီးတင္ပါတယ္ခင္ဗ်ာ။ ေနာက္ရက္မွာ ဆက္လက္တင္ျပပါဦးမယ္။ နားမလည္တာမ်ားရွိခဲ့ရင္ facebook မွာ comment ခ်န္ခဲ့ျခင္းျဖင့္လည္းေကာင္း၊ brightermyanmar@gmail.com သို႔ စာေရးသားေပးပို႔၍လည္းေကာင္း ေမးျမန္ႏိုင္ပါတယ္ခင္ဗ်ာ။

ဒီပိုုစ့္ကိုု pdf ဖိုုင္ အျဖစ္ ေဒါင္းလုုဒ္လုုပ္လိုု ပါက ေအာက္ပါ လင့္တြင္း ေဒါင္းလုုပ္ရယူႏုုိင္ပါသည္
http://goo.gl/2sGPuy

ဒီ project code ကိုု ေအာက္ပါ လင့္ မွာ ေဒါင္းပါ
http://goo.gl/2IWOha

Brighter Myanmar
We Code the World

Read User's Comments(0)

မိမိ Blog ေတြ Web Site ေတြမွာ Music Player ဒီဇိုင္းလန္းလန္းေလးထည့္သြင္းျပီး အသံုးျပဳခ်င္တဲ့သူေတြအတြက္ပါ။

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

Fig ~ 1

အခု တစ္ေလာ ကၽြန္ေတာ့ Facebook က Group မွာေကာ တျခား Group ေတြမွာေကာ Blog ေတြ Web Site ေတြ ဖြင့္လိုက္ရင္ အဲ့ဒီ Blog ေတြ Web Site ေတြကေန သီခ်င္းေတြ Auto လာေနတဲ့ Music Player လွလွေလးနဲ႕ ဒီဇိုင္းလန္းလန္းေလးေတြ အသံုးျပဳခ်င္တဲ့ Blogger သမားေလးေတြ Web Development သမားေလးေတြ အတြက္ ကၽြန္ေတာ့ Blog ေလးရဲ႕ ညာဘက္အေပၚနားေလးမွာ ဆင္ထားတဲ့ ပံုစံမ်ိဳးေလး ကိုယ့္ Blog , Web Site မွာလဲ တန္ဆာဆင္ျခင္ပါတယ္ဆိုရင္ေတာ့ ကၽြန္ေတာ္ အသံုးျပဳနည္းေလးကို အေသးစိတ္မဟုတ္ခဲ့ရင္ေတာင္ စာဖတ္ပရိတ္သတ္တို႕ နားလည္ရလြယ္ကူေအာင္ ေသခ်ာရွင္းျပေပးပါ့မယ္ဗ်ာ။ပံုေလးေတြနဲ႕ စာေလးေတြနဲ႕ေပါ့ဗ်ာ။အရင္ဦး ဆံုး ကၽြန္ေတာ္တို႕က www.podsnack.com ကို သြားလိုက္ပါ။ျပီးရင္ ေအာက္ကပံုေလးအတိုင္း Bulid a playlist ဆိုတဲ့စာတန္းေလးကို Click တစ္ခ်က္ႏွိပ္ျပီးဆက္သြားလိုက္ပါ။

www.podsnack.com


Fig ~ 2

ျပီးသြားရင္ေတာ့ ကၽြန္ေတာ္တို႕ Sign In ၀င္ရမွာ ျဖစ္ပါတယ္ဗ်ာ။ဒီ Web Site ေလးရဲ႕ ထူးျခားခ်က္ တစ္ခုကေတာ့ Sign Up လုပ္စရာမလိုပဲ အသံုးျပဳသူက Facebook , Google Mail , Twitter Account တစ္ခုခုရွိရမွာျဖစ္ျပီး အဲ့ဒီ Account ေတြထဲက ကိုယ္အဆင္ေျပတဲ့ မိမိစိတ္ၾကိဳက္ Account တစ္ခုနဲ႕ Sign In With Facebook, Google, Twitter တစ္ခုခုနဲ႕ ၀င္လိုက္ပါ။ေအာက္က ပံုေလးအတိုင္းေပါ့။

Fig ~ 3

ျပီးသြားရင္ေတာ့ ေအာက္က ပံုေလးထဲကအတိုင္း စာမ်က္ႏွာကို ေရာက္သြားမွာျဖစ္ပါတယ္ဗ်ာ။အဲ့ဒီမွာ သူက ေပးထားတာက Youtube က သီခ်င္းေတြကို Upload ေပးမွာလား။Computer ကသီခ်င္းေတြကို Upload ေပးမွာလား။ဒါမွ မဟုတ္ Record အေနနဲ႕ တင္မွာလားဆိုျပီး 3 မ်ိဳးေပးထားပါတယ္ဗ်ာ။အဲ့ဒီ Web Site ေလးက ဘယ္လိုပံုစံမ်ိဳးေလးလုပ္ထားလဲ ဆိုေတာ့ ကၽြန္ေတာ္တို႕ Online Radio ေတြရဲ႕ Style ပံုစံမ်ိဳး ဖန္တီးရယူႏိုင္ျပီး ကိုယ့္ Blog, Web Site မွာလဲ Online Radio တစ္ခုအေနနဲ႕ လႊင့္တင္ေပးလို႕လဲ ရပါေသးတယ္။

Fig ~ 4

အဲ့ဒီ မွာ မိမိ စိတ္ၾကိဳက္သီခ်င္းတစ္ပုဒ္ကို ရွာျပီး Upload တင္လိုက္ပါ။ဒါ ပထမ အဆင့္လို႕လဲ ေျပာလို႕ရပါတယ္။ေနာက္ တစ္ခုကေတာ့ File Upload တင္ျပီးသြားရင္ေတာ့ နံပါတ္ 2 အဆင့္အေနနဲ႕ ကၽြန္ေတာ္တို႕က ကိုယ္လိုခ်င္တဲ့ Music Player ရဲ႕ Theme ေတြ Music Player ရဲ႕ Setting ေတြကို မိမိ စိတ္ၾကိဳက္ခ်ိန္ညိွေပးရမွာျဖစ္ပါတယ္။Theme ေတြကေတာ့ အမ်ားၾကီးပါပဲ။မိမိ စိတ္ၾကိဳက္ Theme နဲ႕ Colour ေတြကိုေရႊးခ်ယ္ႏိုင္ပါတယ္ဗ်ာ။ေအာက္မွာ ကၽြန္ေတာ္ ဓာတ္ပံုေလးနဲ႕ နမူနာျပေပးထားပါတယ္ဗ်ာ။

Fig ~ 5

ျပီးသြားရင္ေတာ့ ကိုယ္လိုခ်င္တဲ့ Theme ရယ္ မိမိ စိတ္ၾကိဳက္ Colour ျပီးေတာ့ Music Player ရဲ႕ Setting ေတြကို ခ်ိန္ညိွရပါမယ္။ေအာက္မွာ ကၽြန္ေတာ္ နမူနာခ်ိန္ေပးထားတဲ့ ပံုေလးကို ၾကည့္လိုက္ပါဦးဗ်ာ။

Fig ~ 6

အဲ့ဒီ မွာ မိမိစိတ္ၾကိဳက္ Music Player ရဲ႕ Setting ေတြကို ခ်ိန္းႏိုင္ပါတယ္။Music Player ရဲ႕ Weight , Height တို႕ ခ်ိန္ျပီးပါက မိမိ Music Player ကို Auto Play လုပ္မလား။ Loop လုပ္မလားေပါ့။ေနာက္တစ္ခုက မိမိ Music Player ရဲ႕ အသံထြက္အား Volume ကိုဘယ္ေလာက္ ထားမလဲဆိုတာကိုေပါ့။အားလံုး ကို မိမိ စိတ္ၾကိဳက္ ျပင္ဆင္ႏိုင္ပါတယ္ဗ်ာ။ျပီးသြားရင္ေတာ့ နံပါတ္ 3 အဆင့္ျဖစ္တဲ့ Finish ဆိုတဲ့ စာတန္းေလးကို Click လိုက္ရံုပါပဲ။ျပီးသြားရင္ေတာ့ ေအာက္က ပံုေလးထဲက စာမ်က္ႏွာအတိုင္းေရာက္သြားမွာျဖစ္ပါတယ္ဗ်ာ။

Fig ~ 7

ျပီးသြားရင္ေတာ့ အလယ္က Embed ဆိုတဲ့ ေနရာေလးကို Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။အဲ့ဒီမွာ Use Free (With Watermark) နဲ႕ Next နဲ႕ ရွိပါတယ္။Next ကို သံုးမယ္ဆိုရင္ေတာ့ Premium membership အေနနဲ႕ ပိုက္ဆံေပးျပီး အသံုးျပဳရမွာျဖစ္သလို Use Free ကို သံုးမယ္ဆိုရင္ေတာ့ အလကားသံုးရမွာေပါ့ဗ်ာ။ေအာက္က ပံုေလးအတိုင္းေရာက္သြားမွာ ျဖစ္ပါတယ္ဗ်ာ။

Fig ~ 8

အဲ့ဒီမွာ ကၽြန္ေတာ္တို႕က Blog , Web Site ေတြရဲ႕ Slide Bar မွာအသံုးျပဳမွာ ျဖစ္လို႕ iFrame (standard) Code ေတြပဲယူသံုးမွာျဖစ္ပါတယ္။အဲ့ဒီမွာ သူေပးထားတဲ့ Code ေတြကို Copy ကူးယူျပီး ကၽြန္ေတာ္ နမူနာအေနနဲ႕ Blogspot ကေနပဲ ရွင္းျပပါ့မယ္ဗ်ာ။ခုနက ကူးယူထားတဲ့ Code ေတြကို
1.Blogger Dashboard
2.Layout
3.Add A Gadget
4.Html/Javascript တို႕တြင္ Paste ကူးထည့္ျပီး Save လိုက္ယံုပါပဲ။ျပီးရင္ မိမိ Blog , Web Site ေတြကိုဖြင့္ၾကည့္လိုက္ပါ။ကၽြန္ေတာ့ Blog ေလးမွာ ဆင္ထားတဲ့ အတိုင္း သီခ်င္းေတြ မိမိထည့္သြင္းထားသေလာက္ အဆက္မျပတ္လာေနမွာျဖစ္ပါတယ္ဗ်ာ။ဒါဆိုရင္ မိမိ Blog , Web Site ေလးကို လာလည္ရင္း ဂီတသံစဥ္လန္းလန္းေလးေတြနဲ႕ မိမိရဲ႕ စာဖတ္ပရိတ္သတ္ေတြကို လာလည္ခ်င္လာေအာင္ နည္းလမ္းတစ္မ်ိဳးနဲ႕ စြဲေဆာင္ႏိုင္မွာျဖစ္ပါတယ္ဗ်ာ။ကဲ.........ဒီ ေလာက္ဆိုရင္ ကၽြန္ေတာ့ IT Bank ကစာဖတ္ပရိတ္သတ္ေတြ နဲ႕ ကၽြန္ေတာ့လိုပဲ Web Development သမားေတြ Blogger သမားေလးေတြအားလံုး အဆင္ေျပၾကလိမ့္မယ္လို႕ ထင္ပါတယ္ဗ်ာ။ဒီ Post ေလးကို ကၽြန္ေတာ္ အခ်ိန္ကုန္ခံ မ်က္လံုးအေညာင္းခံျပီး ေသခ်ာရွင္းျပေပးထားပါတယ္ဗ်ာ။စာဖတ္ပရိတ္သတ္ေတြ အားလံုးလဲ နားလည္ၾကလိမ့္မယ္လို႕ ထင္ပါတယ္ဗ်ာ။ဒီ Post ေလးကို ကူးယူခ်င္ရင္ လႊတ္လပ္စြာကူးယူႏိုင္ပါတယ္ဗ်ာ။ဒါေပမဲ့ Post ပိုင္ရွင္မူရင္း ကၽြန္ေတာ့ IT Bank Site ေလးကိုေတာ့ ျပန္လည္ ေဖာ္ျပေပးၾကလို႕ေတာ့ ကၽြန္ေတာ္ ေမတၱာရပ္ခံခ်င္ပါတယ္ဗ်ာ.။
ၾကိဳးစားလ်က္.......!
(Yekyawphyo)

http://welcometoitbank.blogspot.com/မွ ကူးယူတင္ျပပါသည္...

Read User's Comments(0)

ကိုပိုင္ Music ပေလယာတစ္ခုျပဳလုပ္မယ္

Posted by ေတာ္၀င္မင္းသားေလး | Labels: နည္းပညာ ဗဟုသုတ, ဘေလာ့အလွဆင္ဖို႕

ေရးသာေရးရမွာလိုင္းမေကာင္းဘူးဗ်ာ ယခုလင့္သို႕ သြား ပါ အသင္း ၀င္ပါ

၀င္ျပီးရင္မီႏူးမွ မီးမီးစာမ်က္နာကို ကလစ္ပါ

ကလစ္ျပီး ပါ က မိမိ စာမ်က္နာ ကိုေရာက္သြား ပါမယ္

ေရာက္သြား ပါ က ေအာက္ပံုေလးအတိုင္း ရွိမယ္ သိတင္တင္ဖို႕

ေတြ႕ ရင္ သီခ်င္းထည့္ရန္ကို နွိပ္ပါ

ရင္ ကလစ္ပါ သိခ်င္းရွာခိုင္းမယ္ ထည့္ေပလိုက္ပါ

က်ြန္ေတာ္ကေတာ့ တစ္ပုဒ္ထည္း ထည့္ ထားတယ္

ျပီး ရင္ အေပၚ ပံုတိုင္း UPLOAD လုပ္ပါ

ျပီးရင္နာမည္ေတြ ဘာေတြေမး လာရင္ေရး ေပးျပီ

ေဆ႕လိုက္ပါ ေနာ္ ဒါဆို ပေလယာတစ္ခု ရပါျပီ

မိမိစာမ်က္နာကိုျပန္သြား ပါ ျပီးရင္ သိခ်င္းေနရာမွာ

ေလ ယာေလး ေရာက္ေနမယ္ ဒါဆို HTML ကုဒ္ ယူရေအာင္

အေပၚမွာေတြ႕တဲ့တိုင္း (1) နွိပ္ ျပီး ရင္ (2) ကိုနွိ ပ္ဗ်ာ ကုဒ္ေတြေပၚ လာမယ္ ဒါဆို ရင္ေတာ့ RightClick နဲ႕ Copy ယူ ျပီ မိမိ ၾကိဳက္နွစ္ သက္ရာဆိုက္မွာ ထည့္ နိုင္ ပါျပီ အားလံုးကို ေက်းဇူးတင္ ပါတယ္္လုပ္လို႕ အဆင္မေျပ ရင္ ဒီမွာလုပ္ျပီသားေလး ယူမယ္ ေအာ္ငေလး (နည္းပညာ)

Read User's Comments(0)

ဘေလာ့မွာ ေနာက္ဆုံးတင္သမွ် ဆိုတာေလးကို အလွပဆုံး လုပ္ၾကမယ္

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

မဂၤလာပါ သည္ေန႕တင္တဲ့ နည္းပညာေလးကေတာ့ မိမိတို႕ ဘေလာ့ေတြမွာ ေနာက္ဆုံးတင္ထားသမွ် ဆိုတဲ့ Recent Post ေလးကို အလန္းေလး လုပ္တင္နည္းပါ အရင္က ကုဒ္ေတြကို HTML မွာ၀င္ေရာက္

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

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

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

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

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

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

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

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

Read User's Comments(0)

ဘေလာ့ link ကာလာ နဲ႕ font ဆိုဒ္အလြယ္ျပင္နည္း

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

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

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

.post a{font-weight:bold;font-size:12px;color:#000000;text-decoration:none}
.post a:hover{text-decoration:underline}

အဲကုဒ္ေတြထဲမွာ SIZE 12px ဆိုတာကို ခ်ိန္းေပးရမယ္... လိုသေလာက္ေပါ့ colour #00000 ေနရာ
ကိုေတာ့ မိမိႏွစ္သက္တဲ့ ကာလာကုဒ္ကို အစားထိုးေပါ့... ဒါဆို ာအဆင္ေျပပါျပီ...

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

Read User's Comments(0)

Blog အတြက္ Textarea လန္းလန္းေလး မ်ား

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

ကၽြန္ေတာ္ blog မိတ္ေဆြမ်ား အတြက္ textarea ေလးေတြ တင္ျပလိုက္ပါတယ္ textarea ကို အသံုးျပဳျပီး ေရမယ္ ဆိုရင္ေတာ့ Post ေရးတဲ့ အခါမွာ HTML နဲ ့ေရးရမွာ ျဖစ္ပါတယ္ ေရးျပီးသြားျပီ ဆိုရင္ Compose ျပန္ေျပာင္းျပီ Publish ႏွိပ္လိုက္ရင္ ရပါျပီ.....

( ပံုစံ ၁ )

.

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(251, 239, 255); border-color: rgb(202, 61, 217); border-radius: 7px 7px 7px 7px; border-style: solid; border-width: 1px 1px 1px 20px; color: #ca3dd9; height: 32px; line-height: 1.5em; padding: 5px; width: 400px;"> ေရးခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.

( ပံုစံ ၂ )

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 2px inset rgb(204, 204, 204); color: white; line-height: 1.5em; padding: 0pt 7px;"> ေရးခ်င္တာေရးပါ </textarea>

( ပံုစံ ၃ )

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 10px 10px 10px 10px; background: none repeat scroll 0% 0% rgb(191, 250, 255); border-color: rgb(255, 233, 0) rgb(64, 255, 31) rgb(64, 255, 31) rgb(255, 233, 0); border-style: solid; border-width: 4px; color: red; line-height: 1.5em; padding: 5px;"> ေရးခ်င္တာေရးပါ </textarea>

( ပံုစံ ၄ )

<textarea cols="20" name="code" rows="3" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% rgb(255, 218, 175); border: 2px ridge rgb(127, 69, 0); color: #7f4500; line-height: 1.5em; padding: 5px;"> ေရးခ်င္တာေရးပါ </textarea>

( ပံုစံ ၅ )

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(218, 255, 191); border: 2px dashed rgb(41, 95, 0); color: #295f00; line-height: 1.5em; padding: 5px;"> ေရခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.

( ပံုစံ ၆ )

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(239, 0, 144); border: 3px dotted rgb(255, 239, 249); color: #ffeff9; line-height: 1.5em; padding: 5px;"> ေရခ်င္တာေရးပါ </textarea>

( ပံုစံ ၇ )

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(255, 0, 10); color: white; line-height: 1.5em; padding: 5px;"> ေရခ်င္တာေရးပါ </textarea>

( ပံုစံ ၈ )

<textarea name="code" rows="2" cols="50" style="background: #EFF5FB; color: #000; border: 1px solid #ccc; border-left: 20px solid #0174DF; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;">   ေရခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.

( ပံုစံ ၉ )

<textarea name="code" rows="2" cols="40" style="background:#E0ECF8; color:#FF0000; border-bottom: 4px solid #FE2E2E; border-right: 4px solid #01DF01; border-top: 4px solid #01DF01; border-left: 4px solid #FE2E2E; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ေရခ်င္တာေရးပါ </textarea>

( ပံုစံ ၁၀ )

<textarea name="code" rows="2" cols="42" style="background: #FAAC58; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"> ေရခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

( ပံုစံ ၁၁ )

   <textarea name="code" rows="2" cols="42" style="background:#AC58FA; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"> ေရခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

( ပံုစံ ၁၂ )

<textarea style="height: 31px; width: 400px;"> ေရခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

မိတ္ေဆြမ်ားအားလံုးကို ေလးစားလွ်က္.....

ref 'http://kyawkothein.blogspot.com/

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

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

Read User's Comments(0)

မိမိဘေလာ့ပို႔စ္ရဲ့ေနာက္ခံ အေရာင္ေလး ေျပာင္းျပီးလွပသြားေအာင္ တင္ၾကည့္ခ်င္သလား

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

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

Copy ယူျပီးေတာ့#01DF01 ေနရာမွာ ေျပာင္းလဲထည့္ပါ...။ျပီးရင္ Compose ကိုႏွိပ္ျပီး

ဒီမွာထည့္ ဆိုတဲ့စာသားကိုဖ်က္ျပီးၾကိဳက္သလိုစာရိုက္တင္ႏိုင္ပါျပီ...ဗ်ာ

<div style="background-color: #01DF01; padding: 5px 8px 5px 8px;">
ဒီမွာထည့္
</div>

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

add the red line at the BEGINNING of your post.
add the div tag in blue at the END of your post.
replace the part in green with your own color (search for color's hex value)

"Your text here...." is where the Post content goes

It's done by wrapping your Post content into a "div" element. You can apply this setting anytime to your already published posts as well or you can change/remove it later.

Here's the example of the placed code in the Post Edit box:

blogger posts color, backgrounds, blogger tricks

How to Add a Background Image in a Blogger Post

Add the following code just at the beginning and end of your post content.

<div style="background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...
</div>

in green, you need to paste the URL address of your hosted picture (use Photobucket, Tinypic etc.)
the red line has to be added at the beginning of your post.
the blue part has to be added where your post ends.
"Your text here...." is where your Post content should be

Now click Publish and you are done.

Read User's Comments(0)

How to Change for your blogger Template's Each Post Background Colour

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

မူရင္းအတိုင္းပရင့္ရိုက္ျပီးေတာ့ သိမ္းထားတာပါ က်ေနာ္လိုတဲ့အခါ ရွာရလြယ္ေအာင္လို႔ ပါ .

Read User's Comments(0)

ဘေလာ့မွာ ေနာက္ခံပုံ ထည့္နည္း

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

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

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

      body { ဆိုတာကိုရွာ လုိက္ပါ ေတြ႕တာနဲ႕ သူ႕အနီး၀န္းက်င္မွာ ေအာက္က လိုစာသားေလးေတြ႕မယ္...

background-image: url(URL address of your image);

အဲအခါမွ URL address of your image ေနရာမွာဘဲ မိမိတို႕ ထည့္လိုတဲ့ ပုံဲရဲ႕႕ လင့္ကို
ထည့္ေပးလုိက္ပါ... ျပီးတာနဲ႕ preview နဲ႕႕ တခ်က္စစ္ၾကည့္ပါ..ေသျခာမွ save template ေပါ့..

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia1uCSmSQkbi0hIWb6xzupwGd0B7bYZyFu0VIA7Xh25dvtBGpxoDJAwETIXHIlUDcBNRGiUDyM3bMJCqY5xua6SomKvZoobHaCJktrfLc8vqFcu-kEdzet-c9VWJow00cKZNvEyF_Hq4yJ/s1600/music.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBLItMLBXaMZx2gcYXD_jxFixQ-lnUvWbcA2pQubzlP8jg26iyqpIfBvFDGKZ4DSXqjY1Bjwe31DFsM2AyyU7yrtz66ZJ1rt9DRbN9i00wW2HljmosB80vZH9k76NUDiIEuIQ9DBJbbJM0/s1600/new+3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUU5ovr3enpfrxnviT20E8vFSeqteOsH_xUUVvUZ0TlHddB55Py-sr5woOpoX9Nd7A-8Cqoggrn4K4uwQYawH2O8JFacZVag4cyN_ArCruYl-fWw2TKBazzIMbeRKQK5GptYR_UVIoBqZt/s1600/new.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjwwOqgzTiXpATSNMee68xJQ-Zl1bjyeY6fLbq8iwC2wrZVOGvubxkHrm9OMbqj5K22-DDevLGAfhEL6Os80Ci2OjEtbOwqkPDjIAnrsivmwy6UMT3U2JhEvnZYgb5i52gl4Hxm9eYqRKj/s1600/new+2.gif

Read User's Comments(0)

ပုံေတြကို ZOOM နဲ႕ၾကည့္နိဳင္ေအာင္တင္နည္း

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

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

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

</head> tag ကိုရွာလုိက္ပါ ေတြ႕တာနဲ႕ သူ႕ေရွကကေန ေပးထားေသာ ေအာက္ကကုဒ္ေတြ ထည့္ေပးလိုက္ပါ...

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://wierdwalker.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>

jQuery(function($){

$(&#39;a.zoom&#39;).easyZoom();

});

</script>

ဆက္လက္ျပီးေတာ့ ]]></b:skin> tag ကိုရွာလုိက္ပါအုံး ေတြ႕ျပီဆိုတာနဲ႕ သူ႕ေရွ႕ကဘဲေနာ္
ေအာက္ကေပးထားေသာကုဒ္ေတြ ထည့္လိုက္ပါ...

#easy_zoom{
width:600px;
height:400px; 
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

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

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

ပို႕စ္တင္တဲ့ ေနရာ ေရာက္တာနဲ႕ အေပၚက Html ဆိုတာကလစ္ပါ..ကလစ္ျပီးတာနဲ႕ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ကို ယူထည့္ေပးလိုက္ပါ.. အဲမွာဘဲေနာ္
ကုဒ္ထဲမွာ Image Url ဆိုတာေတြ႕မယ္ ႏွစ္ေနရာပါ..အဲေနရာေတြမွာ မိမိတို႕ တင္လိုတဲ့ ပုံရဲ႕
လင့္ကို ထည့္ေပးလုိက္ယုံပါဘဲ....

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="Image url" imageanchor="1" 
style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="205" src="Image url" width="320" /></a></div>

မွတ္ခ်က္. .... Image Url ေနရာမွာ မိမိတို႕ ပုံလင့္နဲ႕ အစားထိုးရမည္။
205.....320 ေတြမွာ လိုအပ္သလို ေျပာင္းနိဳင္ပါသည္။

ေကေကေနာ္..မေကလဲ ေအာ္သာေအာ္ခဲ့ဗ်ာ............ေိေိ

ေကေကေနာ္..မေကလဲ ေအာ္သာေအာ္ခဲ့ဗ်ာ............ေိေိ

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

Read User's Comments(0)

(Header)ေပၚမွာ Add Page Elementထည့္နည္းေလးပါ

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

မိမိရဲ႕ဘေလာ့ပိုမိုၿပီးလွပေစရန္(Header)ေပၚမွာ Add Page Elementထည့္နည္းေလးပါ၊
မသိၾကေသးတဲ့ခ်စ္မိတ္ေဆြေတြအတြက္ပါ ေလးလည္းေလးစာပါတယ္၊

မိမိဘေလာ့ေလးလွခ်င္ရင္ေတာ့နည္းနည္းအပင္ပန္းခံတာေပါ့ေနာ္..ဟီး....
Add Page Elements ကို Blog Header မွာဘယ္လိုထည့္ရလဲဆိုရင္ ဘေလာ့ ေခါင္းစီးပုံေတြလည္း

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

ထည့္မရတာ ရွိပါတယ္ မရတာဆို အျပည့္မေပၚတာမ်ိဳးေတြေပါ့ေနာ္... အဲခါမ်ိဳးက် ခုနည္းေလးနဲ႕

သုံးရပါတယ္...

ေအာက္မွာ လုပ္နည္းေလးပါေနာ္.......

►1- Blogger Singin ၀င္လိုက္ပါ။
►2- DASHBOARD ကိုသြားလိုက္ပါ။
►3- TEMPLATE ကိုကလစ္ပါ..။
►4- EDIT HTML ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5- EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

ေအာက္က Code ကိုရွာပါ၊

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

ေတြ႕ျပီဆိုရင္ေအာက္က Code အတိုင္းေျပာင္းေပးပါ၊

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

မျပီးေသးဘူးေနာက္တစ္ခုက်န္ေသးတယ္ ေအာက္က Code ကိုထပ္ရွာပါ၊

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

ေတြ႕ျပီဆိုရင္ေအာက္က Code အတိုင္းျပန္ေျပာင္းေပးလိုက္ပါ၊

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

လုပ္နည္းေလးက လြယ္ကူလြန္းလွပါတယ္ ေနာ္.. Save Template လုပ္လုိက္ပါ...
ဘေလာ့ Layout ကိုၾကည့္လိုက္ပါ အဆင္သင့္ ရွိေနပါလိမ့္မယ္...
add Page Elements ကေအာက္ပံုအတိုင္းေပၚလာလိမ့္မည္။

Read User's Comments(0)

ဘေလာ့ကို ပိုမိုျမန္ဆန္ေစဖို႕ နည္းလမ္းေလး ( ရွယ္ေနာ္)

Posted by ေတာ္၀င္မင္းသားေလး | Labels: ဘေလာ့အလွဆင္ဖို႕

အားေလာ့လုံးမဂၤလာပါဗ်ာ.. ဘေလာ့ခရီးသည္ မိတ္ေဆြအေပါင္း ရႊင္ေပ်ာ္ ခ်မ္းသာၾကပါေစလို႕ ေမတၱာပို႕သလုိက္ရပါတယ္... သည္တစ္ခါ တင္ေပးမဲ့ နည္းပညာေလးကေတာ့ အေတာ္ေလး အသုံး၀င္ပါတယ္.. ကြ်န္ေတာ္တို႕ ဘေလာ့ေတြမွာ loading time အခ်ိန္ၾကာျမင့္ မွ

ဘေလာ့ပြင့္က်လာတာမ်ိဳး ရွိၾကပါတယ္.. အဲတာကေတာ့ အဓိက မိမိတို႕ဘေလာ့မွာ Widget ေတြ

အရမ္းမ်ားေနရင္ ေသာ္၄င္း video ေတြ ဖလက္ေတြ အရမ္းမ်ားေနေသာ္၄င္း ျဖစ္တတ္ပါတယ္..

ဒါေၾကာင့္ မိမိတို႕ဘေလာ့မွာ Widget ေတြကို လိုသည္ထက္ပိုမတင္သင့္ေၾကာင္း ေျပာပါရေစ..

သည္နည္းေလးဟာ မိမိတို႕ဘေလာ့ကို အသင့္တင့္ ပိုမိုျမန္ဆန္ေစတဲ့ နည္းပညာေလးဆိုမမွားပါဘူးးးးး

ကုဒ္ေလးေတြကို ထည့္ေပးလုိက္ရံုပါဘဲ... ကဲ စမယ္ေနာ္..

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

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({placeholder : "http://beautifulbloggerwidgets.googlecode.com/files/grey.gif",threshold : 200});
});
</script>

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

ပိုမိုျမန္ဆန္လာတာေတာ့ ကြ်န္ေတာ္ လက္ေတြ႕ သုံးထားပါတယ္...

ျပီးတာနဲ႕ Save Template လိုက္ပါေနာ္........

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

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

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

လယ္တီေျမသား www.ledimye.blogspot.com

ဘေလာ့ခရီးသည္ http://aungsanmks.com/

ဓမၼႏွင့္စာေပနန္းေတာ္ http://ninilayy.com/

Read User's Comments(0)

အိုင္တီဖိုးသားေလး(နည္းပညာ)

Popular Posts

Contributors

Blog Archive

Another Templates

Labels

Followers

Navigation လွလွေလး ဖန္တီးၾကရေအာင္

မိမိ Blog ေတြ Web Site ေတြမွာ Music Player ဒီဇိုင္းလန္းလန္းေလးထည့္သြင္းျပီး အသံုးျပဳခ်င္တဲ့သူေတြအတြက္ပါ။

ကိုပိုင္ Music ပေလယာတစ္ခုျပဳလုပ္မယ္

ဘေလာ့မွာ ေနာက္ဆုံးတင္သမွ် ဆိုတာေလးကို အလွပဆုံး လုပ္ၾကမယ္

Popular Post စတိုင္းအလန္း ( ၁ )

ဘေလာ့ link ကာလာ နဲ႕ font ဆိုဒ္အလြယ္ျပင္နည္း

Blog အတြက္ Textarea လန္းလန္းေလး မ်ား

မိမိဘေလာ့ပို႔စ္ရဲ့ေနာက္ခံ အေရာင္ေလး ေျပာင္းျပီးလွပသြားေအာင္ တင္ၾကည့္ခ်င္သလား

How to Change for your blogger Template's Each Post Background Colour

ဘေလာ့မွာ ေနာက္ခံပုံ ထည့္နည္း

ပုံေတြကို ZOOM နဲ႕ၾကည့္နိဳင္ေအာင္တင္နည္း

(Header)ေပၚမွာ Add Page Elementထည့္နည္းေလးပါ

ဘေလာ့ကို ပိုမိုျမန္ဆန္ေစဖို႕ နည္းလမ္းေလး ( ရွယ္ေနာ္)