Cara membuat dan pasang Kode Warna HTML di blogger

Artikel ini akan menjelaskan bagaimana cara untuk menambahkan serta memasang kode warna HTM di postingan blogger, atau bisa juga Anda membuat di laman statis blogspot maupun di HTML/Javascript.

Sebagai seorang blogger, Anda semua pastinya di hadapkan pada warna kode html, tentunya ini akan terjadi saat kita mengedit template kita dan sangat dibutuhkan untuk mengetahui kode warna yang sesuai dengan desain yang kita inginkan.

Tentu Anda ingin mendapatkan kode warna dengan mudah bukan? jika itu menjadi masalah Anda, alagkah baiknya jika Anda memasng kode Warna HTML ini di blog milik Anda sendiri, sehingga akapanpun Anda butuhkan untuk mendapatkan kode warna yang anda inginkan.

Widget ini dapat di pasang di postingan blog, seperti yang saya lakukan ada blog ini. Tentunya bertujuan untuk memudahkan saya dalam mendapatkan kode warna yang saya inginkan. hanya dengan satu klik pada warna yang saya inginkan, maka kode akan langsung muncul dn tinggal di copy.

Ini adalah tabel kode warna html yang sangat memudahkan kita dalam merias dan mempercantik tampilan blog kita. Jika Anda tertarik untuk menambahkannya, ikuti panduan di bawah ini.

Memasang kode warna HTML pada postingan blogger

Langkah pertama

1. Menuju ke blogger dasboard -> Edit HTML
2. Dan mencari kode </head>. 
3. Jika sudah ketemu, copy kode berikut, lalu paste di atas kode </head>

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

   
   

Langkah kedua
Memasang kode tabel warna html di postingan blog, Cara pasangnya sebagai berikut :

1. Buat posting baru/entri baru terlebih dahulu
2. Rubah Compose dan pilih HTML
3. Copy Kode Warna dibawah ini, lalu paste pada posting anda.
   Kode Warna :

4. </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>

   
   
5. Berikan judul posting yang bagus, contoh : "KODE WARNA HTML"
6. Kemudian Publish/terbitkan postingan Anda.
7. Selesai!

Jika Anda ingin melihat hasilnya akan seperti di halaman ini : Belajar kode warna HTML. Mungkin itu saja yang saya tulis untuk hari ini. Sampai jumpa kembali.