Script tabel kode warna HTML

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan scriptnya lalu klik simpan

Tabel Kode warna HTML 1

Warna	Contoh	Kode
Antique_white		#FAEBD7
azure		#F0FFFF
Bisque		#FFE4C4
blanched_almond		#FFEBCD
cornsilk		#FFF8DC
eggshell		#FCE6C9
floral_white		#FFFAF0
gainsboro		#DCDCDC
ghost_white		#F8F8FF
honeydew		#F0FFF0
ivory		#FFFFF0
lavender		#E6E6FA
lavender_blush		#FFF0F5
lemon_chiffon		#FFFACD
linen		#FAF0E6
mint_cream		#F5FFFA
misty_rose		#FFE4E1
moccasin		#FFE4B5
navajo_white		#FFDEAD
old_lace		#FDF5E6
papaya_whip		#FFEFD5
peach_puff		#FFDAB9
seashell		#FFF5EE
snow		#FFFAFA
thistle		#D8BFD8
titanium_white		#FCFFF0
wheat		#F5DEB3
white		#FFFFFF
white_smoke		#F5F5F5
zinc_white		#FDF8FF
Warna	Contoh	Kode
cold_grey		#808A87
dim_grey		#696969
grey		#C0C0C0
light_grey		#D3D3D3
slate_grey		#708090
slate_grey_dark		#2F4F4F
slate_grey_light		#778899
warm_grey		#808069
Warna	Contoh	Kode
black		#000000
ivory_black		#292421
lamp_black		#2E473B
Warna	Contoh	Kode
alizarin_crimson		#E32636
brick		#9C661F
cadmium_red_deep		#E3170D
coral		#FF7F50
coral_light		#F08080
deep_pink		#FF1493
english_red		#D43D1A
firebrick		#B22222
geranium_lake		#E31230
hot_pink		#FF69B4
indian_red		#B0171F
light_salmon		#FFA07A
madder_lake_deep		#E32E30
maroon		#B03060
pink		#FFC0CB
pink_light		#FFB6C1
raspberry		#872657
red		#FF0000
rose_madder		#E33638
salmon		#FA8072
tomato		#FF6347
venetian_red		#D41A1F
Warna	Contoh	Kode
beige		#A39480
brown		#802A2A
brown_madder		#DB2929
brown_ochre		#87421F
burlywood		#DEB887
burnt_sienna		#8A360F
burnt_umber		#8A3324
chocolate		#D2691E
deep_ochre		#733D1A
flesh		#FF7D40
flesh_ochre		#FF5721
gold_ochre		#C77826
greenish_umber		#FF3D0D
khaki		#F0E68C
khaki_dark		#BDB76B
light_beige		#F5F5DC
peru		#CD853F
rosy_brown		#BC8F8F
raw_sienna		#C76114
raw_umber		#734A12
sepia		#5E2612
sienna		#A0522D
saddle_brown		#8B4513
sandy_brown		#F4A460
tan		#D2B48C
van_dyke_brown		#5E2605
Warna	Contoh	Kode
cadmium_orange		#FF6103
cadmium_red_light		#FF030D
carrot		#ED9121
dark_orange		#FF8C00
mars_orange		#964514
mars_yellow		#E3701A
orange		#FF8000
orange_red		#FF4500
yellow_ochre		#E38217
Warna	Contoh	Kode
aureoline_yellow		#FFA824
banana		#E3CF57
cadmium_lemon		#FFE303
cadmium_yellow		#FF9912
cadmium_yellow_light		#FFB00F
gold		#FFD700
goldenrod		#DAA520
goldenrod_dark		#B8860B
goldenrod_light		#FAFAD2
goldenrod_pale		#EEE8AA
light_goldenrod		#EEDD82
melon		#E3A869
naples_yellow_deep		#FFA812
yellow		#FFFF00
yellow_light		#FFFFE0
Warna	Contoh	Kode
chartreuse		#7FFF00
chrome_oxide_green		#668014
cinnabar_green		#61B329
cobalt_green		#3D9140
emerald_green		#00C957
forest_green		#228B22
green		#00FF00
green_dark		#006400
green_pale		#98FB98
green_yellow		#ADFF2F
lawn_green		#7CFC00
lime_green		#32CD32
mint		#BDFCC9
olive		#3B5E2B
olive_drab		#6B8E23
olive_green_dark		#556B2F
permanent_green		#0AC92B
sap_green		#308014
sea_green		#2E8B57
sea_green_dark		#8FBC8F
sea_green_medium		#3CB371
sea_green_light		#20B2AA
spring_green		#00FF7F
spring_green_medium		#00FA9A
terre_verte		#385E0F
viridian_light		#6EFF70
yellow_green		#9ACD32
Warna	Contoh	Kode
aquamarine		#7FFFD4
aquamarine_medium		#66CDAA
cyan		#00FFFF
cyan_white		#E0FFFF
turquoise		#40E0D0
turquoise_dark		#00CED1
turquoise_medium		#48D1CC
turquoise_pale		#AFEEEE
Warna	Contoh	Kode
alice_blue		#F0F8FF
blue		#0000FF
blue_light		#ADD8E6
blue_medium		#0000CD
cadet		#5F9EA0
cobalt		#3D59AB
cornflower		#6495ED
cerulean		#05B8CC
dodger_blue		#1E90FF
indigo		#082E54
manganese_blue		#03A89E
midnight_blue		#191970
navy		#000080
peacock		#33A1C9
powder_blue		#B0E0E6
royal_blue		#4169E1
slate_blue		#6A5ACD
slate_blue_dark		#483D8B
slate_blue_light		#8470FF
slate_blue_medium		#7B68EE
sky_blue		#87CEEB
sky_blue_deep		#00BFFF
sky_blue_light		#87CEFA
steel_blue		#4682B4
steel_blue_light		#B0C4DE
turquoise_blue		#00C78C
ultramarine		#120A8F
Warna	Contoh	Kode
blue_violet		#8A2BE2
cobalt_violet_deep		#91219E
magenta		#FF00FF
orchid		#DA70D6
orchid_dark		#9932CC
orchid_medium		#BA55D3
permanent_red_violet		#DB2645
plum		#DDA0DD
purple		#A020F0
purple_medium		#9370DB
ultramarine_violet		#5C246E
violet		#8F5E99
violet_dark		#9400D3
violet_red		#D02090
violet_red_medium		#C71585
violet_red_pale		#DB7093

