ဘေလာ႔ပညာ

မိမိဆိုဒ္တြင္အသံုးျပဳရန္ဖန္တီးမႈမ်ား 10/22/2011

0 Comments

 

ဆိုက္ထဲမွာ ျပဳလုပ္ခ်က္လွလွေလးေတြဖန္တီးဖို႕ Friends Myanmar ထဲ ကုိယ္တင္မယ့္စာေတြ ကုိ တစ္မူထူးတဲ့ဒီဇိုင္းေလးေတြသံုးခ်င္တယ္ဆိုရင္ပဲျဖစ္ျဖစ္
ကုိယ့္စာမ်က္ႏွာကုိ ထူးျခားတဲ့သြင္ျပင္ဒီဇိုင္းေလးေတြဖန္တီးခ်င္တယ္ဆုိရင္ပဲျဖစ္ျဖစ္ အဆင္ေျပဆံုးျဖစ္မယ့္Coding ေလးေတြကုိေဖာ္ျပေပးလိုက္ပါတယ္ ။စာအသစ္တင္တဲ့အခါ ဒီကုတ္ကုိသံုးေတာ့မယ္ဆိုရင္ HTML Editor View ကုိအရင္ေျပာင္းရပါမယ္ ။ Code ၾကားခံျဖည့္စြက္ျပီးရင္ Visual Mode နဲ႕ျပန္ၾကည့္ႏိုင္ပါတယ္ ။
      အဆင္ေျပရင္ တင္ လိုက္လို႕ရပါျပီ ............ကဲကဲေအာက္မွာျပေပးလိုက္ပါတယ္ေနာ္
............................................................................................................................................
ဒါကေတာ့ ေနာက္ခံဘက္ဂေရာင္း အတြက္
ကုတ္ေလးပါ..။

<style type="text/css">
body {
background-image: url(ဒီေနရာမွာ
ဘက္ဂေရာင္းလင့္ေလးထည့္ပါ) ;
background-attachment:fixed;
background-repeat: no-repeat;
background-position:Bottom; }
</style>

အနီေရာင္ေလးေတြေနရာမွာ
စိတ္ၾကိဳက္ေျပာင္းလို႔ရပါတယ္...။
................................................................................................................................................
ဒါေလးကေတာ့ Text Box
အတြက္ကုတ္ေလးပါ

<form method="post" action="">
<textarea name="comments" cols="60" rows="5">
စာေတြဒီေနရာမွာရိုက္ထည့္ပါ.....
</textarea><br>
</form>
..................................................................................................................................................
ဒါေလးကေတာ့ box အတြက္ျဖစ္ပါတယ္

<table width=50% style="border:2px dotted
hotpink;" cellpadding="4" cellspacing="4"><tr><td
style="border:2px dotted lightpink;"><font
size="1">ဒီေနရာမွာအေၾကာင္းအရာေရးပါ</td></tr></table>

<table width=50% cellpadding="6" cellspacing="2"
style="border:double 5px #9900FF,"><tr><td
style="border:double 5px #9900FF;">ဒီေနရာမွာအေၾကာင္းအရာေရးပါ</td></tr></table>
................................................................................................................................................
ဒါေလးကေတာ့ သူ႔ကိုႏွိပ္လိုက္ရင္
စာမ်က္ႏွာအေပၚဆံုးကိုေရာက္သြားမယ့္ ကုတ္ေလးပါ

<div align="center">
<p id="top"><a href="#" temp_href="#"><img
src="http://img140.imageshack.us/img140/5843/top1.png"
width="70" height="45" border="0" alt="Back to the Top"
title="အေပၚသို႔"></a></p>

လင့္ေနရာမွာေတာ့ မိမိၾကိဳက္တဲ့
ပံုစံေျပာင္းထည့္လို႔ရပါတယ္...။
..................................................................................................................................................
ဒါကေတာ့ Flash ဖိုင္ေတြကိုစာမ်က္ႏွာမွာတင္မယ့္
ကုတ္ေလးပါ

