Membuat Kode Warna di Blogger

Bagi sobat yang suka ganti-ganti warna template...ini saya dapatkan artikel tentang bagaimana caranya menampilkan kode warna html di blog. Ternyata gampang sekali kok...sobat tinggal ikutin aja 2 langkah berikut:

Pertama :Tentunya harus login dulu ke blogger anda, tambahkan gadgest seperti biasa, HTML/JavaScrip

Setelah itu anda copy kode di bawah ini

function Barva(koda)</div>

{</div>

document.getElementById("vzorec").bgColor=koda;</div>

document.hcc.barva.value=koda.toUpperCase();</div>

document.hcc.barva.select();</div>

}</div>

function BarvaDruga(koda)</div>

{</div>

document.getElementById("vzorec2").bgColor=koda;</div>

document.hcc.Barva2.value=koda.toUpperCase();</div>

document.hcc.Barva2.select();</div>

}</div>

</script></div>

var hue;</div>

var picker;</div>

//var gLogger;</div>

var dd1, dd2;</div>

var r, g, b;</div>

function init() {</div>

if (typeof(ygLogger) != "undefined")</div>

ygLogger.init(document.getElementById("logDiv"));</div>

pickerInit();</div>

//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"</div>

//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"</div>

}</div>

// Picker ---------------------------------------------------------</div>

function pickerInit() {</div>

hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);</div>

hue.onChange = function(newVal) { hueUpdate(newVal); };</div>

picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);</div>

picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };</div>

hueUpdate();</div>

dd1 = new YAHOO.util.DD("pickerPanel");</div>

dd1.setHandleElId("pickerHandle");</div>

dd1.endDrag = function(e) {</div>

// picker.thumb.resetConstraints();</div>

// hue.thumb.resetConstraints();</div>

};</div>

}</div>

executeonload(init);</div>

function pickerUpdate(newX, newY) {</div>

pickerSwatchUpdate();</div>

}</div>

function hueUpdate(newVal) {</div>

var h = (180 - hue.getValue()) / 180;</div>

if (h == 1) { h = 0; }</div>

var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);</div>

document.getElementById("pickerDiv").style.backgroundColor =</div>

"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";</div>

pickerSwatchUpdate();</div>

}</div>

function pickerSwatchUpdate() {</div>

var h = (180 - hue.getValue());</div>

if (h == 180) { h = 0; }</div>

document.getElementById("pickerhval").value = (h*2);</div>

h = h / 180;</div>

var s = picker.getXValue() / 180;</div>

document.getElementById("pickersval").value = Math.round(s * 100);</div>

var v = (180 - picker.getYValue()) / 180;</div>

document.getElementById("pickervval").value = Math.round(v * 100);</div>

var a = YAHOO.util.Color.hsv2rgb( h, s, v );</div>

document.getElementById("pickerSwatch").style.backgroundColor =</div>

"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";</div>

document.getElementById("pickerrval").value = a[0];</div>

document.getElementById("pickergval").value = a[1];</div>

document.getElementById("pickerbval").value = a[2];</div>

var hexvalue = document.getElementById("pickerhexval").value ='#'+</div>

YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);</div>

ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)</div>

if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();</div>

}</div>

</script><!--[if gte IE 5.5000]></div>

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.</div>

{</div>

for(var i=0; i<document.images.length; i++)</div>

{</div>

var img = document.images[i]</div>

var imgName = img.src.toUpperCase()</div>

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")</div>

{</div>

var imgID = (img.id) ? "id='" + img.id + "' " : ""</div>

var imgClass = (img.className) ? "class='" + img.className + "' " : ""</div>

var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "</div>

var imgStyle = "display:inline-block;" + img.style.cssText</div>

if (img.align == "left") imgStyle = "float:left;" + imgStyle</div>

if (img.align == "right") imgStyle = "float:right;" + imgStyle</div>

if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle</div>

var strNewHTML = "<span " + imgID + imgClass + imgTitle</div>

+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"</div>

+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"</div>

+ "(src='" + img.src + "', sizingMethod='scale');"></span>"</div>

img.outerHTML = strNewHTML</div>

i = i-1</div>

}</div>

}</div>

}</div>

YAHOO.util.Event.addListener(window, "load", correctPNG);</div>

</script></div>

<![endif]--></div>

Nah kemudian anda tinggal nulis posting seperti biasa. Yaitu masuk menu posting-entri baru jangan lupa pilih edit HTML. Dan copy paste kode di bawah ini:

</div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb"></div>

</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb"></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5"></div>

</td></tr><tr height="10"><td></div>

</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#151515"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#424242"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#585858"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#848484"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2"></div>

</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff"></div>

</td></tr></tbody></table></td></tr></tbody></table></div>

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

</form></center></div>

Nah berarti sudah jadi daftar kode html warna di blog anda. Kalau ingin lihat hasilnya bisa dilihat DISINI

Selamat mencoba, dan semoga berhasil

Jangan lupa comentnyaya, dan tolong kasih makan ikannya yaa

» Jangan lupa dilike kalau bermanfaat.

Pages

Khy Pedia

Membuat Kode Warna di Blogger

Unknown

No comments:

Post a Comment

Search This Blog

About Me

ADs

Labels Cloud

Mengenai Saya