Kode :

<table border="1" style="font-family: Verdana; font-size: 10pt" width="100%"><table border="1" style="font-family: Verdana; font-size: 10pt" width="100%"><tbody>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>Antique_white</td><td bgcolor="#faebd7"></td><td>#FAEBD7</td></tr>
<tr><td>azure</td><td bgcolor="#f0ffff"></td><td>#F0FFFF</td></tr>
<tr><td>Bisque</td><td bgcolor="#ffe4c4"></td><td>#FFE4C4</td></tr>
<tr><td>blanched_almond</td><td bgcolor="#ffebcd"></td><td>#FFEBCD</td></tr>
<tr><td>cornsilk</td><td bgcolor="#fff8dc"></td><td>#FFF8DC</td></tr>
<tr><td>eggshell</td><td bgcolor="#fce6c9"></td><td>#FCE6C9</td></tr>
<tr><td>floral_white</td><td bgcolor="#fffaf0"></td><td>#FFFAF0</td></tr>
<tr><td>gainsboro</td><td bgcolor="#dcdcdc"></td><td>#DCDCDC</td></tr>
<tr><td>ghost_white</td><td bgcolor="#f8f8ff"></td><td>#F8F8FF</td></tr>
<tr><td>honeydew</td><td bgcolor="#f0fff0"></td><td>#F0FFF0</td></tr>
<tr><td>ivory</td><td bgcolor="#fffff0"></td><td>#FFFFF0</td></tr>
<tr><td>lavender</td><td bgcolor="#e6e6fa"></td><td>#E6E6FA</td></tr>
<tr><td>lavender_blush</td><td bgcolor="#fff0f5"></td><td>#FFF0F5</td></tr>
<tr><td>lemon_chiffon</td><td bgcolor="#fffacd"></td><td>#FFFACD</td></tr>
<tr><td>linen</td><td bgcolor="#faf0e6"></td><td>#FAF0E6</td></tr>
<tr><td>mint_cream</td><td bgcolor="#f5fffa"></td><td>#F5FFFA</td></tr>
<tr><td>misty_rose</td><td bgcolor="#ffe4e1"></td><td>#FFE4E1</td></tr>
<tr><td>moccasin</td><td bgcolor="#ffe4b5"></td><td>#FFE4B5</td></tr>
<tr><td>navajo_white</td><td bgcolor="#ffdead"></td><td>#FFDEAD</td></tr>
<tr><td>old_lace</td><td bgcolor="#fdf5e6"></td><td>#FDF5E6</td></tr>
<tr><td>papaya_whip</td><td bgcolor="#ffefd5"></td><td>#FFEFD5</td></tr>
<tr><td>peach_puff</td><td bgcolor="#ffdab9"></td><td>#FFDAB9</td></tr>
<tr><td>seashell</td><td bgcolor="#fff5ee"></td><td>#FFF5EE</td></tr>
<tr><td>snow</td><td bgcolor="#fffafa"></td><td>#FFFAFA</td></tr>
<tr><td>thistle</td><td bgcolor="#d8bfd8"></td><td>#D8BFD8</td></tr>
<tr><td>titanium_white</td><td bgcolor="#fcfff0"></td><td>#FCFFF0</td></tr>
<tr><td>wheat</td><td bgcolor="#f5deb3"></td><td>#F5DEB3</td></tr>
<tr><td>white</td><td bgcolor="#ffffff"></td><td>#FFFFFF</td></tr>
<tr><td>white_smoke</td><td bgcolor="#f5f5f5"></td><td>#F5F5F5</td></tr>
<tr><td>zinc_white</td><td bgcolor="#fdf8ff"></td><td>#FDF8FF</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>cold_grey</td><td bgcolor="#808a87"></td><td>#808A87</td></tr>
<tr><td>dim_grey</td><td bgcolor="#696969"></td><td>#696969</td></tr>
<tr><td>grey</td><td bgcolor="#c0c0c0"></td><td>#C0C0C0</td></tr>
<tr><td>light_grey</td><td bgcolor="#d3d3d3"></td><td>#D3D3D3</td></tr>
<tr><td>slate_grey</td><td bgcolor="#708090"></td><td>#708090</td></tr>
<tr><td>slate_grey_dark</td><td bgcolor="#2f4f4f"></td><td>#2F4F4F</td></tr>
<tr><td>slate_grey_light</td><td bgcolor="#778899"></td><td>#778899</td></tr>
<tr><td>warm_grey</td><td bgcolor="#808069"></td><td>#808069</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>black</td><td bgcolor="#000000"></td><td>#000000</td></tr>
<tr><td>ivory_black</td><td bgcolor="#292421"></td><td>#292421</td></tr>
<tr><td>lamp_black</td><td bgcolor="#2e473b"></td><td>#2E473B</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>alizarin_crimson</td><td bgcolor="#e32636"></td><td>#E32636</td></tr>
<tr><td>brick</td><td bgcolor="#9c661f"></td><td>#9C661F</td></tr>
<tr><td>cadmium_red_deep</td><td bgcolor="#e3170d"></td><td>#E3170D</td></tr>
<tr><td>coral</td><td bgcolor="#ff7f50"></td><td>#FF7F50</td></tr>
<tr><td>coral_light</td><td bgcolor="#f08080"></td><td>#F08080</td></tr>
<tr><td>deep_pink</td><td bgcolor="#ff1493"></td><td>#FF1493</td></tr>
<tr><td>english_red</td><td bgcolor="#d43d1a"></td><td>#D43D1A</td></tr>
<tr><td>firebrick</td><td bgcolor="#b22222"></td><td>#B22222</td></tr>
<tr><td>geranium_lake</td><td bgcolor="#e31230"></td><td>#E31230</td></tr>
<tr><td>hot_pink</td><td bgcolor="#ff69b4"></td><td>#FF69B4</td></tr>
<tr><td>indian_red</td><td bgcolor="#b0171f"></td><td>#B0171F</td></tr>
<tr><td>light_salmon</td><td bgcolor="#ffa07a"></td><td>#FFA07A</td></tr>
<tr><td>madder_lake_deep</td><td bgcolor="#e32e30"></td><td>#E32E30</td></tr>
<tr><td>maroon</td><td bgcolor="#b03060"></td><td>#B03060</td></tr>
<tr><td>pink</td><td bgcolor="#ffc0cb"></td><td>#FFC0CB</td></tr>
<tr><td>pink_light</td><td bgcolor="#ffb6c1"></td><td>#FFB6C1</td></tr>
<tr><td>raspberry</td><td bgcolor="#872657"></td><td>#872657</td></tr>
<tr><td>red</td><td bgcolor="#ff0000"></td><td>#FF0000</td></tr>
<tr><td>rose_madder</td><td bgcolor="#e33638"></td><td>#E33638</td></tr>
<tr><td>salmon</td><td bgcolor="#fa8072"></td><td>#FA8072</td></tr>
<tr><td>tomato</td><td bgcolor="#ff6347"></td><td>#FF6347</td></tr>
<tr><td>venetian_red</td><td bgcolor="#d41a1f"></td><td>#D41A1F</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>beige</td><td bgcolor="#a39480"></td><td>#A39480</td></tr>
<tr><td>brown</td><td bgcolor="#802a2a"></td><td>#802A2A</td></tr>
<tr><td>brown_madder</td><td bgcolor="#db2929"></td><td>#DB2929</td></tr>
<tr><td>brown_ochre</td><td bgcolor="#87421f"></td><td>#87421F</td></tr>
<tr><td>burlywood</td><td bgcolor="#deb887"></td><td>#DEB887</td></tr>
<tr><td>burnt_sienna</td><td bgcolor="#8a360f"></td><td>#8A360F</td></tr>
<tr><td>burnt_umber</td><td bgcolor="#8a3324"></td><td>#8A3324</td></tr>
<tr><td>chocolate</td><td bgcolor="#d2691e"></td><td>#D2691E</td></tr>
<tr><td>deep_ochre</td><td bgcolor="#733d1a"></td><td>#733D1A</td></tr>
<tr><td>flesh</td><td bgcolor="#ff7d40"></td><td>#FF7D40</td></tr>
<tr><td>flesh_ochre</td><td bgcolor="#ff5721"></td><td>#FF5721</td></tr>
<tr><td>gold_ochre</td><td bgcolor="#c77826"></td><td>#C77826</td></tr>
<tr><td>greenish_umber</td><td bgcolor="#ff3d0d"></td><td>#FF3D0D</td></tr>
<tr><td>khaki</td><td bgcolor="#f0e68c"></td><td>#F0E68C</td></tr>
<tr><td>khaki_dark</td><td bgcolor="#bdb76b"></td><td>#BDB76B</td></tr>
<tr><td>light_beige</td><td bgcolor="#f5f5dc"></td><td>#F5F5DC</td></tr>
<tr><td>peru</td><td bgcolor="#cd853f"></td><td>#CD853F</td></tr>
<tr><td>rosy_brown</td><td bgcolor="#bc8f8f"></td><td>#BC8F8F</td></tr>
<tr><td>raw_sienna</td><td bgcolor="#c76114"></td><td>#C76114</td></tr>
<tr><td>raw_umber</td><td bgcolor="#734a12"></td><td>#734A12</td></tr>
<tr><td>sepia</td><td bgcolor="#5e2612"></td><td>#5E2612</td></tr>
<tr><td>sienna</td><td bgcolor="#a0522d"></td><td>#A0522D</td></tr>
<tr><td>saddle_brown</td><td bgcolor="#8b4513"></td><td>#8B4513</td></tr>
<tr><td>sandy_brown</td><td bgcolor="#f4a460"></td><td>#F4A460</td></tr>
<tr><td>tan</td><td bgcolor="#d2b48c"></td><td>#D2B48C</td></tr>
<tr><td>van_dyke_brown</td><td bgcolor="#5e2605"></td><td>#5E2605</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>cadmium_orange</td><td bgcolor="#ff6103"></td><td>#FF6103</td></tr>
<tr><td>cadmium_red_light</td><td bgcolor="#ff030d"></td><td>#FF030D</td></tr>
<tr><td>carrot</td><td bgcolor="#ed9121"></td><td>#ED9121</td></tr>
<tr><td>dark_orange</td><td bgcolor="#ff8c00"></td><td>#FF8C00</td></tr>
<tr><td>mars_orange</td><td bgcolor="#964514"></td><td>#964514</td></tr>
<tr><td>mars_yellow</td><td bgcolor="#e3701a"></td><td>#E3701A</td></tr>
<tr><td>orange</td><td bgcolor="#ff8000"></td><td>#FF8000</td></tr>
<tr><td>orange_red</td><td bgcolor="#ff4500"></td><td>#FF4500</td></tr>
<tr><td>yellow_ochre</td><td bgcolor="#e38217"></td><td>#E38217</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>aureoline_yellow</td><td bgcolor="#ffa824"></td><td>#FFA824</td></tr>
<tr><td>banana</td><td bgcolor="#e3cf57"></td><td>#E3CF57</td></tr>
<tr><td>cadmium_lemon</td><td bgcolor="#ffe303"></td><td>#FFE303</td></tr>
<tr><td>cadmium_yellow</td><td bgcolor="#ff9912"></td><td>#FF9912</td></tr>
<tr><td>cadmium_yellow_light</td><td bgcolor="#ffb00f"></td><td>#FFB00F</td></tr>
<tr><td>gold</td><td bgcolor="#ffd700"></td><td>#FFD700</td></tr>
<tr><td>goldenrod</td><td bgcolor="#daa520"></td><td>#DAA520</td></tr>
<tr><td>goldenrod_dark</td><td bgcolor="#b8860b"></td><td>#B8860B</td></tr>
<tr><td>goldenrod_light</td><td bgcolor="#fafad2"></td><td>#FAFAD2</td></tr>
<tr><td>goldenrod_pale</td><td bgcolor="#eee8aa"></td><td>#EEE8AA</td></tr>
<tr><td>light_goldenrod</td><td bgcolor="#eedd82"></td><td>#EEDD82</td></tr>
<tr><td>melon</td><td bgcolor="#e3a869"></td><td>#E3A869</td></tr>
<tr><td>naples_yellow_deep</td><td bgcolor="#ffa812"></td><td>#FFA812</td></tr>
<tr><td>yellow</td><td bgcolor="#ffff00"></td><td>#FFFF00</td></tr>
<tr><td>yellow_light</td><td bgcolor="#ffffe0"></td><td>#FFFFE0</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>chartreuse</td><td bgcolor="#7fff00"></td><td>#7FFF00</td></tr>
<tr><td>chrome_oxide_green</td><td bgcolor="#668014"></td><td>#668014</td></tr>
<tr><td>cinnabar_green</td><td bgcolor="#61b329"></td><td>#61B329</td></tr>
<tr><td>cobalt_green</td><td bgcolor="#3d9140"></td><td>#3D9140</td></tr>
<tr><td>emerald_green</td><td bgcolor="#00c957"></td><td>#00C957</td></tr>
<tr><td>forest_green</td><td bgcolor="#228b22"></td><td>#228B22</td></tr>
<tr><td>green</td><td bgcolor="#00ff00"></td><td>#00FF00</td></tr>
<tr><td>green_dark</td><td bgcolor="#006400"></td><td>#006400</td></tr>
<tr><td>green_pale</td><td bgcolor="#98fb98"></td><td>#98FB98</td></tr>
<tr><td>green_yellow</td><td bgcolor="#adff2f"></td><td>#ADFF2F</td></tr>
<tr><td>lawn_green</td><td bgcolor="#7cfc00"></td><td>#7CFC00</td></tr>
<tr><td>lime_green</td><td bgcolor="#32cd32"></td><td>#32CD32</td></tr>
<tr><td>mint</td><td bgcolor="#bdfcc9"></td><td>#BDFCC9</td></tr>
<tr><td>olive</td><td bgcolor="#3b5e2b"></td><td>#3B5E2B</td></tr>
<tr><td>olive_drab</td><td bgcolor="#6b8e23"></td><td>#6B8E23</td></tr>
<tr><td>olive_green_dark</td><td bgcolor="#556b2f"></td><td>#556B2F</td></tr>
<tr><td>permanent_green</td><td bgcolor="#0ac92b"></td><td>#0AC92B</td></tr>
<tr><td>sap_green</td><td bgcolor="#308014"></td><td>#308014</td></tr>
<tr><td>sea_green</td><td bgcolor="#2e8b57"></td><td>#2E8B57</td></tr>
<tr><td>sea_green_dark</td><td bgcolor="#8fbc8f"></td><td>#8FBC8F</td></tr>
<tr><td>sea_green_medium</td><td bgcolor="#3cb371"></td><td>#3CB371</td></tr>
<tr><td>sea_green_light</td><td bgcolor="#20b2aa"></td><td>#20B2AA</td></tr>
<tr><td>spring_green</td><td bgcolor="#00ff7f"></td><td>#00FF7F</td></tr>
<tr><td>spring_green_medium</td><td bgcolor="#00fa9a"></td><td>#00FA9A</td></tr>
<tr><td>terre_verte</td><td bgcolor="#385e0f"></td><td>#385E0F</td></tr>
<tr><td>viridian_light</td><td bgcolor="#6eff70"></td><td>#6EFF70</td></tr>
<tr><td>yellow_green</td><td bgcolor="#9acd32"></td><td>#9ACD32</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>aquamarine</td><td bgcolor="#7fffd4"></td><td>#7FFFD4</td></tr>
<tr><td>aquamarine_medium</td><td bgcolor="#66cdaa"></td><td>#66CDAA</td></tr>
<tr><td>cyan</td><td bgcolor="#00ffff"></td><td>#00FFFF</td></tr>
<tr><td>cyan_white</td><td bgcolor="#e0ffff"></td><td>#E0FFFF</td></tr>
<tr><td>turquoise</td><td bgcolor="#40e0d0"></td><td>#40E0D0</td></tr>
<tr><td>turquoise_dark</td><td bgcolor="#00ced1"></td><td>#00CED1</td></tr>
<tr><td>turquoise_medium</td><td bgcolor="#48d1cc"></td><td>#48D1CC</td></tr>
<tr><td>turquoise_pale</td><td bgcolor="#afeeee"></td><td>#AFEEEE</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>alice_blue</td><td bgcolor="#f0f8ff"></td><td>#F0F8FF</td></tr>
<tr><td>blue</td><td bgcolor="#0000ff"></td><td>#0000FF</td></tr>
<tr><td>blue_light</td><td bgcolor="#add8e6"></td><td>#ADD8E6</td></tr>
<tr><td>blue_medium</td><td bgcolor="#0000cd"></td><td>#0000CD</td></tr>
<tr><td>cadet</td><td bgcolor="#5f9ea0"></td><td>#5F9EA0</td></tr>
<tr><td>cobalt</td><td bgcolor="#3d59ab"></td><td>#3D59AB</td></tr>
<tr><td>cornflower</td><td bgcolor="#6495ed"></td><td>#6495ED</td></tr>
<tr><td>cerulean</td><td bgcolor="#05b8cc"></td><td>#05B8CC</td></tr>
<tr><td>dodger_blue</td><td bgcolor="#1e90ff"></td><td>#1E90FF</td></tr>
<tr><td>indigo</td><td bgcolor="#082e54"></td><td>#082E54</td></tr>
<tr><td>manganese_blue</td><td bgcolor="#03a89e"></td><td>#03A89E</td></tr>
<tr><td>midnight_blue</td><td bgcolor="#191970"></td><td>#191970</td></tr>
<tr><td>navy</td><td bgcolor="#000080"></td><td>#000080</td></tr>
<tr><td>peacock</td><td bgcolor="#33a1c9"></td><td>#33A1C9</td></tr>
<tr><td>powder_blue</td><td bgcolor="#b0e0e6"></td><td>#B0E0E6</td></tr>
<tr><td>royal_blue</td><td bgcolor="#4169e1"></td><td>#4169E1</td></tr>
<tr><td>slate_blue</td><td bgcolor="#6a5acd"></td><td>#6A5ACD</td></tr>
<tr><td>slate_blue_dark</td><td bgcolor="#483d8b"></td><td>#483D8B</td></tr>
<tr><td>slate_blue_light</td><td bgcolor="#8470ff"></td><td>#8470FF</td></tr>
<tr><td>slate_blue_medium</td><td bgcolor="#7b68ee"></td><td>#7B68EE</td></tr>
<tr><td>sky_blue</td><td bgcolor="#87ceeb"></td><td>#87CEEB</td></tr>
<tr><td>sky_blue_deep</td><td bgcolor="#00bfff"></td><td>#00BFFF</td></tr>
<tr><td>sky_blue_light</td><td bgcolor="#87cefa"><br /></td><td>#87CEFA</td></tr>
<tr><td>steel_blue</td><td bgcolor="#4682b4"></td><td>#4682B4</td></tr>
<tr><td>steel_blue_light</td><td bgcolor="#b0c4de"></td><td>#B0C4DE</td></tr>
<tr><td>turquoise_blue</td><td bgcolor="#00c78c"></td><td>#00C78C</td></tr>
<tr><td>ultramarine</td><td bgcolor="#120a8f"></td><td>#120A8F</td></tr>
<tr><th>Warna</th><th>Contoh</th><th><p>
Kode</p>
</th></tr>
<tr><td>blue_violet</td><td bgcolor="#8a2be2"></td><td>#8A2BE2</td></tr>
<tr><td>cobalt_violet_deep</td><td bgcolor="#91219e"></td><td>#91219E</td></tr>
<tr><td>magenta</td><td bgcolor="#ff00ff"></td><td>#FF00FF</td></tr>
<tr><td>orchid</td><td bgcolor="#da70d6"></td><td>#DA70D6</td></tr>
<tr><td>orchid_dark</td><td bgcolor="#9932cc"></td><td>#9932CC</td></tr>
<tr><td>orchid_medium</td><td bgcolor="#ba55d3"></td><td>#BA55D3</td></tr>
<tr><td>permanent_red_violet</td><td bgcolor="#db2645"></td><td>#DB2645</td></tr>
<tr><td>plum</td><td bgcolor="#dda0dd"></td><td>#DDA0DD</td></tr>
<tr><td>purple</td><td bgcolor="#a020f0"></td><td>#A020F0</td></tr>
<tr><td>purple_medium</td><td bgcolor="#9370db"></td><td>#9370DB</td></tr>
<tr><td>ultramarine_violet</td><td bgcolor="#5c246e"></td><td>#5C246E</td></tr>
<tr><td>violet</td><td bgcolor="#8f5e99"></td><td>#8F5E99</td></tr>
<tr><td>violet_dark</td><td bgcolor="#9400d3"></td><td>#9400D3</td></tr>
<tr><td>violet_red</td><td bgcolor="#d02090"></td><td>#D02090</td></tr>
<tr><td>violet_red_medium</td><td bgcolor="#c71585"></td><td>#C71585</td></tr>
<tr><td>violet_red_pale</td><td bgcolor="#db7093"></td><td>#DB7093<br /></td></tr>
</tbody></table>
<a href="http://dhecun.blogspot.com/2012/11/script-tabel-kode-warna-html.html" target="_blank">Get Widget</a>

