Cara Membuat/Memasang Widget Kode Warna di Blog

Widget kode warna atau yang biasa kita sebut hack colour atau generate kode warna merupakan salah satu widget yang bisa dibilang sangat penting untuk kita pasang pada blog kita. Karena hampir setiap kita memasang widget atau membuat postingan di blog, kita selalu menggunakan dan memanfaatkan kode warna tersebut.

Setelah awal tahun 2011 kemarin saya memasang widget kode warna atau hack colour di bloag SHARE-reparasi phonsel ini, kali ini saya akan share cara membuat/memasang widget kode warna di blog. Tujuan kita harus memasang widget kode warna pada blog adalah untuk memudahkan kita mencari generate kode warna jika ingin menggunakan kode warna dalam membuat widget atau membuat postingan.

Untuk membuat/memasang widget generate kode warna di blog, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke blogger terlebih dahulu dengan menggunakan account google sobat sendiri.

2. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget. Pada opsi ini, jika sobat tak mau menambahkan gadget/widget baru, gabungkan saja kode HTML/Javascript nya di bawah kode HTML/Javascript widget lain seperti di blog ini, misalkan dibawah widget google translate atau google custom search disamping.

3. Pilih opsi HTML/Javascript.

4. Copy kode Javascript dibawah ini, lalu paste dibawah kode HTML/Javascript pada widget yang lainnya.

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

5. Kemudian klik save.

Untuk memunculkan widgwt kode warna atau generate kode warna di blog, silahkan sobat buat sebuah postingan baru atau membuat halaman statis kemudian masukkan kode HTML/Javascript dibawah ini kedalam postingan tersebut dengan menambahkan beberapa kata untuk melengkapi artikel yang akan sobat poskan.

