Membuat Kode Warna

Contohnya kaya Gini here

• Seperti biasa sobat harus dalam keadaan login keblogger
• Masuk menu Tata Letak=> klik Edit HTML (Sebelumnya baiknya sobat backup dulu templatenya dengan mengklik tulisan download template lengkap dengan begitu jika ada kesalahan sobat bisa mengembalikkan kembali template seperti semula!)
• Copy code JS berikut dan paste tepat 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> <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]-->

• Sebelum save/ simpan template bisa klik tab pratinjau dulu, kalau blognya tampilannya seperti semula berarti langkah-langkahnya udah benar.

Nah untuk menampilkan kode warna pada postingan lengkap dengan label, copy kode warna berikut dan paste di tab Edit HTML, sedang untuk menambahkannya pada elemen halaman blog

• masuk pada menu Tata Letak
• Klik Elemen halaman klik tambah gadget pada tempat/sidebar yang sobat inginkan ditampilkan kode warna tersebut.
• Tambah HTML/JavaScript
• Copy kode warna dan paste pada kolom entry

Berikut kode warnanya :

<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"> <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" height="24" width="24"> <br /> </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>

• Semoga bermanfaat! Terimakasih atas waktu dan perhatiaan yang telah sobat sisihkan untuk membaca postingan ini!
  Budayakan komentar setelah membaca dan tunggu komentar balik anaa diblog sobat.
  Salam...