Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

Cara Menciptakan Color Picker Responsive Di Blog

Cara Membuat Color Picker Responsive di Blog Cara Membuat Color Picker Responsive di Blog
Bagi kita para blogger, warna merupakan kebutuhan yang cukup penting dalam mendasain atau memodifikasi blog, maka tidak heran apabila kita menjumpai beberapa template dan widget yang mempunyai warna yang beragam. Pada dasarnya corak warna di blog tidak memakai nama warna itu sendiri melainkan memakai arahan untuk mengindentifikasi warna tersebut sehingga nantinya arahan tersebut akan di aplikasikannya pada css, javascript ataupun pada html. Makara sudah terperinci apa arti keindahan tanpa ada warna yang menyertainya.

 Nah biasanya kumpulan warna itu di sebut color picker. Color picker yaitu sebuah tool atau kemudahan yang mempunyai kegunaan untuk mengetahui aneka macam jenis warna lebih cepat dan lebih mudah, dengan cara memilih warna aktif atau arahan warna yang akan digunakan. Biasanya para Blogger dan Designer sangat memerlukan Color Picker ini, hal ini bertujuan untuk menemukan Kode warna yang pas sehingga cocok apabila dipasang ke Blog mereka atau ke design yang sedang di kerjakan para Designer. Nah kali ini aku akan membagikan tutorial cara menciptakan color picker  di blog, sehingga nantinya Anda tinggal eksklusif mengeceknya diblog sendiri. Color picker ini mempunyai tampilan yang responsive, manis dan nyaman untuk dipandang. Jadi, sangat cocok apabila dipasang di blog manapun. 

Cara Membuat Color Picker Responsive di Blog 
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Halaman → lalu buat Halaman Baru
3. Setelah itu Anda pilih Mode HTML (bukan Compose)
4. Kemudian Copy kode HTML, CSS, Javascript dibawah ini dan Paste di dalam Mode HTML

 <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 arahan 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 arahan 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>
5. Kemudian beri nama judul sesuai keinginan, dan terkahir Publikasikan.
6. Agar tampilan halaman menjadi full page dan lebih keren lagi, silahkan Anda baca Cara Membuat Halaman Statis Menjadi  Full Page di Blog

[Preview##eye##]

Nah itulah cara sederhana menciptakan Color picker keren di blog, dan terima kasih juga buat arlinadzgn yang menciptakan color picker ini tambah lebih menarik lagi. Sekian dulu dari artikel kali ini, kalau ada yang ingin Anda tanyakan atau ingin menambahkan silahkan komentar dibawah ini terima kasih.

Anda mungkin menyukai postingan ini :