<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)">
</td><td bgcolor="#2a0a0a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#3b0b0b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#610b0b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#8a0808" onclick="Barva(this.bgColor)">
</td><td bgcolor="#b40404" onclick="Barva(this.bgColor)">
</td><td bgcolor="#df0101" onclick="Barva(this.bgColor)">
</td><td bgcolor="#ff0000" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fe2e2e" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fa5858" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f78181" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f5a9a9" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f6cece" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f8e0e0" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fbefef" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#191007" onclick="Barva(this.bgColor)">
</td><td bgcolor="#2a1b0a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#3b240b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#61380b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#8a4b08" onclick="Barva(this.bgColor)">
</td><td bgcolor="#b45f04" onclick="Barva(this.bgColor)">
</td><td bgcolor="#df7401" onclick="Barva(this.bgColor)">
</td><td bgcolor="#ff8000" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fe9a2e" onclick="Barva(this.bgColor)">
</td><td bgcolor="#faac58" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f7be81" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f5d0a9" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f6e3ce" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f8ece0" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fbf5ef" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#181907" onclick="Barva(this.bgColor)">
</td><td bgcolor="#292a0a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#393b0b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#5e610b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#868a08" onclick="Barva(this.bgColor)">
</td><td bgcolor="#aeb404" onclick="Barva(this.bgColor)">
</td><td bgcolor="#d7df01" onclick="Barva(this.bgColor)">
</td><td bgcolor="#ffff00" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f7fe2e" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f4fa58" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f3f781" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f2f5a9" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f5f6ce" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f7f8e0" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fbfbef" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#101907" onclick="Barva(this.bgColor)">
</td><td bgcolor="#1b2a0a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#243b0b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#38610b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#4b8a08" onclick="Barva(this.bgColor)">
</td><td bgcolor="#5fb404" onclick="Barva(this.bgColor)">
</td><td bgcolor="#74df00" onclick="Barva(this.bgColor)">
</td><td bgcolor="#80ff00" onclick="Barva(this.bgColor)">
</td><td bgcolor="#9afe2e" onclick="Barva(this.bgColor)">
</td><td bgcolor="#acfa58" onclick="Barva(this.bgColor)">
</td><td bgcolor="#bef781" onclick="Barva(this.bgColor)">
</td><td bgcolor="#d0f5a9" onclick="Barva(this.bgColor)">
</td><td bgcolor="#e3f6ce" onclick="Barva(this.bgColor)">
</td><td bgcolor="#ecf8e0" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f5fbef" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#071907" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0a2a0a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b3b0b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b610b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#088a08" onclick="Barva(this.bgColor)">
</td><td bgcolor="#04b404" onclick="Barva(this.bgColor)">
</td><td bgcolor="#01df01" onclick="Barva(this.bgColor)">
</td><td bgcolor="#00ff00" onclick="Barva(this.bgColor)">
</td><td bgcolor="#2efe2e" onclick="Barva(this.bgColor)">
</td><td bgcolor="#58fa58" onclick="Barva(this.bgColor)">
</td><td bgcolor="#81f781" onclick="Barva(this.bgColor)">
</td><td bgcolor="#a9f5a9" onclick="Barva(this.bgColor)">
</td><td bgcolor="#cef6ce" onclick="Barva(this.bgColor)">
</td><td bgcolor="#e0f8e0" onclick="Barva(this.bgColor)">
</td><td bgcolor="#effbef" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#071910" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0a2a1b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b3b24" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b6138" onclick="Barva(this.bgColor)">
</td><td bgcolor="#088a4b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#04b45f" onclick="Barva(this.bgColor)">
</td><td bgcolor="#01df74" onclick="Barva(this.bgColor)">
</td><td bgcolor="#00ff80" onclick="Barva(this.bgColor)">
</td><td bgcolor="#2efe9a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#58faac" onclick="Barva(this.bgColor)">
</td><td bgcolor="#81f7be" onclick="Barva(this.bgColor)">
</td><td bgcolor="#a9f5d0" onclick="Barva(this.bgColor)">
</td><td bgcolor="#cef6e3" onclick="Barva(this.bgColor)">
</td><td bgcolor="#e0f8ec" onclick="Barva(this.bgColor)">
</td><td bgcolor="#effbf5" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#071918" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0a2a29" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b3b39" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b615e" onclick="Barva(this.bgColor)">
</td><td bgcolor="#088a85" onclick="Barva(this.bgColor)">
</td><td bgcolor="#04b4ae" onclick="Barva(this.bgColor)">
</td><td bgcolor="#01dfd7" onclick="Barva(this.bgColor)">
</td><td bgcolor="#00ffff" onclick="Barva(this.bgColor)">
</td><td bgcolor="#2efef7" onclick="Barva(this.bgColor)">
</td><td bgcolor="#58faf4" onclick="Barva(this.bgColor)">
</td><td bgcolor="#81f7f3" onclick="Barva(this.bgColor)">
</td><td bgcolor="#a9f5f2" onclick="Barva(this.bgColor)">
</td><td bgcolor="#cef6f5" onclick="Barva(this.bgColor)">
</td><td bgcolor="#e0f8f7" onclick="Barva(this.bgColor)">
</td><td bgcolor="#effbfb" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#071019" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0a1b2a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b243b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b3861" onclick="Barva(this.bgColor)">
</td><td bgcolor="#084b8a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#045fb4" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0174df" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0080ff" onclick="Barva(this.bgColor)">
</td><td bgcolor="#2e9afe" onclick="Barva(this.bgColor)">
</td><td bgcolor="#58acfa" onclick="Barva(this.bgColor)">
</td><td bgcolor="#81bef7" onclick="Barva(this.bgColor)">
</td><td bgcolor="#a9d0f5" onclick="Barva(this.bgColor)">
</td><td bgcolor="#cee3f6" onclick="Barva(this.bgColor)">
</td><td bgcolor="#e0ecf8" onclick="Barva(this.bgColor)">
</td><td bgcolor="#eff5fb" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#070719" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0a0a2a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b0b3b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b0b61" onclick="Barva(this.bgColor)">
</td><td bgcolor="#08088a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0404b4" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0101df" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0000ff" onclick="Barva(this.bgColor)">
</td><td bgcolor="#2e2efe" onclick="Barva(this.bgColor)">
</td><td bgcolor="#5858fa" onclick="Barva(this.bgColor)">
</td><td bgcolor="#8181f7" onclick="Barva(this.bgColor)">
</td><td bgcolor="#a9a9f5" onclick="Barva(this.bgColor)">
</td><td bgcolor="#cecef6" onclick="Barva(this.bgColor)">
</td><td bgcolor="#e0e0f8" onclick="Barva(this.bgColor)">
</td><td bgcolor="#efeffb" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#100719" onclick="Barva(this.bgColor)">
</td><td bgcolor="#1b0a2a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#240b3b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#380b61" onclick="Barva(this.bgColor)">
</td><td bgcolor="#4b088a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#5f04b4" onclick="Barva(this.bgColor)">
</td><td bgcolor="#7401df" onclick="Barva(this.bgColor)">
</td><td bgcolor="#8000ff" onclick="Barva(this.bgColor)">
</td><td bgcolor="#9a2efe" onclick="Barva(this.bgColor)">
</td><td bgcolor="#ac58fa" onclick="Barva(this.bgColor)">
</td><td bgcolor="#be81f7" onclick="Barva(this.bgColor)">
</td><td bgcolor="#d0a9f5" onclick="Barva(this.bgColor)">
</td><td bgcolor="#e3cef6" onclick="Barva(this.bgColor)">
</td><td bgcolor="#ece0f8" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f5effb" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"> <td bgcolor="#190718" onclick="Barva(this.bgColor)">
</td><td bgcolor="#2a0a29" onclick="Barva(this.bgColor)">
</td><td bgcolor="#3b0b39" onclick="Barva(this.bgColor)">
</td><td bgcolor="#610b5e" onclick="Barva(this.bgColor)">
</td><td bgcolor="#8a0886" onclick="Barva(this.bgColor)">
</td><td bgcolor="#b404ae" onclick="Barva(this.bgColor)">
</td><td bgcolor="#df01d7" onclick="Barva(this.bgColor)">
</td><td bgcolor="#ff00ff" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fe2ef7" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fa58f4" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f781f3" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f5a9f2" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f6cef5" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f8e0f7" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fbeffb" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#190710" onclick="Barva(this.bgColor)">
</td><td bgcolor="#2a0a1b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#3b0b24" onclick="Barva(this.bgColor)">
</td><td bgcolor="#610b38" onclick="Barva(this.bgColor)">
</td><td bgcolor="#8a084b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#b4045f" onclick="Barva(this.bgColor)">
</td><td bgcolor="#df0174" onclick="Barva(this.bgColor)">
</td><td bgcolor="#ff0080" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fe2e9a" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fa58ac" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f781be" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f5a9d0" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f6cee3" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f8e0ec" onclick="Barva(this.bgColor)">
</td><td bgcolor="#fbeff5" onclick="Barva(this.bgColor)">
</td></tr>
<tr height="24"><td bgcolor="#000000" onclick="Barva(this.bgColor)">
</td><td bgcolor="#0b0b0b" onclick="Barva(this.bgColor)">
</td><td bgcolor="#151515" onclick="Barva(this.bgColor)">
</td><td bgcolor="#1c1c1c" onclick="Barva(this.bgColor)">
</td><td bgcolor="#2e2e2e" onclick="Barva(this.bgColor)">
</td><td bgcolor="#424242" onclick="Barva(this.bgColor)">
</td><td bgcolor="#585858" onclick="Barva(this.bgColor)">
</td><td bgcolor="#6e6e6e" onclick="Barva(this.bgColor)">
</td><td bgcolor="#848484" onclick="Barva(this.bgColor)">
</td><td bgcolor="#a4a4a4" onclick="Barva(this.bgColor)">
</td><td bgcolor="#bdbdbd" onclick="Barva(this.bgColor)">
</td><td bgcolor="#d8d8d8" onclick="Barva(this.bgColor)">
</td><td bgcolor="#e6e6e6" onclick="Barva(this.bgColor)">
</td><td bgcolor="#f2f2f2" onclick="Barva(this.bgColor)">
</td><td bgcolor="#ffffff" onclick="Barva(this.bgColor)">
</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">
</td><td valign="bottom"><b>Kode warna yang terpilih :</b> <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>
<b><a href="http://dwicell57.blogspot.com/2012/05/cara-memasang-widget-kode-warna-di-blog.html" target="_blank" title="Cara Membuat/Memasang Widget Kode Warna di Blog">Get it</a></b></center>

Sebagai contohnya sobat dapat lihat postingan saya yang bejudul Hack Colour (Generate kode warna) ini.

Langkah selanjutnya silahkan sobat poskan artikel yang sudah sobat buat tadi dengan menyertakan kode HTML/Javascript di atas lalu lihat hasilnya. Widget kode warna atau generate kode warna sudah siap digunakan untuk mempercantik tampilan suatu blog.

Mudah-mudahan artikel diatas bermanfaat buat sobat semua, dan jika sobat mengalami kesulitan untuk memasang widget kode warna di blog sobat, silahkan beri pertanyaan di kotak comentar dibawah ini. Sekian dan terimakasih.