Cara Membuat Kode Warna ~ Generations Of Indonesian

Untuk mengedit template Anda tentu akan selalu berhubungan dengan yang namanya kode warna HTML. Tidak seperti kode warna biasa, kode warna HTML ini menggunakan angka bukan huruf. Contoh untuk kode warna putih adalah #FFFFFF, untuk warna hitam #000000, dan masih banyak lagi kode untuk warna yang lain, jika saya sebutkan satu persatu akan memakan tempat dan waktu yang lama. Untuk itu saya buatkan dalam satu kotak besar beserta gambar warna yang jika di klik akan muncul kode warnanya.

Walau demikian saran saya kepada Anda agar memasangnya di blog yang Anda miliki agar mempermudah anda untuk memodifikasi blog Anda sendiri.

Untuk melihat contohnya Anda dapat lihat Disini

Oleh karena itu saya akan membahas cara memasang kode warna blogspot.
Langsung saja kita ke TKP..

Langkah 1 :

1. Login ke blogger.
2. kalau sudah masuk ke Dasbor, klik Tata Letak.
3. masuk ke Elemen Halaman
4. Klik Tambah Widget
5. Pilih HTML/Java Sript
6. Masukkan kode JS di bawah ini :

Klik Untuk melihat

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>

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

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")

7.Klik Simpan

Langkah 2 :

1. Buat satu postingan baru.
2. Masukkan kode HTML di bawah ini :

Klik Untuk melihat

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

</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><p><a href="http://generations-of-indonesia.blogspot.com/2012/12/cara-membuat-kode-warna.html" target="new">Get it</a></p></center>

3. Klik Terbitkan Entri

Selamat Mencoba :)

Membuat Efek Zoom Gambar di Blogger Generations Of Indonesia akan berbagi tips menarik, yaitu Membuat Efek Zoom Gambar di Blogg
Trik Cara Membuat Status Biru di Facebook Hallo Temen-temen semua,kali ini saya akan posting tentang bagaimana cara buat tulisan status di f
Cara Setting BlogCara Setting Blog di Blogger memiliki beberapa komponen didalamnya, mulai dari settingan komentar,
Kumpulan PPC Indonesia Terbukti Membayar Berbicara tentang bisnis online memang tidak ada habis nya, mulai dari bisnis PTC (paid to click)
Cara Membuat Tulisan Copyright SendiriTulisan Copyright biasanya berada dibagian bawah blog yang berfungsi untuk mengurangi pembajakan,
Cara Upload Gambar didalam Postingan Cara Upload Gambar Dalam Postingan terkadang merupakan masalah bagi para blogger pemula, apal

Generations Of Indonesian

Cara Membuat Kode Warna

Related Post

Popular

Label

Arsip

Comment