[ojegjogja] Cara memasang Kode Warna pada halaman posting blog.

Bagi temen-temen yang senang blogging tentunya kode warna adalah salah satu benda yang sangat dibutuhkan. Sebaliknya bagi yang sukanya hanya browsing ya .......  mungkin kode warna tidaklah penting.  Tapi biarlah, saya hanya ingin mempersembahkan artikel ini untuk yang memerlukan kode warna, khususnya yang ingin memasang di halaman blog miliknya. Penasaran ..................?

Bagi temen-temen yang ingin memasang kode warna pada halaman posting blog kalian, caranaya adalah sebagai berikut :

 
LANGKAH PERTAMA :

1. Login ke blog Anda.
2. Klik kotak yang ada tanda panah lalu klik Template.
3. Klik Edit HTML,  sebelum mulai mengedit kode-kode HTML sebaiknya Downloud Template dahulu karena apabila gagal, maka hasil Downloud tadi bisa untuk mengembalikan Template menjadi seperti awal.
4. Sekarang cari kode </head>. Jika sudah ketemu copy kode di bawah lalu paste di atas kode </head>.
5. Klik simpan template.

Kode yang harus di copy :

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


LANGKAH KE  DUA :

1. Buat halaman posting baru dengan cara klik kotak yang bertuliskan Entri baru.
2. Copy kode warna di bawah lalu paste di halaman posting baru di atas.
3. Klik Publikasikan.
4. Selesai dan lihat hasilnya.

Kode yang harus dicopy :

</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;" maxle
ngth="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>



.