Tabel Kode warna HTML 2

Kode :

<object classid="clsid:D27CDB6E-
AE6D-11cf-96B8-444553540000" width="400" height="430" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="http://e-infotainment.com/applications/color-code-
generator/v1/trixcgv1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#cccccc" />
<embed src="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf" 
quality="high" bgcolor="#cccccc" width="400" height="380" name="flash" align="middle" 
play="true" loop="false" quality="high" type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed></object>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-tabel-kode-warna-html.html" 
target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Semoga bermanfaat...!!!

Admin

.:: Get Widget ::.

Keterangan Artikel

Ditulis oleh : Dhecun Blog
Judul : Script tabel kode warna HTML
Berlangganan artikel
Komentari artikel ini...!!!

<b>Dhecun Blog : <a href='http://dhecun.blogspot.com/2012/11/script-tabel-kode-warna-html.html'>Script tabel kode warna HTML</a></b>

Silahkan Copy Paste artikel ini tapi jangan lupa untuk mencantumkan link sumber aslinya. Terima kasih.

Widget Zoom Detail Gambar

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

/***********************************************
* Frame dcode

***********************************************/

</script>

jQuery(document).ready(function($){

$('#image1').addimagezoom({
  zoomrange: [3, 30],
  magnifiersize: [500,500],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png' //<-- No comma after last option!
 })

$('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'alamat gambar 2' //<-- No comma after last option!
 })

$('#image3').addimagezoom()

})