<embed
src=" ဒီေနရာမွာ *.swf
ဖိုင္ရွိတဲ့လင့္ေလးထည့္ေပါ့ " ="" wmode="transparent"
allowfullscreen="true" allowscriptaccess="always"
height="300" width="460">
*.swf ဖိုင္ကိုအရင္ upload တင္ရပါမယ္ ျပီးေတာ့မွ
ဖိုင္ရွိတဲ့လင့္ကိုထည့္ရမွာျဖစ္ပါတယ္။
  Height,widthေတြေနရာမွာေတာ့လိုတဲ့ အရြယ္အစားကို
အစားထိုးေျပာင္းလို႔ရပါတယ္။
..............................................................................................................................................
ဒါကေတာ့ စာလံုးအရြယ္အစားနဲ႔
အေရာင္ေတြအတြက္ပါ

<Font size ="2" color
="green">ဒီလိုေလးျဖစ္သြားပါမယ္</font>
<Font size ="3" color
="blue">ဒီလိုေလးျဖစ္သြားပါမယ္</font>
<Font size ="4" color
="yellow">ဒီလိုေလးျဖစ္သြားပါမယ္</font>
လိုအပ္တဲ့အရြယ္နဲ႔ အေရာင္ကို ၾကိဳက္သလိုျပန္ျပင္လို႔ရပါတယ္။
................................................................................................................................................

ဒါကေတာ့ လင့္ခ်ိတ္တဲ့
ကုတ္ေလးပဲျဖစ္ပါတယ္

<a
href=" ဒီေနရာမွာ ေပးသြားေစခ်င္တဲ့
လင့္ကိုထည့္ပါ "
target="_blank"> ဒီေနရာမွာက
မိမိေဖၚျပခ်င္တဲ့အေၾကာင္းအရာေပါ့ </a>



ေဖၚျပခ်င္တဲ့ေနရာမွာ စာသားသက္သက္ေရးလဲရတယ္ ဒါမွမဟုတ္
ဓာတ္ပံုေလးနဲ႔ လုပ္လဲရပါတယ္ ဓာတ္ပံုေလးနဲ႔ ေဖၚျပမယ္ဆိုရင္ေတာ့
ဒီလိုေလးပါ

<a href=" ဒီေနရာမွာ ေပးသြားေစခ်င္တဲ့
လင့္ကိုထည့္ပါ "
target="_blank"> <img style="width:
280px; height:50px;"
src=" ဒီေနရာမွာ ဓာတ္ပံု လင့္ေလးထည့္ပါ
"
alt=""/> </a>

ဒီလိုေလးရပါလိမ့္မယ္ ကုတ္မ်ားအေၾကာင္း
.............................................

ဒါေလးကေတာ့ လင့္ ကို ေထာက္လိုက္ရင္
အေရာင္ေျပာင္းေအာင္လုပ္တာပါ

<style
type="text/css"> <!-- A:link { text-decoration: none;
color:yellow
} A:visited { text-decoration: none; color:red} A:hover { text-decoration:
none; color:green } -->
</style>

ပံုမွန္ လင့္အေရာင္ ။ ေမာက္စ္ျဖင့္ေထာက္လိုက္ေသာအေရာင္ ။ ၾကည့္ျပီးသြားေသာအေရာင္
.......................................................

ဒါေလးကေတာ့ စာလံုးေပၚကို ေထာက္လိုက္ရင္
အေရာင္ေျပာင္းေအာင္လုပ္တာပါ

<b onmouseout="this.style.color = 'black';"
onmouseover="this.style.color
= 'red';"
align="justify">ဒီေနရာမွာအေၾကာင္းအရာထည့္ပါ </b>


.................................................

ဒါကေတာ့ မိမိစာမ်က္ႏွာကိုဖြင့္လိုက္တာနဲ႔
သတိေပးတဲ့စာေလးေပၚလာေအာင္လုပ္တာပါ

<SCRIPT language="JavaScript">
<!-- hide from old browsers

