Fungsi Utama : Untuk yang sedang belajar merubah tampilan warna website atau blogspot, pastinya sobat sangat membutuhkan sebuah kode warna html untuk mendapatkan warna kode tersebut, Sebenarnya sih sangat banyak sekali cara untuk mendapatkan tools kode warna ini.
Seperti artikel yang sudah pernah saya share sebelumnya di Kumpulan Kode warna html di blog, Nah kalau tools kode warna itu sobat bisa menyimpannya di website atau blogs di dalam postingan, dan tools tersebut itu berbasis file swf.
Dan saya sengaja membuat halaman Tabel Kode Warna ini, untuk mempermudah melakukan pencarian warna kode html, karena sewaktu - waktu pasti dibutuhkan untuk merubah warna pada elemen - elemen widget yang terdapat di blogs ini.
| Color Name | HEX | Color |
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| DarkOrange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGray | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370DB | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #DB7093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
Contoh kode cara merubah warna teks dan ukuran fonts
<span style=font-size:30px;color:DarkBlue>trik mudah merubah warna teks dan ukuran fonts di website / blogspot</span>
Contoh kode cara membuat warna Latar / Background di teks
<span style="background-color:#80FE80">cara memberi warna background pada teks</span>
<div style="background-color:#BFFEBF">Kode lain untuk kasih warna background pada teks</div>
<p style="background-color:#008E00;color:white">kode masih sama dengan background di teks</p>
Sebenarnya masih banyak cara metode variasi format font style itu, bisa dengan memberikan efect style font seperti di bawah ini :
<p style="font-family:Arial">cara membuat tulisan dengan font family Arial itu seperti ini kodenya</p>
<p style="font-style:italic">cara membuat tulisan miring tuh kaya gini kodenya</p>
<p><strong>cara membuat tulisan tebal tuh contohnya begini</strong></p>
<p style="font-weight:bold">ini juga masih sama tulisan tebal</p>
<p style="font-size:30px">cara merubah ukuran font</p>
<p style="color:blue">cara membuat tulisan berwarna</p>
<p style="text-decoration:line-through;">cara membuat tulisan yang dicoret</p>
<p style="text-decoration:underline;">cara membuat tulisan garis bawah</p>
<p style="text-decoration:overline;">cara membuat tulisan garis atas</p>
<p style="text-transform:uppercase">mengubah huruf kecil menjadi huruf besar semua</p>
<p style="text-transform:lowercase">HURUF BESAR MENJADI HURUF KECIL SEMUANYA</p>
<p style="text-transform:capitalize">menampilkan setiap teks awal dengan menjadi huruf besar betul tidak</p>
<p style="text-align:left">Membuat teks di sebelah kiri, ini adalah contoh kode untuk tulisan dimulai rata kiri, begitulah kalau dilihat dari tulisan ini memang benar dari sebelah kiri</p>
<p style="text-align:center">Membuat teks di tengah, ini adalah contoh tulisan rata tengah dan dimulainya juga dari tengah dulu coba lihat dan perhatikan sepertinya benar juga ditengah</p>
<p style="text-align:right">Membuat teks di samping kanan, ini adalah contoh yang dimulai dari kanan coba perhatikan tulisan ini oh ternyata emang begitu cara membuat teks di samping kanan</p>
<p style="text-align:justify">cara membuat tulisan rata kiri, rata kanan dan di tengah , ini adalah kode untuk merubah huruf menjadi rata kanan rata kiri dan di tengah menjadi terlihat rapih</p>
Contoh kode gabungan beberapa style font di atas di bawah ini :
<a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=85916" style="float: right; " onmouseover="window.location=this.href" title="salam kenal sobat..." target="_blank"><img src="http://img.aqovd.com/static/images/hots_br/hots/Facebook.png"></a>
<span style="color: blue;font-size:30px">belajarlah mencoba dengan hal - hal yang baru dan jangan pernah takut</span> <span style="background-color: Red;text-decoration:line-through;font-size:30px;font-weight:bold;color: white;">salah</span> <span style="color: blue;"><span style="font-size:30px">dengan</span></span> <span style="background-color: Red;text-decoration:line-through;font-size:30px;font-weight:bold;color: white;">Percobaan tersebut</span><span style="color: blue;font-size:30px">!!!</span><br><ul><li><span style="color: #00248E;font-size:20px;font-style:italic">Alat dan bahan sudah ada</span></li>
<li><span style="color: #00248E;font-size:20px;font-style:italic">Materi Pembelajaran sudah lengkap di berbagai search enggine</span></li></ul><p style="text-align:justify"><span style="color: blue;font-size:20px;">Hampir semua rahasia modifikasi merubah tampilan website atau blogs saya tulis dan share disini, tinggal sobat yang mau belajar bersama dengan saya disini, kita sama - sama pemula jadi jangan sungkan - sungkan jika tidak ada yang dipahami silahkan tanyakan di <span style="background-color: #BFFEBF;"><a onclick="window.open('http://variasiblogger.blogspot.com/2012/06/info-pasang-iklan.html')" href="http://variasiblogger.blogspot.com/" title="Belajar SEO dan Blog Desain Simple Mudah Bagi Pemula" target="_blank" rel="nofollow">info blogs indonesia</a></span> ini oke sobat...</span></p>
<script language="JavaScript">
var text ="Selamat Belajar Modifikasi kode - kode disini sahabat, Blog ini adalah sarana tempat belajar Tutorial Tips Trik Blog dan SEO, semoga blog ini bisa menjadi panduan belajar untuk anda semua, Terimakasih sudah berminat dan membaca artikel - artikel yang saya share diblog sederhana ini... (◕ ‿◕)";
var delay=20;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script> <i><b><div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"></div></i></b> <script language="JavaScript">
javascript:startTyping(text, 100, "textDestination");
</script>
Selamat merubah warna website atau blogs dengan kode - kode warna html di atas, Jika sobat ingin mencoba beberapa contoh kode diatas silahkan sobat bisa menuju halaman di Free Online HTML EDITOR untuk melihat hasil contoh yang saya buat seperti apa ?