</script>

// feb 2 12
// modifikasi script

jQuery.noConflict()

jQuery('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');

var featuredimagezoomer={
 loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
 magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image

/////NO NEED TO EDIT BEYOND HERE////////////////
 dsetting: { //default settings
   magnifierpos: 'right',
   magnifiersize:[200, 200],
   cursorshadecolor: '#fff',
   cursorshadeopacity: 0.3,
   cursorshadeborder: '1px solid black',
   cursorshade: false,
   leftoffset: 15, //offsets here are used (added to) the width of the magnifyarea when
   rightoffset: 10 //calculating space requirements and to position it visa vis any drop shadow
  },
 isie: (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})(), //is this IE?

showimage: function($, $tracker, $mag, showstatus){
  var specs=$tracker.data('specs'), d=specs.magpos, fiz=this;
  var coords=$tracker.data('specs').coords //get coords of tracker (from upper corner of document)
  specs.windimensions={w:$(window).width(), h:$(window).height()}; //remember window dimensions
  var magcoords={} //object to store coords magnifier DIV should move to
  magcoords.left = coords.left + (d === 'left'? -specs.magsize.w - specs.lo : $tracker.width() + specs.ro);
  //switch sides for magnifiers that don't have enough room to display on the right if there's room on the left:
  if(d!=='left' && magcoords.left + specs.magsize.w + specs.lo >= specs.windimensions.w && coords.left - specs.magsize.w >= specs.lo){
   magcoords.left = coords.left - specs.magsize.w - specs.lo;
  } else if(d==='left' && magcoords.left < specs.ro) { //if there's no room on the left, move to the right
   magcoords.left = coords.left + $tracker.width() + specs.ro;
  }
  $mag.css({left: magcoords.left, top:coords.top}).show(); //position magnifier DIV on page
  specs.$statusdiv.html('Current Zoom: '+specs.curpower+'<div style="font-size:100%">Use Mouse Wheel to Zoom In/Out</div>');
  if (showstatus) //show status DIV? (only when a range of zoom is defined)
   fiz.showstatusdiv(specs, 400, 2000);
 },

