Cara Memasang Kode Warna dalam Blogger

Warna adalah spektrum tertentu yang terdapat di dalam suatu cahaya sempurna (berwarna putih). Identitas suatu warna ditentukan panjang gelombang cahaya tersebut. Peranan warna dalam suatu blog dapat menentukan keindahan suatu blog tersebut, berikut cara Memasang Kode Warna dalam Blogger :


<center class="button_wrap">
<a class="button button_turquoise" onClick="colorToTurquoise()">Turquoise</a><a class="button button_green_sea" onClick="colorToGreenSea()">GreenSea</a><a class="button button_emerald" onClick="colorToEmerald()">Emerald</a><a class="button button_nephritis" onClick="colorToNephritis()">Nephritis</a><a class="button button_peter_river" onClick="colorToPeterRiver()">PRiver</a><a class="button button_belize_hole" onClick="colorToBelizeHole()">BelizeH</a><a class="button button_amethyst" onClick="colorToAmethyst()">Amethyst</a><a class="button button_wisteria" onClick="colorToWisteria()">Wisteria</a><a class="button button_wet_asphalt" onClick="colorToWetAsphalt()">WetA</a><a class="button button_midnight_blue" onClick="colorToMidnightBlue()">Midnight</a><a class="button button_sunflower" onClick="colorToSunflower()">Sunflower</a><a class="button button_orange" onClick="colorToOrange()">Orange</a><a class="button button_carrot" onClick="colorToCarrot()">Carrot</a><a class="button button_white_smoke" onClick="colorToWhiteSmoke()">WhiteSmoke</a><a class="button button_pumpkin" onClick="colorToPumpkin()">Pumpkin</a><a class="button button_alizarin" onClick="colorToAlizarin()">Alizarin</a><a class="button button_pomegranate" onClick="colorToPomegranate()">Pgranate</a><a class="button button_clouds" onClick="colorToClouds()">Clouds</a><a class="button button_silver" onClick="colorToSilver()">Silver</a><a class="button button_concrete" onClick="colorToConcrete()">Concrete</a><a class="button button_asbestos" onClick="colorToAsbestos()">Asbestos</a><a class="button button_chestnut_rose" onClick="colorToChestnutRose()">ChestnutR</a><a class="button button_alice_blue" onClick="colorToAliceBlue()">AliceBlue</a><a class="button button_spray" onClick="colorToSpray()">Spray</a><a class="button button_gossip" onClick="colorToGossip()">Gossip</a><a class="button button_cream_can" onClick="colorToCreamCan()">CreamCan</a><a class="button button_silver_tree" onClick="colorToSilverTree()">SilverTree</a><a class="button button_cape_honey" onClick="colorToCapeHoney()">CapeHoney</a><a class="button button_medium_turquoise" onClick="colorToMediumTurquoise()">MTurquoise</a><a class="button button_lynch" onClick="colorToLynch()">Lynch</a><a class="button button_crusta" onClick="colorToCrusta()">Crusta</a><a class="button button_jungle_green" onClick="colorToJungleGreen()">JungleG</a><a class="button button_hoki" onClick="colorToHoki()">Hoki</a><a class="button button_wax_flower" onClick="colorToWaxFlower()">WaxFlower</a><a class="button button_observatory" onClick="colorToObservatory()">Observat</a><a class="button button_ecstacy" onClick="colorToEcstasy()">Ecstacy</a></center>
<center>
<div class="virlyz-header">
FLAT UI COLOR</div>
<div class="hasil-kode" id="hasil-kode">
<div class="colorName" id="colorName">
Silakan klik button warna diatas,</div>
<div class="colorText" id="colorText">
Lalu copy kode warna yang dihasilkan sesuai yang anda pilih..!!!</div>
<section><p>
</p>
</section></div>
</center>


