မိမိဘေလာ့မွာ HTML-Colour-Code Table ထည့္နည္း

 

ဒီအသံုးျပဳနည္းေလးကေတာ့ ဘေလာ့မိတ္ေဆြမ်ားႀကိဳက္ႏွစ္ သက္ၾကမယ္ထင္ပါတယ္. မိမိတို ့ဘေလာ့ မ်ားမွာHTML COLOUR CODE TABLE ေလးကို အလြယ္တကူ ထည့္ရန္အ တြက္ ေစတနာထားျပီး ပင္ပင္

ပမ္း ပမ္း ရွာေဖြထားတာေ လးေဝမ်ွေပးလိုက္ပါတယ္...

အဆင့့္( ၁ )

၁. Go to Dashboard, click Design, click Edit HTML.
၂. (Ctrl+F) ျဖင့္ </head> ကိုရွာျပီးေအာက္ကကုဒ္ကို အဲဒီ</head> ေအာက္မွာထည့္ေပးလိုက္ပါ.

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
< /script>
< script type='text/javascript'>
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;
function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
executeonload(init);
function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" a[0] ", " a[1] ", " a[2] ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" a[0] ", " a[1] ", " a[2] ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
< /script><!--[if gte IE 5.5000]>
< script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i )
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" img.id "' " : ""
var imgClass = (img.className) ? "class='" img.className "' " : ""
var imgTitle = (img.title) ? "title='" img.title "' " : "title='" img.alt "' "
var imgStyle = "display:inline-block;" img.style.cssText
if (img.align == "left") imgStyle = "float:left;" imgStyle
if (img.align == "right") imgStyle = "float:right;" imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" imgStyle
var strNewHTML = "<span " imgID imgClass imgTitle
" style=\"" "width:" img.width "px; height:" img.height "px;" imgStyle ";"
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
"(src=\'" img.src "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
YAHOO.util.Event.addListener(window, "load", correctPNG);
< /script>
< ![endif]-->

၃. ျပီးရင္ေတာ့ Click Save Template.

အဆင့္ ( ၂ )

1. Go to Dashboard, click Design, click Add a Gadget

2. Click 'HTML/JavaScript'

3. Place code of HTML below - into'HTML/JavaScript' ကိုသြားျပီးေအာက္ကကုဒ္ေတြကို ထည့္ေပးလိုက္ပါ.

<!--HTML-Color-Code-BEGIN-->
<center><form name="hcc" id="hcc">
< table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody>
< tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
< /td></tr>
< tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
< /td></tr>
< tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
< /td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
< /td></tr>
< /tbody></table>
< /td></tr>
< /tbody></table>
< table align="center" border="0" cellpadding="0" cellspacing="2"><tbody>
< tr height="24"><td id="vzorec" height="24" width="24">
< /td><td valign="bottom"><p>
Selected Color Code: <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p>
< /td></tr>
< /tbody></table>
< /form>
< /center>

၄. Click 'Save' and Done.


Notes:
# Selected Color Code: width="375"ေတြကိုမိမိတို ့စိတ္ႀကိဳက္ေျပာင္းလို ့ရပါတယ္.

နမူနာကိုႀကည့္ခ်င္ရင္ေတာ့ ဒီေနရာမွာ အရင္ႀကည့္လိုက္ပါ.


အဆင္မေျပတာမ်ားရွိခဲ့ရင္ေျပာခဲ့နိုင္ပါတယ္.

ေက်းဇူးတင္ပါတယ္.
http://nayminkhit.blogspot.no/2011/05/html-colour-code-table.html