Home » » Widget Kode Warna pada Blogger

Widget Kode Warna pada Blogger

Written By Em Yahya on Jumat, Mei 31, 2013 | 09.09

Cara Pasang Salah satu Widget Kode Warna pada Blogger...

Langkah Pertama

  1. Login ke blogger dengan id anda
  2. Klik menu Tata Letak
  3. Pada tab menu klik Edit HTML
  4. Silahkan Backup dulu template anda dengan klik Download Template Lengkap
  5. Sekarang cari kode </head>. Jika sudah ketemu, 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]-->


  6. Selesai

  7. Langkah Kedua :


    Berikutnya, memasang tabel kode warna pada blog. Ada dua pilihan, pertama dipasang sebagai posting blog dan yang kedua dipasang pada halaman utama (homepage) blog. Nah, kode untuk tabel kode warna yang akan dipasang adalah berikut ini :

    Kode Warna :



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

    Cara pasang kode warna sebagai posting blog :

    • Yang pasti, anda buat posting baru terlebih dahulu
    • Copy lalu paste Kode Warna tersebut pada posting anda
    • Berikan judul posting yang sesuai
    • Jangan lupa untuk memberi label posting
    • Kemudian terbitkan postingan
    • Selesai

    Cara pasang kode warna di halaman utama (homepage) blog :

    • Masuk ke menu Elemen Halaman
    • Klik Tambah Gadget
    • Pilih tambahkan HTML/JavaScript
    • Copy lalu paste Kode Warna tersebut di dalamnya.
    • Berikan judul atau nama gadget
    • Klik tombol Simpan
    • Silahkan tempatkan gadget kode warna dengan men-drag ke tempat yang sesuai
    • Klik tombol Simpan
    • Selesai
    Hasilnya nanti akan seperti ini :






































































































































































































    Kode warna :

    Sekarang widget kode warna sudah hadir di blog anda. Selamat mencoba dan mudah-mudahan bermanfaat.
Share this article :

0 comments :

Posting Komentar

Kami sangat menghargai komentar pembaca sekalian, baik saran, kritik, bantahan dan lain sebagainya.
Bagi pembaca yang ingin berkomentar silahkan untuk login.

Peraturan komentar:
-komentar pendek atau panjang tidak masalah, baik lebih dari satu kolom juga tidak apa-apa.
-komentar menggunakan bahasa yang baik dan benar tidak berbelit-belit.
-langsung pada topik permasalahan. Terimakasih

Blog Archive

 
Support : Dzul Kifayatain_Tis'ah | kanahayakoe | Coretane Emye
Copyright © 2013. emye Blogger - Kertahayu Boy - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger