Cara membuat tabel kode warna sendiri di Blog

Cara membuat tabel kode warna sendiri di Blog

ARTIKEL TERKAIT:

Warna memang sangat berperan penting dalam pembuatan Blog atau Website dalam pemberian warna di Blog atau Website. Pada waktu lalu saya sudah mem-posting cara membuat tabel kode warna interaktif di blog. Yang dibutuhkan bagi para Admin adalah kode warna untuk membuat cantik blog atau website.Hampir setiap saat kita edit dan posting artikel yang membuat repotnya... ketika kita butuh kode warna, sering kali kita harus mencari sebuah Blog atau website yang menyediakan kode warna tersebut, iya kan?.Tutorial blog kali ini saya akan berbagi pada kamu, bagaimana cara mebuat tabel kode warna sendiri.


jika berminat membuat tabel kode warna ini, silahkan ikuti langkah-langkah berikut ini :
1. Login ke blogger kamu.
2. Klik template
3. KLik Edit HTML.
4. Download Template Lengkap (back-up Template)  terlebih dahulu agar template aman, bila terjadi kesalahan tinggal di ulang kembali.
5. Cari kode </head>
6. Copy dan paste kode berikut diatas kode </head> :

<br />  <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><br /> <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]><br /> <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><br /> <![endif]-->

7. Selanjutnya Save Template

Kemudian :
copy-paste kode dibawah ini pada Entri baru, bila kamu menghendaki tabel kode warna dipasang pada postingan kamu atau copy-paste kode dibawah ini pada Gadget bila kamu menghendaki tabel kode warna dipasang pada bilah samping, dengan cara tambah gadget pada Elemen Laman.

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

Coba ya langsung di Praktekan,

Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.