Trik Memasang Kode Warna HTML di Blog

Bagi yang suka berkreasi dengan warna untuk mempercantik tampilan blog, sekarang kita akan membahas tentang Trik Memasang Kode Warna HTML di Blog. Dengan memasang kode warna ini akan mempermudah dalam kita mencari kode warna yang diinginkan, sehingga dapat mempercepat proses pencarian warna tersebut karena telah tersedia dalam bentuk tabel. Tinggal klik dan kode warna akan tampil dalam kotak kode warna yang tersedia (Tampilannya akan seperti gambar di atas). Kode warna HTML ini bisa dipasang di halaman statis sehingga dapat tampil pada menubar, atau dipasang sebagai widget, tergantung selera masing-masing.

Trik Memasang Kode Warna HTML di Blog

• Login ke blogger
• Klik menu Tata Letak
• Pada tab menu klik Edit HTML
• Backup template dengan klik Download Template Lengkap
• Sekarang cari kode </head>. Jika sudah copy lalu paste kode berikut di atas 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]-

• Simpan template
• Selesai

Langkah berikutnya adalah tentukan dimana akan dipasang kode warna tersebut. Kemudian copy 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>

Jika ingin memasang di halaman statis, ikuti langkah berikut.

• Pilih menu Laman
• Kemudian klik Laman Baru
• Pada menu dropdown yang tampil pilih Laman Kosong
• Pilih mode HTML, bukan Compose
• Paste Kode Warna yang tadi telah dicopy
• Buat judul Laman sesuai selera
• Kemudian klik Publikasi
• Selesai

Jika ingin memasang sebagai widget, ikuti langkah berikut.

• Pilih menu Tata Letak
• Klik Tambahkan Gadget
• Kemudian pilih HTML/JavaScript
• Paste Kode Warna yang tadi telah dicopy
• Beri judul widget sesuai selera
• Simpan

Sekarang blog telah memiliki tabel kode warna yang baru saja kita pasang. Demikian Trik Memasang Kode Warna HTML di Blog ini, selamat berkreasi dengan warna dan mudah-mudahan bisa bermanfaat.