hideimage: function($tracker, $mag, showstatus){
  var specs=$tracker.data('specs');
  $mag.hide();
  if (showstatus)
   this.hidestatusdiv(specs);
 },

showstatusdiv: function(specs, fadedur, showdur){
  clearTimeout(specs.statustimer)
  specs.$statusdiv.fadeIn(fadedur) //show status div
  specs.statustimer=setTimeout(function(){featuredimagezoomer.hidestatusdiv(specs)}, showdur) //hide status div after delay
 },

hidestatusdiv: function(specs){
  specs.$statusdiv.stop(true, true).hide()
 },

getboundary: function(b, val, specs){ //function to set x and y boundaries magnified image can move to (moved outside moveimage for efficiency)
  if (b=="left"){
   var rb=-specs.imagesize.w*specs.curpower+specs.magsize.w
   return (val>0)? 0 : (val<rb)? rb : val
  }
  else{
   var tb=-specs.imagesize.h*specs.curpower+specs.magsize.h
   return (val>0)? 0 : (val<tb)? tb : val
  }
 },

moveimage: function($tracker, $maginner, $cursorshade, e){
  var specs=$tracker.data('specs'), csw = Math.round(specs.magsize.w/specs.curpower), csh = Math.round(specs.magsize.h/specs.curpower),
  csb = specs.csborder, fiz = this, imgcoords=specs.coords, pagex=(e.pageX || specs.lastpagex), pagey=(e.pageY || specs.lastpagey),
  x=pagex-imgcoords.left, y=pagey-imgcoords.top;
  $cursorshade.css({ // keep shaded area sized and positioned proportionately to area being magnified
   visibility: '',
   width: csw,
   height: csh,
   top: Math.min(specs.imagesize.h-csh-csb, Math.max(0, y-(csb+csh)/2)) + imgcoords.top,
   left: Math.min(specs.imagesize.w-csw-csb, Math.max(0, x-(csb+csw)/2)) + imgcoords.left
  });
  var newx=-x*specs.curpower+specs.magsize.w/2 //calculate x coord to move enlarged image
  var newy=-y*specs.curpower+specs.magsize.h/2
  $maginner.css({left:fiz.getboundary('left', newx, specs), top:fiz.getboundary('top', newy, specs)})
  specs.$statusdiv.css({left:pagex-10, top:pagey+20})
  specs.lastpagex=pagex //cache last pagex value (either e.pageX or lastpagex), as FF1.5 returns undefined for e.pageX for "DOMMouseScroll" event
  specs.lastpagey=pagey
 },

