Cara Memasang Kode Warna di Blog

Kowandy – cara memasang kode warna di blog. Temen blogger mungkin membutuhkan sebuah tools kode warna. Yap, sama seperti saya. Saya membutuhkan kode warna untuk mengedit warna blog. Sebelumnnya kowandy sudah membuat tools kode warna di blog. Nah, untuk kali ini kowandy akan membagikan sebuah tutorial bagaimana cara membuat kode warna atau cara memasang kode warna di blog. Anda bisa melihat contohnya di bawah ini.
Langkah – Langkahnya yaitu:
– login dulu ke akun blogger
– Pilih Rancangan –> Tambah Gadget –> Pilih HTML/Javascript
– Lalu copy paste kode berikut kedalamnya. Jangan diberi judul yah.
<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]–> 

lalu Klik save.
Sekarang kita buat kode warna dipostingan yah.
Buat posting –> Entri Baru –> Lalu pilih Edit HTML dan copy paste kode berikut kedalamnya.
<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=”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>
<table align=”center” border=”0″ cellpadding=”0″ cellspacing=”2″><tbody><tr height=”24″><td id=”vzorec” width=”24″ height=”24″>
</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://kowandy.blogspot.com/2011/12/cara-memasang-kode-warna-di-blog.html&#8221; target=”new”>Make Your Own</a></p></center>
Langkah terakhir lihat hasilnya. ehehe..
Advertisements

About Legy Masyhury

Hanya manusia biasa, sungguh! :D http://legianto.com http://desainku.net http://masyhury.web.id http://ideku.info
This entry was posted in Tutorial Blog. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s