<div id="flatuarlina">
    <ul class="flatui">
      <li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
      </li>
      <li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
      </li>
      <li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
      </li>
      <li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
      </li>
      <li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
      </li>
      <li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
      </li>
      <li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
      </li>
      <li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
      </li>
      <li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
      </li>
      <li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
      </li>
      <li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
      </li>
      <li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
      </li>
      <li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
      </li>
      <li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
      </li>
      <li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
      </li>
      <li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
      </li>
      <li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
      </li>
      <li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
      </li>
      <li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
      </li>
      <li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
      </li>
      <li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
      </li>
      <li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
      </li>
      <li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
      </li>
      <li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
      </li>
      <li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
      </li>
      <li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
      </li>
      <li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
      </li>
      <li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
      </li>
      <li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
      </li>
      <li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
      </li>
      <li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
      </li>
      <li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
      </li>
      <li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
      </li>
      <li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
      </li>
      <li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
      </li>
      <li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
      </li>
      <li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
      </li>
      <li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
      </li>
      <li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
      </li>
      <li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
      </li>
      <li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
      </li>
      <li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
      </li>
      <li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
      </li>
      <li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
      </li>
      <li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
      </li>
      <li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
      </li>
      <li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
      </li>
      <li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
      </li>
      <li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
      </li>
      <li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
      </li>
      <li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
      </li>
      <li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
      </li>
      <li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
      </li>
      <li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
      </li>
      <li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
      </li>
      <li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
      </li>
      <li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
      </li>
      <li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
      </li>
      <li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
      </li>
      <li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
      </li>
      <li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
      </li>
      <li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
      </li>
      <li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
      </li>
      <li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
      </li>
      <li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
      </li>
      <li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
      </li>
      <li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
      </li>
      <li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
      </li>
      <li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
      </li>
      <li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
      </li>
      <li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
      </li>
      <li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
      </li>
      <li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
      </li>
      <li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
      </li>
      <li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
      </li>
      <li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
      </li>
      <li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
      </li>
      <li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
      </li>
      <li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
      </li>
      <li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
      </li>
    </ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by www.arlinadzgn.com */
#flatuarlina ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatuarlina ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatuarlina ul.flatui li:hover{z-index:4}
#flatuarlina ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatuarlina ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatuarlina ul.flatui li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatuarlina ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatuarlina ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatuarlina ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatuarlina ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatuarlina ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatuarlina ul.flatui li{width:100%}}
</style>
<style scoped="" type="text/css">
/* Color Picker by www.lk21.news */
.virlyz-header{
text-align:center;
font-size:30px;
background:#777;
color:#fafafa;
border:1px solid #777;
padding:10px;
}

.button_wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-content: center;
  align-content: center;