magnifyimage: function($tracker, e, zoomrange){
  var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
  var zoomdir=(delta<=-120)? "out" : "in"
  var specs=$tracker.data('specs')
  var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
  var newpower=(zoomdir=="in")? Math.min(power+1, zoomrange[1]) : Math.max(power-1, zoomrange[0]) //get new power
  var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
  magnifier.$image.css({width:nd[0], height:nd[1]})
  specs.curpower=newpower //set current power to new power after magnification
  specs.$statusdiv.html('Current Zoom: '+specs.curpower)
  this.showstatusdiv(specs, 0, 500)
  $tracker.trigger('mousemove')
 },

init: function($, $img, options){
  var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
  fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0};
  setting.largeimage = setting.largeimage || $img.get(0).src;
  $magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
   .append('<div style="position:relative;left:0;top:0;" />')
   .appendTo(document.body) //create magnifier container
  //following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:
  if(setting.cursorshade){
   $cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;" />')
    .css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
    .appendTo(document.body);
  } else {
   $cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs')
  }
  $statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;" />')
   .html('<img src="'+this.loadinggif+'" />')
   .appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
  $tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')
   .css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')})
   .appendTo(document.body);
  $(window).resize(function(){ //in case resizing the window repostions the image
    var o = $img.offset();
    $tracker.css({left: o.left, top: o.top});
   });