alert("ဒီေနရာမွာမိမိေပၚေစခ်င္တဲ့စာသားေတြေရးပါ");

//-->
</SCRIPT>


.............................................

ဒါေလးကေတာ့ Tab bar
မွာစာသားေလးေတြေျပးေနေအာင္လုပ္တာပါ

<script language="javascript" type="text/javascript">
msg = " ဒီေနရာမွာ စာသားထည့္ပါ ";
msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0,
pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",150);
}
scrollMSG();
</script>


.............................................

ဒါေလးကေတာ့ သင့္စာမ်က္ႏွာကို Print လုပ္မဲ့
ကုတ္ေလးပါ

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (window.print) {
document.write('<form>'
+ '<input type=button name=print value="Print" '
+ 'onClick="javascript:window.print()"></form>');
}
// End -->
</script>


.............................................

ဒါေလးကေတာ့ Drop Down List
အတြက္ျဖစ္ပါတယ္

<form><select
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
style="width: 140px;">
<option>ဒီေနရာမွာ
ေခါင္းစဥ္ထည့္ပါ<!-- change the links with your own
--></option>
<option value="ဒီေနရာမွာ လင့္
ထည့္ပါ"> ဒီေနရာမွာ နာမည္ထည့္
</option>
<option value="ဒီေနရာမွာ လင့္
ထည့္ပါ"> ဒီေနရာမွာ နာမည္ထည့္
</option>
<option value="ဒီေနရာမွာ လင့္
ထည့္ပါ"> ဒီေနရာမွာ နာမည္ထည့္
</option>
</select></form>


.............................................

ဒါေလးကေတာ့ ဇယားအတြက္ ကုတ္ေလးပါ

<table border = "1">
<caption> ဒီေနရာမွာ
ေဖၚျပခ်က္</caption>
<tr><th>ေခါင္းစဥ္
၁</th><th> ေခါင္းစဥ္
၂ </th></tr>
<tr><td> အမွတ္စဥ္ ၁/၁
</td><td> အမွတ္စဥ္ ၁/၂
</td></tr>
<tr><td> အမွတ္စဥ္
၂/၁</td><td> အမွတ္စဥ္
၂/၂</td></tr>
</table>


.............................................

ဒါေလးကေတာ့ ဇယားကြက္ထဲမွာ Drop down List
ထည့္တဲ့ကုတ္ေလးပါ

<table border="0" cellspacing="0" align="center">
<tr>
<td>
<form><select
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
style="width: 140px;">
<option>----Title-----<!--
change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL
ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<td>
<form><select
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
style="width: 140px;">
<option>----Title-----<!--
change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL
ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<tr><td>
<form><select
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
style="width: 140px;">
<option>----Title-----<!--
change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL
ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<td>
<form><select
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
style="width: 140px;">
<option>----Title-----<!--
change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL
ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td></tr>
<td>
<form><select
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
style="width: 140px;">
<option>----Title-----<!--
change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL
ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<td>
<form><select
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
style="width: 140px;">
<option>----Title-----<!--
change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL
ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
</tr>
</table>


........................................................

ဒါေလးကေတာ့ Google Search
အတြက္ကုတ္ေလးပါ

<FORM method=GET action=http://www.google.com/custom>
<INPUT TYPE=text name=q size=14 maxlength=255 value="">
<INPUT type=submit name=sa VALUE="ရွာမယ္"><br>
<input type=hidden name=domains value="ning.com">
<input type=radio name=sitesearch value="" checked>Google
<br>
<input type=radio name=sitesearch value="ning.com">
ning.com
</FORM>


.............................................

ဒါေလးကေတာ့
လင့္ဘက္ဂေရာင္းအတြက္ကုတ္ေလးပါ

a:hover {
color:#FF0000;
text-decoration:none;
background:transparent url(ဒီေနရာမွာ *.gif
လင့္ေလးထည့္ပါ);
}



............................................

ဒါကေတာ့ comment wall
ေနာက္ခံဘက္ဂေရာင္းအတြက္ပါ

