Cara Pasang Kode Warna Di Blog

Bagi Sobat yang mau pasang Kode Warna di Blognya, caranya sangat mudah dan simple. Disini aku sudah sediakan 2 model Tabel kode warna, Sobat tinggal memilihnya.
Untuk memasangnya cukup ikuti langkah-langkah di bawah ini

Tabel Kode Warna 1

• Login di Akun Blog Sobat
• Di Dasbor Pilih Tata Letak
• Di Elemen Halaman Klik Tambah Gadget
• Pilih HTML/JavaScript
• Copy paste kode di bawah ini:

<table border="1" style="font-family: Verdana; font-size: 10pt" width="100%"><tbody><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>Antique_white</td><td bgcolor="#faebd7"></td><td>#FAEBD7</td></tr><tr><td>azure</td><td bgcolor="#f0ffff"></td><td>#F0FFFF</td></tr><tr><td>Bisque</td><td bgcolor="#ffe4c4"></td><td>#FFE4C4</td></tr><tr><td>blanched_almond</td><td bgcolor="#ffebcd"></td><td>#FFEBCD</td></tr><tr><td>cornsilk</td><td bgcolor="#fff8dc"></td><td>#FFF8DC</td></tr><tr><td>eggshell</td><td bgcolor="#fce6c9"></td><td>#FCE6C9</td></tr><tr><td>floral_white</td><td bgcolor="#fffaf0"></td><td>#FFFAF0</td></tr><tr><td>gainsboro</td><td bgcolor="#dcdcdc"></td><td>#DCDCDC</td></tr><tr><td>ghost_white</td><td bgcolor="#f8f8ff"></td><td>#F8F8FF</td></tr><tr><td>honeydew</td><td bgcolor="#f0fff0"></td><td>#F0FFF0</td></tr><tr><td>ivory</td><td bgcolor="#fffff0"></td><td>#FFFFF0</td></tr><tr><td>lavender</td><td bgcolor="#e6e6fa"></td><td>#E6E6FA</td></tr><tr><td>lavender_blush</td><td bgcolor="#fff0f5"></td><td>#FFF0F5</td></tr><tr><td>lemon_chiffon</td><td bgcolor="#fffacd"></td><td>#FFFACD</td></tr><tr><td>linen</td><td bgcolor="#faf0e6"></td><td>#FAF0E6</td></tr><tr><td>mint_cream</td><td bgcolor="#f5fffa"></td><td>#F5FFFA</td></tr><tr><td>misty_rose</td><td bgcolor="#ffe4e1"></td><td>#FFE4E1</td></tr><tr><td>moccasin</td><td bgcolor="#ffe4b5"></td><td>#FFE4B5</td></tr><tr><td>navajo_white</td><td bgcolor="#ffdead"></td><td>#FFDEAD</td></tr><tr><td>old_lace</td><td bgcolor="#fdf5e6"></td><td>#FDF5E6</td></tr><tr><td>papaya_whip</td><td bgcolor="#ffefd5"></td><td>#FFEFD5</td></tr><tr><td>peach_puff</td><td bgcolor="#ffdab9"></td><td>#FFDAB9</td></tr><tr><td>seashell</td><td bgcolor="#fff5ee"></td><td>#FFF5EE</td></tr><tr><td>snow</td><td bgcolor="#fffafa"></td><td>#FFFAFA</td></tr><tr><td>thistle</td><td bgcolor="#d8bfd8"></td><td>#D8BFD8</td></tr><tr><td>titanium_white</td><td bgcolor="#fcfff0"></td><td>#FCFFF0</td></tr><tr><td>wheat</td><td bgcolor="#f5deb3"></td><td>#F5DEB3</td></tr><tr><td>white</td><td bgcolor="#ffffff"></td><td>#FFFFFF</td></tr><tr><td>white_smoke</td><td bgcolor="#f5f5f5"></td><td>#F5F5F5</td></tr><tr><td>zinc_white</td><td bgcolor="#fdf8ff"></td><td>#FDF8FF</td></tr><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>cold_grey</td><td bgcolor="#808a87"></td><td>#808A87</td></tr><tr><td>dim_grey</td><td bgcolor="#696969"></td><td>#696969</td></tr><tr><td>grey</td><td bgcolor="#c0c0c0"></td><td>#C0C0C0</td></tr><tr><td>light_grey</td><td bgcolor="#d3d3d3"></td><td>#D3D3D3</td></tr><tr><td>slate_grey</td><td bgcolor="#708090"></td><td>#708090</td></tr><tr><td>slate_grey_dark</td><td bgcolor="#2f4f4f"></td><td>#2F4F4F</td></tr><tr><td>slate_grey_light</td><td bgcolor="#778899"></td><td>#778899</td></tr><tr><td>warm_grey</td><td bgcolor="#808069"></td><td>#808069</td></tr><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>black</td><td bgcolor="#000000"></td><td>#000000</td></tr><tr><td>ivory_black</td><td bgcolor="#292421"></td><td>#292421</td></tr><tr><td>lamp_black</td><td bgcolor="#2e473b"></td><td>#2E473B</td></tr><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>alizarin_crimson</td><td bgcolor="#e32636"></td><td>#E32636</td></tr><tr><td>brick</td><td bgcolor="#9c661f"></td><td>#9C661F</td></tr><tr><td>cadmium_red_deep</td><td bgcolor="#e3170d"></td><td>#E3170D</td></tr><tr><td>coral</td><td bgcolor="#ff7f50"></td><td>#FF7F50</td></tr><tr><td>coral_light</td><td bgcolor="#f08080"></td><td>#F08080</td></tr><tr><td>deep_pink</td><td bgcolor="#ff1493"></td><td>#FF1493</td></tr><tr><td>english_red</td><td bgcolor="#d43d1a"></td><td>#D43D1A</td></tr><tr><td>firebrick</td><td bgcolor="#b22222"></td><td>#B22222</td></tr><tr><td>geranium_lake</td><td bgcolor="#e31230"></td><td>#E31230</td></tr><tr><td>hot_pink</td><td bgcolor="#ff69b4"></td><td>#FF69B4</td></tr><tr><td>indian_red</td><td bgcolor="#b0171f"></td><td>#B0171F</td></tr><tr><td>light_salmon</td><td bgcolor="#ffa07a"></td><td>#FFA07A</td></tr><tr><td>madder_lake_deep</td><td bgcolor="#e32e30"></td><td>#E32E30</td></tr><tr><td>maroon</td><td bgcolor="#b03060"></td><td>#B03060</td></tr><tr><td>pink</td><td bgcolor="#ffc0cb"></td><td>#FFC0CB</td></tr><tr><td>pink_light</td><td bgcolor="#ffb6c1"></td><td>#FFB6C1</td></tr><tr><td>raspberry</td><td bgcolor="#872657"></td><td>#872657</td></tr><tr><td>red</td><td bgcolor="#ff0000"></td><td>#FF0000</td></tr><tr><td>rose_madder</td><td bgcolor="#e33638"></td><td>#E33638</td></tr><tr><td>salmon</td><td bgcolor="#fa8072"></td><td>#FA8072</td></tr><tr><td>tomato</td><td bgcolor="#ff6347"></td><td>#FF6347</td></tr><tr><td>venetian_red</td><td bgcolor="#d41a1f"></td><td>#D41A1F</td></tr><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>beige</td><td bgcolor="#a39480"></td><td>#A39480</td></tr><tr><td>brown</td><td bgcolor="#802a2a"></td><td>#802A2A</td></tr><tr><td>brown_madder</td><td bgcolor="#db2929"></td><td>#DB2929</td></tr><tr><td>brown_ochre</td><td bgcolor="#87421f"></td><td>#87421F</td></tr><tr><td>burlywood</td><td bgcolor="#deb887"></td><td>#DEB887</td></tr><tr><td>burnt_sienna</td><td bgcolor="#8a360f"></td><td>#8A360F</td></tr><tr><td>burnt_umber</td><td bgcolor="#8a3324"></td><td>#8A3324</td></tr><tr><td>chocolate</td><td bgcolor="#d2691e"></td><td>#D2691E</td></tr><tr><td>deep_ochre</td><td bgcolor="#733d1a"></td><td>#733D1A</td></tr><tr><td>flesh</td><td bgcolor="#ff7d40"></td><td>#FF7D40</td></tr><tr><td>flesh_ochre</td><td bgcolor="#ff5721"></td><td>#FF5721</td></tr><tr><td>gold_ochre</td><td bgcolor="#c77826"></td><td>#C77826</td></tr><tr><td>greenish_umber</td><td bgcolor="#ff3d0d"></td><td>#FF3D0D</td></tr><tr><td>khaki</td><td bgcolor="#f0e68c"></td><td>#F0E68C</td></tr><tr><td>khaki_dark</td><td bgcolor="#bdb76b"></td><td>#BDB76B</td></tr><tr><td>light_beige</td><td bgcolor="#f5f5dc"></td><td>#F5F5DC</td></tr><tr><td>peru</td><td bgcolor="#cd853f"></td><td>#CD853F</td></tr><tr><td>rosy_brown</td><td bgcolor="#bc8f8f"></td><td>#BC8F8F</td></tr><tr><td>raw_sienna</td><td bgcolor="#c76114"></td><td>#C76114</td></tr><tr><td>raw_umber</td><td bgcolor="#734a12"></td><td>#734A12</td></tr><tr><td>sepia</td><td bgcolor="#5e2612"></td><td>#5E2612</td></tr><tr><td>sienna</td><td bgcolor="#a0522d"></td><td>#A0522D</td></tr><tr><td>saddle_brown</td><td bgcolor="#8b4513"></td><td>#8B4513</td></tr><tr><td>sandy_brown</td><td bgcolor="#f4a460"></td><td>#F4A460</td></tr><tr><td>tan</td><td bgcolor="#d2b48c"></td><td>#D2B48C</td></tr><tr><td>van_dyke_brown</td><td bgcolor="#5e2605"></td><td>#5E2605</td></tr><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>cadmium_orange</td><td bgcolor="#ff6103"></td><td>#FF6103</td></tr><tr><td>cadmium_red_light</td><td bgcolor="#ff030d"></td><td>#FF030D</td></tr><tr><td>carrot</td><td bgcolor="#ed9121"></td><td>#ED9121</td></tr><tr><td>dark_orange</td><td bgcolor="#ff8c00"></td><td>#FF8C00</td></tr><tr><td>mars_orange</td><td bgcolor="#964514"></td><td>#964514</td></tr><tr><td>mars_yellow</td><td bgcolor="#e3701a"></td><td>#E3701A</td></tr><tr><td>orange</td><td bgcolor="#ff8000"></td><td>#FF8000</td></tr><tr><td>orange_red</td><td bgcolor="#ff4500"></td><td>#FF4500</td></tr><tr><td>yellow_ochre</td><td bgcolor="#e38217"></td><td>#E38217</td></tr><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>aureoline_yellow</td><td bgcolor="#ffa824"></td><td>#FFA824</td></tr><tr><td>banana</td><td bgcolor="#e3cf57"></td><td>#E3CF57</td></tr><tr><td>cadmium_lemon</td><td bgcolor="#ffe303"></td><td>#FFE303</td></tr><tr><td>cadmium_yellow</td><td bgcolor="#ff9912"></td><td>#FF9912</td></tr><tr><td>cadmium_yellow_light</td><td bgcolor="#ffb00f"></td><td>#FFB00F</td></tr><tr><td>gold</td><td bgcolor="#ffd700"></td><td>#FFD700</td></tr><tr><td>goldenrod</td><td bgcolor="#daa520"></td><td>#DAA520</td></tr><tr><td>goldenrod_dark</td><td bgcolor="#b8860b"></td><td>#B8860B</td></tr><tr><td>goldenrod_light</td><td bgcolor="#fafad2"></td><td>#FAFAD2</td></tr><tr><td>goldenrod_pale</td><td bgcolor="#eee8aa"></td><td>#EEE8AA</td></tr><tr><td>light_goldenrod</td><td bgcolor="#eedd82"></td><td>#EEDD82</td></tr><tr><td>melon</td><td bgcolor="#e3a869"></td><td>#E3A869</td></tr><tr><td>naples_yellow_deep</td><td bgcolor="#ffa812"></td><td>#FFA812</td></tr><tr><td>yellow</td><td bgcolor="#ffff00"></td><td>#FFFF00</td></tr><tr><td>yellow_light</td><td bgcolor="#ffffe0"></td><td>#FFFFE0</td></tr><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>chartreuse</td><td bgcolor="#7fff00"></td><td>#7FFF00</td></tr><tr><td>chrome_oxide_green</td><td bgcolor="#668014"></td><td>#668014</td></tr><tr><td>cinnabar_green</td><td bgcolor="#61b329"></td><td>#61B329</td></tr><tr><td>cobalt_green</td><td bgcolor="#3d9140"></td><td>#3D9140</td></tr><tr><td>emerald_green</td><td bgcolor="#00c957"></td><td>#00C957</td></tr><tr><td>forest_green</td><td bgcolor="#228b22"></td><td>#228B22</td></tr><tr><td>green</td><td bgcolor="#00ff00"></td><td>#00FF00</td></tr><tr><td>green_dark</td><td bgcolor="#006400"></td><td>#006400</td></tr><tr><td>green_pale</td><td bgcolor="#98fb98"></td><td>#98FB98</td></tr><tr><td>green_yellow</td><td bgcolor="#adff2f"></td><td>#ADFF2F</td></tr><tr><td>lawn_green</td><td bgcolor="#7cfc00"></td><td>#7CFC00</td></tr><tr><td>lime_green</td><td bgcolor="#32cd32"></td><td>#32CD32</td></tr><tr><td>mint</td><td bgcolor="#bdfcc9"></td><td>#BDFCC9</td></tr><tr><td>olive</td><td bgcolor="#3b5e2b"></td><td>#3B5E2B</td></tr><tr><td>olive_drab</td><td bgcolor="#6b8e23"></td><td>#6B8E23</td></tr><tr><td>olive_green_dark</td><td bgcolor="#556b2f"></td><td>#556B2F</td></tr><tr><td>permanent_green</td><td bgcolor="#0ac92b"></td><td>#0AC92B</td></tr><tr><td>sap_green</td><td bgcolor="#308014"></td><td>#308014</td></tr><tr><td>sea_green</td><td bgcolor="#2e8b57"></td><td>#2E8B57</td></tr><tr><td>sea_green_dark</td><td bgcolor="#8fbc8f"></td><td>#8FBC8F</td></tr><tr><td>sea_green_medium</td><td bgcolor="#3cb371"></td><td>#3CB371</td></tr><tr><td>sea_green_light</td><td bgcolor="#20b2aa"></td><td>#20B2AA</td></tr><tr><td>spring_green</td><td bgcolor="#00ff7f"></td><td>#00FF7F</td></tr><tr><td>spring_green_medium</td><td bgcolor="#00fa9a"></td><td>#00FA9A</td></tr><tr><td>terre_verte</td><td bgcolor="#385e0f"></td><td>#385E0F</td></tr><tr><td>viridian_light</td><td bgcolor="#6eff70"></td><td>#6EFF70</td></tr><tr><td>yellow_green</td><td bgcolor="#9acd32"></td><td>#9ACD32</td></tr><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>aquamarine</td><td bgcolor="#7fffd4"></td><td>#7FFFD4</td></tr><tr><td>aquamarine_medium</td><td bgcolor="#66cdaa"></td><td>#66CDAA</td></tr><tr><td>cyan</td><td bgcolor="#00ffff"></td><td>#00FFFF</td></tr><tr><td>cyan_white</td><td bgcolor="#e0ffff"></td><td>#E0FFFF</td></tr><tr><td>turquoise</td><td bgcolor="#40e0d0"></td><td>#40E0D0</td></tr><tr><td>turquoise_dark</td><td bgcolor="#00ced1"></td><td>#00CED1</td></tr><tr><td>turquoise_medium</td><td bgcolor="#48d1cc"></td><td>#48D1CC</td></tr><tr><td>turquoise_pale</td><td bgcolor="#afeeee"></td><td>#AFEEEE</td></tr><tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr><tr><td>alice_blue</td><td bgcolor="#f0f8ff"></td><td>#F0F8FF</td></tr><tr><td>blue</td><td bgcolor="#0000ff"></td><td>#0000FF</td></tr><tr><td>blue_light</td><td bgcolor="#add8e6"></td><td>#ADD8E6</td></tr><tr><td>blue_medium</td><td bgcolor="#0000cd"></td><td>#0000CD</td></tr><tr><td>cadet</td><td bgcolor="#5f9ea0"></td><td>#5F9EA0</td></tr><tr><td>cobalt</td><td bgcolor="#3d59ab"></td><td>#3D59AB</td></tr><tr><td>cornflower</td><td bgcolor="#6495ed"></td><td>#6495ED</td></tr><tr><td>cerulean</td><td bgcolor="#05b8cc"></td><td>#05B8CC</td></tr><tr><td>dodger_blue</td><td bgcolor="#1e90ff"></td><td>#1E90FF</td></tr><tr><td>indigo</td><td bgcolor="#082e54"></td><td>#082E54</td></tr><tr><td>manganese_blue</td><td bgcolor="#03a89e"></td><td>#03A89E</td></tr><tr><td>midnight_blue</td><td bgcolor="#191970"></td><td>#191970</td></tr><tr><td>navy</td><td bgcolor="#000080"></td><td>#000080</td></tr><tr><td>peacock</td><td bgcolor="#33a1c9"></td><td>#33A1C9</td></tr><tr><td>powder_blue</td><td bgcolor="#b0e0e6"></td><td>#B0E0E6</td></tr><tr><td>royal_blue</td><td bgcolor="#4169e1"></td><td>#4169E1</td></tr><tr><td>slate_blue</td><td bgcolor="#6a5acd"></td><td>#6A5ACD</td></tr><tr><td>slate_blue_dark</td><td bgcolor="#483d8b"></td><td>#483D8B</td></tr><tr><td>slate_blue_light</td><td bgcolor="#8470ff"></td><td>#8470FF</td></tr><tr><td>slate_blue_medium</td><td bgcolor="#7b68ee"></td><td>#7B68EE</td></tr><tr><td>sky_blue</td><td bgcolor="#87ceeb"></td><td>#87CEEB</td></tr><tr><td>sky_blue_deep</td><td bgcolor="#00bfff"></td><td>#00BFFF</td></tr><tr><td>sky_blue_light</td><td bgcolor="#87cefa"><br /></td><td>#87CEFA</td></tr><tr><td>steel_blue</td><td bgcolor="#4682b4"></td><td>#4682B4</td></tr><tr><td>steel_blue_light</td><td bgcolor="#b0c4de"></td><td>#B0C4DE</td></tr><tr><td>turquoise_blue</td><td bgcolor="#00c78c"></td><td>#00C78C</td></tr><tr><td>ultramarine</td><td bgcolor="#120a8f"></td><td>#120A8F</td></tr><tr><th>Warna</th><th>Contoh</th><th><p>Kode</p></th></tr><tr><td>blue_violet</td><td bgcolor="#8a2be2"></td><td>#8A2BE2</td></tr><tr><td>cobalt_violet_deep</td><td bgcolor="#91219e"></td><td>#91219E</td></tr><tr><td>magenta</td><td bgcolor="#ff00ff"></td><td>#FF00FF</td></tr><tr><td>orchid</td><td bgcolor="#da70d6"></td><td>#DA70D6</td></tr><tr><td>orchid_dark</td><td bgcolor="#9932cc"></td><td>#9932CC</td></tr><tr><td>orchid_medium</td><td bgcolor="#ba55d3"></td><td>#BA55D3</td></tr><tr><td>permanent_red_violet</td><td bgcolor="#db2645"></td><td>#DB2645</td></tr><tr><td>plum</td><td bgcolor="#dda0dd"></td><td>#DDA0DD</td></tr><tr><td>purple</td><td bgcolor="#a020f0"></td><td>#A020F0</td></tr><tr><td>purple_medium</td><td bgcolor="#9370db"></td><td>#9370DB</td></tr><tr><td>ultramarine_violet</td><td bgcolor="#5c246e"></td><td>#5C246E</td></tr><tr><td>violet</td><td bgcolor="#8f5e99"></td><td>#8F5E99</td></tr><tr><td>violet_dark</td><td bgcolor="#9400d3"></td><td>#9400D3</td></tr><tr><td>violet_red</td><td bgcolor="#d02090"></td><td>#D02090</td></tr><tr><td>violet_red_medium</td><td bgcolor="#c71585"></td><td>#C71585</td></tr><tr><td>violet_red_pale</td><td bgcolor="#db7093"></td><td>#DB7093<br /></td></tr></tbody></table>

• Klik Simpan
• Silahkan Sobat lihat contohnya disini

Tabel Kode Warna 2
Langkah-langkahnya sama seperti di atas namun disini ada penambahan sedikit:

• Login ke blogger dengan id anda
• Klik menu Tata Letak
• Pada tab menu klik Edit HTML
• Silahkan Backup dulu template anda dengan klik Download Template Lengkap
• Sekarang cari kode . Jika sudah ketemu, copy lalu paste kode berikut di atas kode

<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]-->

Setelah itu Sobat tinggal memasang kode warnanya, Caranya

• Masuk ke menu Elemen Halaman
• Klik Tambah Gadget
• Pilih tambahkan HTML/JavaScript
• Copy lalu paste Kode Warna di bawah ini

</div><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>Kode warna : <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>

• Berikan judul atau nama gadget
• Klik tombol Simpan
• Silahkan tempatkan gadget kode warna dengan men-drag ke tempat yang sesuai
• Klik tombol Simpan
• Silahkan Sobat lihat contohnya disini
  

Ada baiknya kalau Sobat memasang Kode Warna di Postingan
Mudah-mudahan artikel ini bermanfaat buat Sobat Blogger...

Artikel Terkait: