Cara Memasang/Membuat Tabel Kode Warna HTML Di Blog

Blog Sobat ? Sebagai seorang Blogger Sobat tentunya sangat membutuhkan kode warna HTML saat mengedit Blog Sobat. Sekarang Anda tidak perlu kesitus penyedia kode warna untuk mengedit Blog. Karena Sobat juga bisa memasangnya di Blog Sobat jadi tidak usah bolak-balik lagi ke situs penyedia kode warna. namun saran saya sebaiknya memasang widget ini di postingan saja bermanfaat buat kita bermanfaat juga untuk pengunjung yang mencari kode warna. Jika memasangnya di widget blog takutnya blog malah tambah berat. Beda jika kita menampilkannya di postingan beban blog masih bisa di minimalisir.

Contohnya Posting kode warna klik disini

Nah jika Anda tertarik membuatnya ikuti langkah berikut ini :
1. Login ke akun Blogger Anda
2. Klik Tata Letak / Layout
3. Klik Edit HTML
4. Cari kode </head> Untuk memudahkan tekan ctrl+F.
5. Kemudian copy paste-kan kode dibawah ini persis diatas kode </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]-->


6. Klik Save Template

Kemudian untuk menampilkan tabel warna pada postingan atau widget masukan kode berikut ini :

<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 yang terpilih : <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>

Jika ingin memasangnya di widget blog :

1. Klik tab Page element

2. Klik add Gadget

3. PIlih HTML/Java Script

4. Masukan kode di atas sama seperti diatas

5. Klik Save

6. Selesai

sumber : optimasi-blog.blogspot.com

Selamat mencobanya Semoga bermanfaat untuk Anda.
untuk melihat contohnya klik disini.