margin-bottom:20px;
}
.button {
  text-transform: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 2.4em;
  flex: 100 100 8%;
  -webkit-flex: 100 100 8%;
}
.button_turquoise {
  border: 5px solid #1abc9c;
  background: #1abc9c;
  color: #fff;
  padding: 1px;
}
.button_green_sea {
  border: 5px solid #16a085;
  background: #16a085;
  color: #fff;
  padding: 1px;
}
.button_emerald {
  border: 5px solid #2ecc71;
  background: #2ecc71;
  color: #fff;
  padding: 1px;
}
.button_nephritis {
  border: 5px solid #27ae60;
  background: #27ae60;
  color: #fff;
  padding: 1px;
}
.button_peter_river {
  border: 5px solid #3498db;
  background: #3498db;
  color: #fff;
  padding: 1px;
}
.button_belize_hole {
  border: 5px solid #2980b9;
  background: #2980b9;
  color: #fff;
  padding: 1px;
}
.button_amethyst {
  border: 5px solid #9b59b6;
  background: #9b59b6;
  color: #fff;
  padding: 1px;
}
.button_wisteria {
  border: 5px solid #8e44ad;
  background: #8e44ad;
  color: #fff;
  padding: 1px;
}
.button_wet_asphalt {
  border: 5px solid #34495e;
  background: #34495e;
  color: #fff;
  padding: 1px;
}
.button_midnight_blue {
  border: 5px solid #2c3e50;
  background: #2c3e50;
  color: #fff;
  padding: 1px;
}
.button_sunflower {
  border: 5px solid #f1c40f;
  background: #f1c40f;
  color: #fff;
  padding: 1px;
}
.button_orange {
  border: 5px solid #f39c12;
  background: #f39c12;
  color: #fff;
  padding: 1px;
}
.button_carrot {
  border: 5px solid #e67e22;
  background: #e67e22;
  color: #fff;
  padding: 1px;
}
.button_pumpkin {
  border: 5px solid #d35400;
  background: #d35400;
  color: #fff;
  padding: 1px;
}
.button_alizarin {
  border: 5px solid #e74c3c;
  background: #e74c3c;
  color: #fff;
  padding: 1px;
}
.button_pomegranate {
  border: 5px solid #c0392b;
  background: #c0392b;
  color: #fff;
  padding: 1px;
}
.button_clouds {
  border: 5px solid #ecf0f1;
  background: #ecf0f1;
  color: #808080;
  padding: 1px;
}
.button_silver {
  border: 5px solid #bdc3c7;
  background: #bdc3c7;
  color: #fff;
  padding: 1px;
}
.button_concrete {
  border: 5px solid #95a5a6;
  background: #95a5a6;
  color: #fff;
  padding: 1px;
}
.button_asbestos {
  border: 5px solid #7f8c8d;
  background: #7f8c8d;
  color: #fff;
  padding: 1px;
}

.button_chestnut_rose{
  border: 5px solid #D24D57;
  background: #D24D57;
  color: #fff;
  padding: 1px;
}

.button_alice_blue{
  border: 5px solid #E4F1FE;
  background: #E4F1FE;
  color: #999;
  padding: 1px;
}

.button_spray{
  border: 5px solid #81CFE0;
  background: #81CFE0;
  color: #fff;
  padding: 1px;
}

.button_gossip{
  border: 5px solid #87D37C;
  background: #87D37C;
  color: #fff;
  padding: 1px;
}

.button_cream_can{
  border: 5px solid #F5D76E;
  background: #F5D76E;
  color: #fff;
  padding: 1px;
}

.button_silver_tree{
  border: 5px solid #68C3A3;
  background: #68C3A3;
  color: #fff;
  padding: 1px;
}

.button_cape_honey{
  border: 5px solid #FDE3A7;
  background: #FDE3A7;
  color: #999;
  padding: 1px;
}

.button_medium_turquoise{
  border: 5px solid #4ECDC4;
  background: #4ECDC4;
  color: #fff;
  padding: 1px;
}

.button_white_smoke{
  border: 5px solid #ECECEC;
  background: #ECECEC;
  color: #999;
  padding: 1px;
}

.button_lynch{
  border: 5px solid #6C7A89;
  background: #6C7A89;
  color: #fff;
  padding: 1px;
}

.button_crusta{
  border: 5px solid #F2784B;
  background: #F2784B;
  color: #fff;
  padding: 1px;
}

.button_jungle_green{
  border: 5px solid #26C281;
  background: #26C281;
  color: #fff;
  padding: 1px;
}

.button_hoki{
  border: 5px solid #67809F;
  background: #67809F;
  color: #fff;
  padding: 1px;
}

.button_wax_flower{
  border: 5px solid #F1A9A0;
  background: #F1A9A0;
  color: #fff;
  padding: 1px;
}

.button_observatory{
  border: 5px solid #049372;
  background: #049372;
  color: #fff;
  padding: 1px;
}

.button_ecstacy{
  border: 5px solid #F9690E;
  background: #F9690E;
  color: #fff;
  padding: 1px;
}