function getspecs($maginner, $bigimage){ //get specs function
   var magsize={w:$magnifier.width(), h:$magnifier.height()}
   var imagesize={w:w, h:h}
   var power=(setting.zoomrange)? setting.zoomrange[0] : ($bigimage.width()/w).toFixed(5)
   $tracker.data('specs', {
    $statusdiv: $statusdiv,
    statustimer: null,
    magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage},
    magsize: magsize,
    magpos: setting.magnifierpos,
    imagesize: imagesize,
    curpower: power,
    coords: getcoords(),
    csborder: $cursorshade.outerWidth(),
    lo: setting.leftoffset,
    ro: setting.rightoffset
   })
  }

function getcoords(){ //get coords of thumb image function
   var offset=$tracker.offset() //get image's tracker div's offset from document
   return {left:offset.left, top:offset.top}
  }

$tracker.mouseover(function(e){
     $cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', false);
   }).mouseout(function(e){
     $cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', true);
   }).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed
    lastpage.pageX = e.pageX;
    lastpage.pageY = e.pageY;
   });

$tracker.one('mouseover', function(e){
   var $maginner=$magnifier.find('div:eq(0)')
   var $bigimage=$('<img src="'+setting.largeimage+'"/>').appendTo($maginner)
   var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
   $img.css({opacity:0.1}) //"dim" image while large image is loading
   var imgcoords=getcoords()
   $statusdiv.css({left:imgcoords.left+w/2-$statusdiv.width()/2, top:imgcoords.top+h/2-$statusdiv.height()/2, visibility:'visible'})
   $bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later)
    $img.css({opacity:1}) //restore thumb image opacity
    $statusdiv.empty().css({border:'1px solid black', background:'#C0C0C0', padding:'4px', font:'bold 13px Arial', opacity:0.8}).hide().removeClass('preloadevt');
    if($tracker.data('premouseout')){
     $statusdiv.addClass('featuredimagezoomerhidden');
    }
    if (setting.zoomrange){ //if set large image to a specific power
     var nd=[w*setting.zoomrange[0], h*setting.zoomrange[0]] //calculate dimensions of new enlarged image
     $bigimage.css({width:nd[0], height:nd[1]})
    }
    getspecs($maginner, $bigimage) //remember various info about thumbnail and magnifier
    $magnifier.css({display:'none', visibility:'visible'})
    $tracker.mouseover(function(e){ //image onmouseover
     $tracker.data('specs').coords=getcoords() //refresh image coords (from upper left edge of document)
     fiz.showimage($, $tracker, $magnifier, showstatus)
    })
    $tracker.mousemove(function(e){ //image onmousemove
     fiz.moveimage($tracker, $maginner, $cursorshade, e)
    })
    if (!$tracker.data('premouseout')){
     fiz.showimage($, $tracker, $magnifier, showstatus);
     fiz.moveimage($tracker, $maginner, $cursorshade, lastpage);
    }
    $tracker.mouseout(function(e){ //image onmouseout
     fiz.hideimage($tracker, $magnifier, showstatus)
    }).css({cursor: fiz.magnifycursor});
    if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled
     $tracker.bind('DOMMouseScroll mousewheel', function(e){
      fiz.magnifyimage($tracker, e, setting.zoomrange);
      e.preventDefault();
     });
    }
   }) //end $bigimage onload
   if ($bigimage.get(0).complete){ //if image has already loaded (account for IE, Opera not firing onload event if so)
    $bigimage.trigger('loadevt')
   }
   else{
    $bigimage.bind('load', function(){$bigimage.trigger('loadevt')})
   }
  })
 },

