Warung Bebas

Jumat, 26 Oktober 2012

Cara Memasang Widget Kode Warna di Blog V.1

Tutorial Blog dan Widget, Cara Memasang Widget Kode Warna di Blog. kemaren Master cheft Dapur Tutorial Blogspot dan SEO sempat memasang Widget Kode Warna Lengkap. Kode warna begitu penting peranannya apa lagi untuk anda-anda yang senang otak atik template. bagaimasih yang dimaksut dengan kode warna ?. sebenarnya kode warna beragam bentuknya dan kode warna yang akan kita pasanga adalah kode warna yang seperti dibawah ini :


Demo : Kode Warna

Widget Kode warna yang lain nanti akan kita bahas pada bahasan berikutnya. berikut langkah-langkah untuk memasang widget kode warna pada halaman blog.

Lankah 1.
  1. Pastikan sobat sudah login kehalaman blog sobat
  2. Masuk Ke Halaman Edit HTML dengan Cara Pilih Template --> Edit HTML --> Proses/Lanjutnkan ( Jika masih belum pahan baca tutorial cara mengakses halaman Edit HTML)
  3. Download Template Lengkap terlebih dahulu untuk mengantisipasi kesalahan saat melakukan edit template
  4. Setelah itu cari kode ]]></b:skin>
  5. Sudah ketemu Copy kode berikut dan Letakan dibawah kode ]]></b:skin>
  6. <script language='javascript'>
    function Barva(koda)
    {
    document.getElementById(&quot;vzorec&quot;).bgColor=koda;
    document.hcc.barva.value=koda.toUpperCase();
    document.hcc.barva.select();
    }
    function BarvaDruga(koda)
    {
    document.getElementById(&quot;vzorec2&quot;).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) != &quot;undefined&quot;)
    ygLogger.init(document.getElementById(&quot;logDiv&quot;));
    pickerInit();
    //ddcolorposter.fillcolorbox(&quot;colorfield1&quot;, &quot;colorbox1&quot;) //PREFILL &quot;colorbox1&quot; with hex value from &quot;colorfield1&quot;
    //ddcolorposter.fillcolorbox(&quot;colorfield2&quot;, &quot;colorbox2&quot;) //PREFILL &quot;colorbox1&quot; with hex value from &quot;colorfield1&quot;
    }

    // Picker ---------------------------------------------------------

    function pickerInit() {
    hue = YAHOO.widget.Slider.getVertSlider(&quot;hueBg&quot;, &quot;hueThumb&quot;, 0, 180);
    hue.onChange = function(newVal) { hueUpdate(newVal); };

    picker = YAHOO.widget.Slider.getSliderRegion(&quot;pickerDiv&quot;, &quot;selector&quot;, 0, 180, 0, 180);
    picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

    hueUpdate();

    dd1 = new YAHOO.util.DD(&quot;pickerPanel&quot;);
    dd1.setHandleElId(&quot;pickerHandle&quot;);
    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(&quot;pickerDiv&quot;).style.backgroundColor =
    &quot;rgb(&quot; + a[0] + &quot;, &quot; + a[1] + &quot;, &quot; + a[2] + &quot;)&quot;;

    pickerSwatchUpdate();
    }

    function pickerSwatchUpdate() {
    var h = (180 - hue.getValue());
    if (h == 180) { h = 0; }
    document.getElementById(&quot;pickerhval&quot;).value = (h*2);

    h = h / 180;

    var s = picker.getXValue() / 180;
    document.getElementById(&quot;pickersval&quot;).value = Math.round(s * 100);

    var v = (180 - picker.getYValue()) / 180;
    document.getElementById(&quot;pickervval&quot;).value = Math.round(v * 100);

    var a = YAHOO.util.Color.hsv2rgb( h, s, v );

    document.getElementById(&quot;pickerSwatch&quot;).style.backgroundColor =
    &quot;rgb(&quot; + a[0] + &quot;, &quot; + a[1] + &quot;, &quot; + a[2] + &quot;)&quot;;

    document.getElementById(&quot;pickerrval&quot;).value = a[0];
    document.getElementById(&quot;pickergval&quot;).value = a[1];
    document.getElementById(&quot;pickerbval&quot;).value = a[2];
    var hexvalue = document.getElementById(&quot;pickerhexval&quot;).value =&#39;#&#39;+
    YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
    ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
    if (hexvalue!=&quot;#FFFFFF&quot;) document.getElementById(&quot;pickerhexval&quot;).select();
    }

    </script><!--[if gte IE 5.5000]>
  7. Sekarang Simpan Template
Lankah 2.

Pada langkah ke 2 ini kita akan menampilkan kodewarnanya kehalaman blog. kode warna ini dapat sobat tampilkan didalam postingan seperti milik Dapur Tutorial Blogspot ataupun pada bagian sidebar. namun kebanyakan para blogger memasangnya didalam postingan. berikut langkah-langkahnya :

  1. Buat Postingan baru
  2. Beri judul postingan, terserah mau dikasih judul apa
  3. Sekarang  pindah pada bagian HTML (Lihat pada gambar)
  4. Copy kode berikut dan paste kedalam postingan
  5. <center>
    <form id="hcc" name="hcc">
    <table align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"><tbody>
    <tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" style="width: 375px;"><tbody>
    <tr height="24"><td bgcolor="#190707" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2a0a0a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#3b0b0b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#610b0b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#8a0808" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#b40404" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#df0101" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#ff0000" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fe2e2e" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fa5858" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f78181" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f5a9a9" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f6cece" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f8e0e0" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fbefef" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#191007" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2a1b0a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#3b240b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#61380b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#8a4b08" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#b45f04" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#df7401" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#ff8000" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fe9a2e" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#faac58" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f7be81" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f5d0a9" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f6e3ce" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f8ece0" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fbf5ef" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#181907" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#292a0a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#393b0b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#5e610b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#868a08" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#aeb404" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#d7df01" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#ffff00" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f7fe2e" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f4fa58" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f3f781" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f2f5a9" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f5f6ce" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f7f8e0" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fbfbef" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#101907" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#1b2a0a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#243b0b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#38610b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#4b8a08" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#5fb404" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#74df00" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#80ff00" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#9afe2e" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#acfa58" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#bef781" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#d0f5a9" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#e3f6ce" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#ecf8e0" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f5fbef" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#071907" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0a2a0a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b3b0b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b610b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#088a08" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#04b404" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#01df01" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#00ff00" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2efe2e" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#58fa58" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#81f781" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#a9f5a9" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#cef6ce" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#e0f8e0" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#effbef" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#071910" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0a2a1b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b3b24" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b6138" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#088a4b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#04b45f" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#01df74" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#00ff80" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2efe9a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#58faac" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#81f7be" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#a9f5d0" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#cef6e3" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#e0f8ec" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#effbf5" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#071918" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0a2a29" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b3b39" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b615e" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#088a85" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#04b4ae" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#01dfd7" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#00ffff" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2efef7" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#58faf4" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#81f7f3" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#a9f5f2" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#cef6f5" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#e0f8f7" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#effbfb" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#071019" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0a1b2a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b243b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b3861" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#084b8a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#045fb4" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0174df" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0080ff" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2e9afe" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#58acfa" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#81bef7" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#a9d0f5" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#cee3f6" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#e0ecf8" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#eff5fb" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#070719" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0a0a2a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b0b3b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b0b61" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#08088a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0404b4" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0101df" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0000ff" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2e2efe" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#5858fa" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#8181f7" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#a9a9f5" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#cecef6" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#e0e0f8" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#efeffb" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#100719" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#1b0a2a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#240b3b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#380b61" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#4b088a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#5f04b4" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#7401df" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#8000ff" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#9a2efe" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#ac58fa" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#be81f7" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#d0a9f5" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#e3cef6" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#ece0f8" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f5effb" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"> <td bgcolor="#190718" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2a0a29" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#3b0b39" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#610b5e" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#8a0886" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#b404ae" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#df01d7" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#ff00ff" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fe2ef7" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fa58f4" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f781f3" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f5a9f2" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f6cef5" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f8e0f7" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fbeffb" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="24"><td bgcolor="#190710" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2a0a1b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#3b0b24" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#610b38" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#8a084b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#b4045f" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#df0174" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#ff0080" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fe2e9a" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fa58ac" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f781be" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f5a9d0" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f6cee3" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f8e0ec" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#fbeff5" onclick="Barva(this.bgColor)"><br /></td></tr>
    <tr height="10"><td><br /></td></tr>
    <tr height="24"><td bgcolor="#000000" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#0b0b0b" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#151515" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#1c1c1c" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#2e2e2e" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#424242" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#585858" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#6e6e6e" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#848484" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#a4a4a4" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#bdbdbd" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#d8d8d8" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#e6e6e6" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#f2f2f2" onclick="Barva(this.bgColor)"><br /></td><td bgcolor="#ffffff" onclick="Barva(this.bgColor)"><br /></td></tr>
    </tbody></table>
    </td></tr>
    </tbody></table>
    <table align="center" border="0" cellpadding="0" cellspacing="2"><tbody>
    <tr height="24"><td height="24" id="vzorec" width="24"><br /></td><td valign="bottom">Kode warna yang terpilih : <input id="barva" maxlength="7" name="barva" size="9" style="font-family: Verdana; font-size: 12px; font-weight: bold; height: 16px; width: 74px;" type="text" /></td></tr>
    </tbody></table>
    </form>
    <div style="display: yes;">
    Gat a Widget&nbsp;<a href="http://dapur-tutorial.blogspot.com/2012/10/cara-memasang-widget-kode-warna-di-blog.html" rel="dofollow">Kode Warna</a></div>
    </center>
  6. Publikasi postingan dan lihat hasilnya
  7. Selesai
Nah itu dia cara memasang Widget kode warna. silahkan mencoba dan semoga bisa bermanfaat.

0 komentar em “Cara Memasang Widget Kode Warna di Blog V.1”

Posting Komentar

 

M-Kolom Tutorial | All Tutorial Copyright © 2012 Fast Loading -- Powered by Blogger