saya akan berbagi pengalaman browse saya di om google, kali ini kita akan membuat kode warna atau widget kode warna. kode warna ini di dekasikan kepada blogger yang masih awam (seperti saya ini) tentang kode html warna.
Cara membuat atau memasang kode warna ini mudah sekali, hanya tinggal copas saja. berikut caranya :

Cara pertama :

  • Login dulu ke account blogger kamu.
  • Pilih tab Tata Letak --> Edit HTML.



    Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Silakan copas script 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]-->



Jangan Lupa Simpan template kamu.
     Cara Kedua :
    • Buat Posting --> Copas kode warna.
    • Berikan judul posting kamu, ex: Kode Warna.
    • masukan kode warna di bawah ini ke dalam postingan
    Kode Warna :
    <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="10"><td>
    </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>

    Terbitkan Entri
      Gantilah tanggal postingan, agar tidak terdapat di depan halaman blog anda.... Selamat Mencoba.........


      Artikel Terkait:

      0 komentar

      Posting Komentar

      Budayakan Berkomentar Setelah Membaca dan Tolong Jangan Menaruh SPAM, Terima Kasih....

      Choose Your Language

      English French German Spain Italian

      Portuguese Japanese Korean Arabic Chinese Simplified

      Contact

      Contact Me On Email facebook Twitter

      Archives

      Labels

      Blogumulus by Roy Tanck and Kang-ipoel