.hasil-kode {border:1px solid #777;
  padding-top: 15px;
  font-size:24px;
  color: #999;
  width: 100%;
  background: #ececec;
}
section {
  background: #transparent;
  margin: 30px;
  font-family: "Arvo";
  width: 80%;
  color: #000;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 1px;
  padding-bottom: 1px;
  text-align: left;
}

@media (max-width: 800px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 4px;
  }
  .hasil-kode {
    width: 100%;
  }
}
@media (max-width: 320px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 3px;
  }
  .hasil-kode {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 3px;
  }

@import url(https://fonts.googleapis.com/css?family=Oxygen:400,700);
a:link {
  text-decoration: none;
  outline: none;
  transition: all 0.25s;
}

a:visited,
a:link:hover,
a:visited:hover {
  text-decoration: none;
}

body {
  background: #e0e0e0;
  color: #444;
  font-family: 'Oxygen', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.container {
  background: #fff;
  max-width: 920px;
  margin: 4% auto;
  padding: 20px;
  font-family: 'Oxygen', sans-serif;
  border-radius: 10px;
  overflow: hidden;
}

.container h2 {
  background: #fff;
  position: relative;
  overflow: hidden;
  margin: 0 0 20px 0;
  font-size: 2.2em;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  padding: 0 12px 20px 12px;
  color: #4B77BE;
  border-bottom: 2px dotted rgba(0, 0, 0, 0.28);
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>

<script type='text/javascript'>
function colorToTurquoise() {
 document.getElementById("hasil-kode").style.backgroundColor = "#1abc9c";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Turquoise";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#1abc9c";
}

function colorToGreenSea() {
 document.getElementById("hasil-kode").style.backgroundColor = "#16a085";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Green Sea";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#16a085";
}

function colorToEmerald() {
 document.getElementById("hasil-kode").style.backgroundColor = "#2ecc71";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Emerald";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#2ecc71";
}

function colorToNephritis() {
 document.getElementById("hasil-kode").style.backgroundColor = "#27ae60";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Nephritis";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#27ae60";
}

function colorToPeterRiver() {
 document.getElementById("hasil-kode").style.backgroundColor = "#3498db";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Peter River";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#3498db";
}

function colorToBelizeHole() {
 document.getElementById("hasil-kode").style.backgroundColor = "#2980b9";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Belize Hole";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#2980b9";
}

function colorToAmethyst() {
 document.getElementById("hasil-kode").style.backgroundColor = "#9b59b6";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Amethyst";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#9b59b6";
}

function colorToWisteria() {
 document.getElementById("hasil-kode").style.backgroundColor = "#8e44ad";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Wisteria";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#8e44ad";
}

function colorToWetAsphalt() {
 document.getElementById("hasil-kode").style.backgroundColor = "#34495e";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Wet Asphalt";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#34495e";
}

function colorToMidnightBlue() {
 document.getElementById("hasil-kode").style.backgroundColor = "#2c3e50";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Midnight Blue";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#2c3e50";
}

function colorToSunflower() {
 document.getElementById("hasil-kode").style.backgroundColor = "#f1c40f";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Sunflower";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#f1c40f";
}

function colorToOrange() {
 document.getElementById("hasil-kode").style.backgroundColor = "#f39c12";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Orange";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#f39c12";
}

function colorToCarrot() {
 document.getElementById("hasil-kode").style.backgroundColor = "#e67e22";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Carrot";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#e67e22";
}

function colorToPumpkin() {
 document.getElementById("hasil-kode").style.backgroundColor = "#d35400";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Pumpkin";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#d35400";
}

function colorToAlizarin() {
 document.getElementById("hasil-kode").style.backgroundColor = "#e74c3c";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Alizarin";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#e74c3c";
}

function colorToPomegranate() {
 document.getElementById("hasil-kode").style.backgroundColor = "#c0392b";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Pomegranate";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#c0392b";
}

function colorToClouds() {
 document.getElementById("hasil-kode").style.backgroundColor = "#ecf0f1";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Clouds";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#ecf0f1";
}

function colorToSilver() {
 document.getElementById("hasil-kode").style.backgroundColor = "#bdc3c7";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Silver";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#bdc3c7";
}

function colorToConcrete() {
 document.getElementById("hasil-kode").style.backgroundColor = "#95a5a6";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Concrete";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#95a5a6";
}

function colorToAsbestos() {
 document.getElementById("hasil-kode").style.backgroundColor = "#7f8c8d";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Asbestos";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#7f8c8d";
}

function colorToChestnutRose() {
 document.getElementById("hasil-kode").style.backgroundColor = "#D24D57";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Chestnut Rose";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#D24D57";
}

function colorToAliceBlue() {
 document.getElementById("hasil-kode").style.backgroundColor = "#E4F1FE";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Alice Blue";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#E4F1FE";
}

function colorToSpray() {
 document.getElementById("hasil-kode").style.backgroundColor = "#81CFE0";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Spray";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#81CFE0";
}

function colorToGossip() {
 document.getElementById("hasil-kode").style.backgroundColor = "#87D37C";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Gossip";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#87D37C";
}

function colorToCreamCan() {
 document.getElementById("hasil-kode").style.backgroundColor = "#F5D76E";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "CreamCan";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#F5D76E";
}

function colorToSilverTree() {
 document.getElementById("hasil-kode").style.backgroundColor = "#68C3A3";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "SilverTree";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#68C3A3";
}

function colorToCapeHoney() {
 document.getElementById("hasil-kode").style.backgroundColor = "#FDE3A7";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "CapeHoney";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#FDE3A7";
}

function colorToMediumTurquoise() {
 document.getElementById("hasil-kode").style.backgroundColor = "#4ECDC4";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Medium Turquoise";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#4ECDC4";
}

function colorToWhiteSmoke() {
 document.getElementById("hasil-kode").style.backgroundColor = "#ECECEC";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "White Smoke";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#ECECEC";
}

function colorToLynch() {
 document.getElementById("hasil-kode").style.backgroundColor = "#6C7A89";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Lynch";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#6C7A89";
}

function colorToCrusta() {
 document.getElementById("hasil-kode").style.backgroundColor = "#F2784B";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Crusta";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#F2784B";
}

function colorToJungleGreen() {
 document.getElementById("hasil-kode").style.backgroundColor = "#26C281";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "JungleGreen";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#26C281";
}

function colorToHoki() {
 document.getElementById("hasil-kode").style.backgroundColor = "#67809F";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Hoki";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#67809F";
}

function colorToWaxFlower() {
 document.getElementById("hasil-kode").style.backgroundColor = "#F1A9A0";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "WaxFlower";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#F1A9A0";
}

function colorToObservatory() {
 document.getElementById("hasil-kode").style.backgroundColor = "#049372";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Observatory";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#049372";
}

function colorToEcstasy() {
 document.getElementById("hasil-kode").style.backgroundColor = "#F9690E";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Ecstasy";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#F9690E";
}
</script> 
Silahkan Copy Paste kode dibawah ini kemudian letakkan diatas </head>

&lt;script language=&#039;javascript&#039;&gt;
function Barva(koda)
{
document.getElementById(&quot;vzorec&quot;).bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById(&quot;vzorec2&quot;).bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
&lt;/script&gt;

&lt;script type=&#039;text/javascript&#039;&gt;

var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;

function init() {
if (typeof(ygLogger) != &quot;undefined&quot;)
ygLogger.init(document.getElementById(&quot;logDiv&quot;));
pickerInit();
//ddcolorposter.fillcolorbox(&quot;colorfield1&quot;, &quot;colorbox1&quot;) //PREFILL &quot;colorbox1&quot; with hex value from &quot;colorfield1&quot;
//ddcolorposter.fillcolorbox(&quot;colorfield2&quot;, &quot;colorbox2&quot;) //PREFILL &quot;colorbox1&quot; with hex value from &quot;colorfield1&quot;
}

// Picker ---------------------------------------------------------

function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider(&quot;hueBg&quot;, &quot;hueThumb&quot;, 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };

picker = YAHOO.widget.Slider.getSliderRegion(&quot;pickerDiv&quot;, &quot;selector&quot;, 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

hueUpdate();

dd1 = new YAHOO.util.DD(&quot;pickerPanel&quot;);
dd1.setHandleElId(&quot;pickerHandle&quot;);
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(&quot;pickerDiv&quot;).style.backgroundColor =
&quot;rgb(&quot; + a[0] + &quot;, &quot; + a[1] + &quot;, &quot; + a[2] + &quot;)&quot;;

pickerSwatchUpdate();
}

function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById(&quot;pickerhval&quot;).value = (h*2);

h = h / 180;

var s = picker.getXValue() / 180;
document.getElementById(&quot;pickersval&quot;).value = Math.round(s * 100);

var v = (180 - picker.getYValue()) / 180;
document.getElementById(&quot;pickervval&quot;).value = Math.round(v * 100);

var a = YAHOO.util.Color.hsv2rgb( h, s, v );

document.getElementById(&quot;pickerSwatch&quot;).style.backgroundColor =
&quot;rgb(&quot; + a[0] + &quot;, &quot; + a[1] + &quot;, &quot; + a[2] + &quot;)&quot;;

document.getElementById(&quot;pickerrval&quot;).value = a[0];
document.getElementById(&quot;pickergval&quot;).value = a[1];
document.getElementById(&quot;pickerbval&quot;).value = a[2];
var hexvalue = document.getElementById(&quot;pickerhexval&quot;).value =&#039;#&#039;+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!=&quot;#FFFFFF&quot;) document.getElementById(&quot;pickerhexval&quot;).select();
}

&lt;/script&gt;&lt;!--[if gte IE 5.5000]&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i&lt;document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == &quot;PNG&quot;)
{
var imgID = (img.id) ? &quot;id=&#039;&quot; + img.id + &quot;&#039; &quot; : &quot;&quot;
var imgClass = (img.className) ? &quot;class=&#039;&quot; + img.className + &quot;&#039; &quot; : &quot;&quot;
var imgTitle = (img.title) ? &quot;title=&#039;&quot; + img.title + &quot;&#039; &quot; : &quot;title=&#039;&quot; + img.alt + &quot;&#039; &quot;
var imgStyle = &quot;display:inline-block;&quot; + img.style.cssText
if (img.align == &quot;left&quot;) imgStyle = &quot;float:left;&quot; + imgStyle
if (img.align == &quot;right&quot;) imgStyle = &quot;float:right;&quot; + imgStyle
if (img.parentElement.href) imgStyle = &quot;cursor:hand;&quot; + imgStyle
var strNewHTML = &quot;&lt;span &quot; + imgID + imgClass + imgTitle
+ &quot; style=&quot;&quot; + &quot;width:&quot; + img.width + &quot;px; height:&quot; + img.height + &quot;px;&quot; + imgStyle + &quot;;&quot;
+ &quot;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader&quot;
+ &quot;(src=&#039;&quot; + img.src + &quot;&#039;, sizingMethod=&#039;scale&#039;);&quot;&gt;&lt;/span&gt;&quot;
img.outerHTML = strNewHTML
i = i-1
}
}
}

YAHOO.util.Event.addListener(window, &quot;load&quot;, correctPNG);

&lt;/script&gt;
&lt;![endif]--&gt;


Selanjutnya tambahkan kode dibawah ini pada Elemen Blog ( HTML ) :

<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" height="24" width="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></center>

Sebelum melakukan edit template, sebaiknya simpan / Back Up template terlebih dahulu dengan cara Klik tulisan "Download Template Lengkap". Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi kesalahan template dapat dikembalikan seperti semula.

Baca juga :

No comments:

Post a Comment

to Top