iname: (function(){var itag = jQuery('<img />'), iname = itag.get(0).tagName; itag.remove(); return iname;})()
};

jQuery.fn.addimagezoom=function(options){
 var $=jQuery;
 return this.each(function(){ //return jQuery obj
  if (this.tagName !== featuredimagezoomer.iname)
   return true; //skip to next matched element
  featuredimagezoomer.init($, $(this), options);
 });
}
</script>
<p><img id="image1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png" style="width:170px;height:170px" /><p></p></p> 
<center>Mainkan roda mouse anda untuk membuat tampilan lebih besar</center>
<br/>
<div style="text-align:center; font-size:0.75em">
<a href="http://dhecun.blogspot.com/2012/11/script-zoom-gambar-dengan-detail.html">[ Get Widget ]</a></div>

Widget Share Button Melayang

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

Blogger templates

Pages

Beranda

My Facebook

Kirim SMS Gratis

Download Gratis

Contact us

Dhecun Blog

Script tabel kode warna HTML

Thursday, November 15, 2012

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Space Iklan

Kategori pasang iklan

Iklan Sponsor 1

About Me

Contact

Rekomendasi

Follow

RSS feeds

Widget Populer

Share

Tukar Link

Traffic

Semua Artikel

10 Artikel Terbaru

Followers

Advertiser

Pasang iklan dapat diut