/*---pic in comment wall---*/
#xg_profiles_chatterwall_post_comment{
color: #ff6000;
background-color:transparent!important;
background-image:url(ဒီေနရာမွာ ဓာတ္ပံု
လင့္ေလးထည့္ပါ);
background-repeat: no-repeat;
background-position:bottom;
background-attachment:relative;}



ဒါေလးကေတာ့ comment wall toolbar
မွာပံုေလးေတြထည့္ခ်င္ရင္ေပါ့

/*---pic in comment wall toolbar---*/
.texteditor_toolbar {
background-image:url( ဒီေနရာမွာ URL
ထည့္ပါ )!important;
border:2px ridge black;
width:500px;
height:50px;
}


.............................................

ဒါေလးကေတာ့ network Icon
အတြက္ျဖစ္ပါတယ္

<link rel="icon" type="image/gif" href=" ဒီေနရာမွာ Icon လင့္ေလးထည့္ေပးပါ ">


.............................................

ဒါကေတာ့ website Header မွာ Flash
ထည့္ဖို႔ပါ

<script language="JavaScript">
//insert under the NingBar only if the NingBar exists
var ningBar = document.getElementById('xn_bar');
if(ningBar) { var headlinerAd = document.createElement('div');
headlinerAd.id='headliner_ad'; headlinerAd.innerHTML = '<div
style="font-size: 20pt; float: center;
color: #FF0000; border: 1px; background-color: transparent; text-align: center;">   </div>';
ningBar.parentNode.insertBefore(headlinerAd,ningBar.nextSibling);}</script>




.............................................

ဒါေလးကေတာ့ စာမ်က္ႏွာေပၚမွာ
Floating
အေနနဲ႔ေပၚေအာင္လုပ္တာပါ

<div style="xg-p:fixed;top:20px;right:0px;">
ဒီေနရာမွာ
အေၾကာင္းအရာေရးပါ</div>



ဒီေနရာမွာ စာသားတင္မကပဲ ဓာတ္ပံုေတြ Flash
ေတြကိုပါေပၚေအာင္လုပ္လို္႔ရပါတယ္
Position ကိုေတာ့ မိမိ လိုသလိုျပင္ဆင္ယူလို႔ရပါတယ္ (စာလံုး အျပာ၊
အနီ)


.............................................

ဒါကေတာ့ အေပၚဆံုးက navigation bar အတြက္
ပါ

#xg_navigation { margin-top:1em; background: url(
ဒီေနရာမွာ ဓာတ္ပံု လင့္ ထည့္ပါ ) top
repeat-x; height: 60px;
border-top:2px ridge (transparent);
border-right:2px ridge (transparent);
border-center:2px ridge (transparent);
border-bottom:2px ridge (transparent);
}


...........................................

ဒါကေတာ့ Title Bar အတြက္ကုတ္ေလးပါ

.xg_module_head {
background-color:transparent;
background-image:url( ဒီေနရာမွာ ဓာတ္ပံု
လင့္ေလးထည့္ေပးပါ );
background-repeat:repeat;
margin-bottom:0em;
}


...............................................

ဒါေလးကေတာ့ စာမ်က္ႏွာ ေအာက္ေျခမွာ
ထည့္ခ်င္ရာထည့္ဖို႔အတြက္

#xg_foot {
background-image:url(ဒီေနရာမွာ jpeg, gif, png
ဖိုင္ လင့္ေလးထည့္ပါ );
}


.............................................

ဒါေလးကေတာ့
စာသားေတြေရြ႕ေနေအာင္လုပ္တဲ့ေကာင္ေလးပါ

<marquee>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee direction=right>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee behavior=alternate>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>


ကုတ္ေတြကုိ HTML နဲ႕ Java Script ေတြကုိသံုးထားပါတယ္
ေက်နပ္ႏွစ္သက္လိမ့္မယ္လို႕ေမွ်ာ္လင့္ပါတယ္..
ကုိယ့္စာမ်က္ႏွာကို အလွဆံုးျပင္ဆင္ႏိုင္ၾကပါေစ......