Cara Membuat Color Picker Di Blog

Malestea
Malestea
Cara Membuat Color Picker Di Blog
Color Picker adaalah sebuah tool untuk mengetahui berbagai jenis warna lebih cepat dan lebih mudah. Sangat cocok bagi sobat yang sering melakukan desain terutama dengan warna flat. Color picker ini memiliki tampilan yang bagus gan nyaman untuk dilihat. Jadi, sangat cocok dipasang diblog manapun.

Untuk memasang color picker ini sobat hanya perlu membuat sebuah Laman bukan Post tapi Laman agar color picker ini tidak terindex oleh mesin pencarian dan hanya akan dilihat oleh pengunjung blog sobat saja ditampilan blognya. Disini ada dua variasi Color Picker yang dapat sobat gunakan dan salah satunya sudah saya coba di alpukoding ini sob.

Cara Membuat Color Picker Di Blog


1. Buka Blogger > Buat baru di halaman statis > Kemudian tambahkan kode dibawah ini pada tab HTML post.
Versi Color Picker 1
<div class="color-widget" onclick="colorPick(event)">
<form id="alpukoding-pick">
<input id="coloredvalue" onclick="SelectAll('coloredvalue');" placeholder="Pick your color and copy" readonly="" style="color: #cccccc;" tabindex="-1" type="text" value="" /></form>
<div class="blackout">
</div>
<div class="row visible">
<button class="color" data-hex="#e51c23" data-name="Red" style="background-color: #e51c23;"></button><button class="color" data-hex="#e91e63" data-name="Pink" style="background-color: #e91e63;"></button><button class="color" data-hex="#9c27b0" data-name="Purple" style="background-color: #9c27b0;"></button><button class="color" data-hex="#673ab7" data-name="Deep Purple" style="background-color: #673ab7;"></button><button class="back" title="alpukoding.blogspot.com"><div class="icon">
</div>
</button></div>
<div class="row visible">
<button class="color" data-hex="#3f51b5" data-name="Indigo" style="background-color: #3f51b5;"></button><button class="color" data-hex="#5677fc" data-name="Blue" style="background-color: #5677fc;"></button><button class="color" data-hex="#03a9f4" data-name="Light Blue" style="background-color: #03a9f4;"></button><button class="color" data-hex="#00bcd4" data-name="Cyan" style="background-color: #00bcd4;"></button><button class="color" data-hex="#009688" data-name="Teal" style="background-color: #009688;"></button></div>
<div class="row visible">
<button class="color" data-hex="#259b24" data-name="Green" style="background-color: #259b24;"></button><button class="color" data-hex="#8bc34a" data-name="Light Green" style="background-color: #8bc34a;"></button><button class="color" data-hex="#cddc39" data-name="Lime" style="background-color: #cddc39;"></button><button class="color" data-hex="#ffeb3b" data-name="Yellow" style="background-color: #ffeb3b;"></button><button class="color" data-hex="#ffc107" data-name="Amber" style="background-color: #ffc107;"></button></div>
<div class="row visible">
<button class="color" data-hex="#ff9800" data-name="Orange" style="background-color: #ff9800;"></button><button class="color" data-hex="#ff5722" data-name="Deep Orange" style="background-color: #ff5722;"></button><button class="color" data-hex="#795548" data-name="Brown" style="background-color: #795548;"></button><button class="color" data-hex="#607d8b" data-name="Blue Grey" style="background-color: #607d8b;"></button><button class="color" data-hex="#9e9e9e" data-name="Grey" style="background-color: #9e9e9e;"></button></div>
<div class="blackout">
</div>
</div>
<style>
#alpukoding-pick{background-color:#f9f9f9;color:#ccc;margin:0;padding:0;padding-top:20px;transition:all .6s cubic-bezier(.694,.0482,.335,1)}.color-widget{background-color:#fff;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;left:0;width:100%;height:100%;padding:0;-moz-sizing:border-box;box-sizing:border-box}.row{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;opacity:0.9;
transition: all .6s cubic-bezier(.694,.0482,.335,1);}.row.visible{opacity:1;}.shades{position:relative;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;height:0;opacity:0;transition: all .6s cubic-bezier(.694,.0482,.335,1);}.shades.visible{height:50px;opacity:1;}.back,.color{-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;position:relative;margin:0;padding:0;border:none;cursor:pointer;transition:all .6s cubic-bezier(.694,.0482,.335,1)}.back:focus,.color:focus{outline:0}.back:hover:before,.color:hover:before{content:'';position:absolute;background-color:inherit;box-shadow:0 0 10px rgba(0,0,0,.2);z-index:1;top:-4px;left:-4px;right:-4px;bottom:-4px}.back:hover .icon,.color:hover .icon{z-index:1}.color.active:before,.color.active:hover:before{display:none}.back{background-color:#fff}.color.active{z-index:1}.shades{z-index:2;margin-right:.5px}.icon{font-family:arial;font-weight:700;color:#999;position:absolute;top:50%;left:50%;font-size:50px;line-height:50px;margin-left:-24px;margin-top:-25px}.blackout{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:none;transition:background-color .1s ease-in}.blackout.visible{background-color:rgba(0,0,0,.7);pointer-events:auto}input#coloredvalue{background: #f9f9f9;color:#ccc;border:none;padding:8px}input#coloredvalue:focus{border-color:none;}
#coloredvalue{cursor:pointer;top:0;left:0;right:0;bottom:0;width:100%;padding:0;margin:0;outline:0;border:0;box-pack:center;box-align:center;-ms-flex-pack:center;-ms-flex-align:center;-moz-box-pack:center;-moz-box-align:center;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;font-family:Tahoma,sans-serif;font-size:300%;color:#ccc;font-weight:700;text-align:center}
#header-wrapper , #opt-in , #sidebar-wrapper , #comments , .toggleMenu, .nubies-footer, .back-totop{display:none}
</style> <script type="text/javascript">
//<![CDATA[
var _0x236c=["\x64\x61\x74\x61\x2D\x68\x65\x78","\x67\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x74\x61\x72\x67\x65\x74","\x76\x61\x6C\x75\x65","\x63\x6F\x6C\x6F\x72\x65\x64\x76\x61\x6C\x75\x65","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x72\x65\x6D\x6F\x76\x65","\x76\x69\x73\x69\x62\x6C\x65","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x61\x63\x74\x69\x76\x65","\x2E\x63\x6F\x6C\x6F\x72\x2E\x61\x63\x74\x69\x76\x65","\x66\x69\x6E\x64","\x2E\x63\x6F\x6C\x6F\x72\x2D\x77\x69\x64\x67\x65\x74","\x2E\x62\x6C\x61\x63\x6B\x6F\x75\x74","\x2E\x73\x68\x61\x64\x65\x73","\x6E\x61\x6D\x65","\x64\x61\x74\x61","\x2E\x72\x6F\x77","\x70\x61\x72\x65\x6E\x74\x73","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x61\x64\x65\x73\x22\x3E\x0A\x3C\x2F\x64\x69\x76\x3E\x0A","\x6C\x65\x6E\x67\x74\x68","\x61\x70\x70\x65\x6E\x64","\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x2D\x63\x6F\x6C\x6F\x72","\x63\x73\x73","\x61\x74\x74\x72","\x3C\x62\x75\x74\x74\x6F\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6F\x6C\x6F\x72\x22\x3E\x3C\x2F\x62\x75\x74\x74\x6F\x6E\x3E","\x61\x64\x64\x43\x6C\x61\x73\x73","\x62\x65\x66\x6F\x72\x65","\x6B\x65\x79\x73","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x6F\x77\x20\x76\x69\x73\x69\x62\x6C\x65\x22\x3E\x0A\x3C\x2F\x64\x69\x76\x3E\x0A","\x64\x61\x74\x61\x2D\x6E\x61\x6D\x65","\x3C\x62\x75\x74\x74\x6F\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x61\x63\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x61\x72\x6C\x69\x6E\x61\x64\x65\x73\x69\x67\x6E\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x22\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x69\x63\x6F\x6E\x22\x3E\x3C\x2F\x64\x69\x76\x3E\x0A\x3C\x2F\x62\x75\x74\x74\x6F\x6E\x3E","\x68\x61\x73\x43\x6C\x61\x73\x73","\x73\x74\x6F\x70\x50\x72\x6F\x70\x61\x67\x61\x74\x69\x6F\x6E","\x63\x75\x72\x72\x65\x6E\x74\x54\x61\x72\x67\x65\x74","\x63\x6C\x69\x63\x6B","\x2E\x63\x6F\x6C\x6F\x72","\x2E\x62\x61\x63\x6B","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x6C\x61\x63\x6B\x6F\x75\x74\x22\x3E\x0A\x3C\x2F\x64\x69\x76\x3E\x0A","\x23\x66\x64\x65\x30\x64\x63","\x23\x66\x39\x62\x64\x62\x62","\x23\x66\x36\x39\x39\x38\x38","\x23\x66\x33\x36\x63\x36\x30","\x23\x65\x38\x34\x65\x34\x30","\x23\x65\x35\x31\x63\x32\x33","\x23\x64\x64\x31\x39\x31\x64","\x23\x64\x30\x31\x37\x31\x36","\x23\x63\x34\x31\x34\x31\x31","\x23\x62\x30\x31\x32\x30\x61","\x23\x66\x66\x37\x39\x39\x37","\x23\x66\x66\x35\x31\x37\x37","\x23\x66\x66\x32\x64\x36\x66","\x23\x65\x30\x30\x30\x33\x32","\x23\x66\x63\x65\x34\x65\x63","\x23\x66\x38\x62\x62\x64\x30","\x23\x66\x34\x38\x66\x62\x31","\x23\x66\x30\x36\x32\x39\x32","\x23\x65\x63\x34\x30\x37\x61","\x23\x65\x39\x31\x65\x36\x33","\x23\x64\x38\x31\x62\x36\x30","\x23\x63\x32\x31\x38\x35\x62","\x23\x61\x64\x31\x34\x35\x37","\x23\x38\x38\x30\x65\x34\x66","\x23\x66\x66\x38\x30\x61\x62","\x23\x66\x66\x34\x30\x38\x31","\x23\x66\x35\x30\x30\x35\x37","\x23\x63\x35\x31\x31\x36\x32","\x23\x66\x33\x65\x35\x66\x35","\x23\x65\x31\x62\x65\x65\x37","\x23\x63\x65\x39\x33\x64\x38","\x23\x62\x61\x36\x38\x63\x38","\x23\x61\x62\x34\x37\x62\x63","\x23\x39\x63\x32\x37\x62\x30","\x23\x38\x65\x32\x34\x61\x61","\x23\x37\x62\x31\x66\x61\x32","\x23\x36\x61\x31\x62\x39\x61","\x23\x34\x61\x31\x34\x38\x63","\x23\x65\x61\x38\x30\x66\x63","\x23\x65\x30\x34\x30\x66\x62","\x23\x64\x35\x30\x30\x66\x39","\x23\x61\x61\x30\x30\x66\x66","\x23\x65\x64\x65\x37\x66\x36","\x23\x64\x31\x63\x34\x65\x39","\x23\x62\x33\x39\x64\x64\x62","\x23\x39\x35\x37\x35\x63\x64","\x23\x37\x65\x35\x37\x63\x32","\x23\x36\x37\x33\x61\x62\x37","\x23\x35\x65\x33\x35\x62\x31","\x23\x35\x31\x32\x64\x61\x38","\x23\x34\x35\x32\x37\x61\x30","\x23\x33\x31\x31\x62\x39\x32","\x23\x62\x33\x38\x38\x66\x66","\x23\x37\x63\x34\x64\x66\x66","\x23\x36\x35\x31\x66\x66\x66","\x23\x36\x32\x30\x30\x65\x61","\x23\x65\x38\x65\x61\x66\x36","\x23\x63\x35\x63\x61\x65\x39","\x23\x39\x66\x61\x38\x64\x61","\x23\x37\x39\x38\x36\x63\x62","\x23\x35\x63\x36\x62\x63\x30","\x23\x33\x66\x35\x31\x62\x35","\x23\x33\x39\x34\x39\x61\x62","\x23\x33\x30\x33\x66\x39\x66","\x23\x32\x38\x33\x35\x39\x33","\x23\x31\x61\x32\x33\x37\x65","\x23\x38\x63\x39\x65\x66\x66","\x23\x35\x33\x36\x64\x66\x65","\x23\x33\x64\x35\x61\x66\x65","\x23\x33\x30\x34\x66\x66\x65","\x23\x65\x37\x65\x39\x66\x64","\x23\x64\x30\x64\x39\x66\x66","\x23\x61\x66\x62\x66\x66\x66","\x23\x39\x31\x61\x37\x66\x66","\x23\x37\x33\x38\x66\x66\x65","\x23\x35\x36\x37\x37\x66\x63","\x23\x34\x65\x36\x63\x65\x66","\x23\x34\x35\x35\x65\x64\x65","\x23\x33\x62\x35\x30\x63\x65","\x23\x32\x61\x33\x36\x62\x31","\x23\x61\x36\x62\x61\x66\x66","\x23\x36\x38\x38\x39\x66\x66","\x23\x34\x64\x37\x33\x66\x66","\x23\x34\x64\x36\x39\x66\x66","\x23\x65\x31\x66\x35\x66\x65","\x23\x62\x33\x65\x35\x66\x63","\x23\x38\x31\x64\x34\x66\x61","\x23\x34\x66\x63\x33\x66\x37","\x23\x32\x39\x62\x36\x66\x36","\x23\x30\x33\x61\x39\x66\x34","\x23\x30\x33\x39\x62\x65\x35","\x23\x30\x32\x38\x38\x64\x31","\x23\x30\x32\x37\x37\x62\x64","\x23\x30\x31\x35\x37\x39\x62","\x23\x38\x30\x64\x38\x66\x66","\x23\x34\x30\x63\x34\x66\x66","\x23\x30\x30\x62\x30\x66\x66","\x23\x30\x30\x39\x31\x65\x61","\x23\x65\x30\x66\x37\x66\x61","\x23\x62\x32\x65\x62\x66\x32","\x23\x38\x30\x64\x65\x65\x61","\x23\x34\x64\x64\x30\x65\x31","\x23\x32\x36\x63\x36\x64\x61","\x23\x30\x30\x62\x63\x64\x34","\x23\x30\x30\x61\x63\x63\x31","\x23\x30\x30\x39\x37\x61\x37","\x23\x30\x30\x38\x33\x38\x66","\x23\x30\x30\x36\x30\x36\x34","\x23\x38\x34\x66\x66\x66\x66","\x23\x31\x38\x66\x66\x66\x66","\x23\x30\x30\x65\x35\x66\x66","\x23\x30\x30\x62\x38\x64\x34","\x23\x65\x30\x66\x32\x66\x31","\x23\x62\x32\x64\x66\x64\x62","\x23\x38\x30\x63\x62\x63\x34","\x23\x34\x64\x62\x36\x61\x63","\x23\x32\x36\x61\x36\x39\x61","\x23\x30\x30\x39\x36\x38\x38","\x23\x30\x30\x38\x39\x37\x62","\x23\x30\x30\x37\x39\x36\x62","\x23\x30\x30\x36\x39\x35\x63","\x23\x30\x30\x34\x64\x34\x30","\x23\x61\x37\x66\x66\x65\x62","\x23\x36\x34\x66\x66\x64\x61","\x23\x31\x64\x65\x39\x62\x36","\x23\x30\x30\x62\x66\x61\x35","\x23\x64\x30\x66\x38\x63\x65","\x23\x61\x33\x65\x39\x61\x34","\x23\x37\x32\x64\x35\x37\x32","\x23\x34\x32\x62\x64\x34\x31","\x23\x32\x62\x61\x66\x32\x62","\x23\x32\x35\x39\x62\x32\x34","\x23\x30\x61\x38\x66\x30\x38","\x23\x30\x61\x37\x65\x30\x37","\x23\x30\x35\x36\x66\x30\x30","\x23\x30\x64\x35\x33\x30\x32","\x23\x61\x32\x66\x37\x38\x64","\x23\x35\x61\x66\x31\x35\x38","\x23\x31\x34\x65\x37\x31\x35","\x23\x31\x32\x63\x37\x30\x30","\x23\x66\x31\x66\x38\x65\x39","\x23\x64\x63\x65\x64\x63\x38","\x23\x63\x35\x65\x31\x61\x35","\x23\x61\x65\x64\x35\x38\x31","\x23\x39\x63\x63\x63\x36\x35","\x23\x38\x62\x63\x33\x34\x61","\x23\x37\x63\x62\x33\x34\x32","\x23\x36\x38\x39\x66\x33\x38","\x23\x35\x35\x38\x62\x32\x66","\x23\x33\x33\x36\x39\x31\x65","\x23\x63\x63\x66\x66\x39\x30","\x23\x62\x32\x66\x66\x35\x39","\x23\x37\x36\x66\x66\x30\x33","\x23\x36\x34\x64\x64\x31\x37","\x23\x66\x39\x66\x62\x65\x37","\x23\x66\x30\x66\x34\x63\x33","\x23\x65\x36\x65\x65\x39\x63","\x23\x64\x63\x65\x37\x37\x35","\x23\x64\x34\x65\x31\x35\x37","\x23\x63\x64\x64\x63\x33\x39","\x23\x63\x30\x63\x61\x33\x33","\x23\x61\x66\x62\x34\x32\x62","\x23\x39\x65\x39\x64\x32\x34","\x23\x38\x32\x37\x37\x31\x37","\x23\x66\x34\x66\x66\x38\x31","\x23\x65\x65\x66\x66\x34\x31","\x23\x63\x36\x66\x66\x30\x30","\x23\x61\x65\x65\x61\x30\x30","\x23\x66\x66\x66\x64\x65\x37","\x23\x66\x66\x66\x39\x63\x34","\x23\x66\x66\x66\x35\x39\x64","\x23\x66\x66\x66\x31\x37\x36","\x23\x66\x66\x65\x65\x35\x38","\x23\x66\x66\x65\x62\x33\x62","\x23\x66\x64\x64\x38\x33\x35","\x23\x66\x62\x63\x30\x32\x64","\x23\x66\x39\x61\x38\x32\x35","\x23\x66\x35\x37\x66\x31\x37","\x23\x66\x66\x66\x66\x38\x64","\x23\x66\x66\x66\x66\x30\x30","\x23\x66\x66\x65\x61\x30\x30","\x23\x66\x66\x64\x36\x30\x30","\x23\x66\x66\x66\x38\x65\x31","\x23\x66\x66\x65\x63\x62\x33","\x23\x66\x66\x65\x30\x38\x32","\x23\x66\x66\x64\x35\x34\x66","\x23\x66\x66\x63\x61\x32\x38","\x23\x66\x66\x63\x31\x30\x37","\x23\x66\x66\x62\x33\x30\x30","\x23\x66\x66\x61\x30\x30\x30","\x23\x66\x66\x38\x66\x30\x30","\x23\x66\x66\x36\x66\x30\x30","\x23\x66\x66\x65\x35\x37\x66","\x23\x66\x66\x64\x37\x34\x30","\x23\x66\x66\x63\x34\x30\x30","\x23\x66\x66\x61\x62\x30\x30","\x23\x66\x66\x66\x33\x65\x30","\x23\x66\x66\x65\x30\x62\x32","\x23\x66\x66\x63\x63\x38\x30","\x23\x66\x66\x62\x37\x34\x64","\x23\x66\x66\x61\x37\x32\x36","\x23\x66\x66\x39\x38\x30\x30","\x23\x66\x62\x38\x63\x30\x30","\x23\x66\x35\x37\x63\x30\x30","\x23\x65\x66\x36\x63\x30\x30","\x23\x65\x36\x35\x31\x30\x30","\x23\x66\x66\x64\x31\x38\x30","\x23\x66\x66\x61\x62\x34\x30","\x23\x66\x66\x39\x31\x30\x30","\x23\x66\x66\x36\x64\x30\x30","\x23\x66\x62\x65\x39\x65\x37","\x23\x66\x66\x63\x63\x62\x63","\x23\x66\x66\x61\x62\x39\x31","\x23\x66\x66\x38\x61\x36\x35","\x23\x66\x66\x37\x30\x34\x33","\x23\x66\x66\x35\x37\x32\x32","\x23\x66\x34\x35\x31\x31\x65","\x23\x65\x36\x34\x61\x31\x39","\x23\x64\x38\x34\x33\x31\x35","\x23\x62\x66\x33\x36\x30\x63","\x23\x66\x66\x39\x65\x38\x30","\x23\x66\x66\x36\x65\x34\x30","\x23\x66\x66\x33\x64\x30\x30","\x23\x64\x64\x32\x63\x30\x30","\x23\x65\x66\x65\x62\x65\x39","\x23\x64\x37\x63\x63\x63\x38","\x23\x62\x63\x61\x61\x61\x34","\x23\x61\x31\x38\x38\x37\x66","\x23\x38\x64\x36\x65\x36\x33","\x23\x37\x39\x35\x35\x34\x38","\x23\x36\x64\x34\x63\x34\x31","\x23\x35\x64\x34\x30\x33\x37","\x23\x34\x65\x33\x34\x32\x65","\x23\x33\x65\x32\x37\x32\x33","\x23\x65\x63\x65\x66\x66\x31","\x23\x63\x66\x64\x38\x64\x63","\x23\x62\x30\x62\x65\x63\x35","\x23\x39\x30\x61\x34\x61\x65","\x23\x37\x38\x39\x30\x39\x63","\x23\x36\x30\x37\x64\x38\x62","\x23\x35\x34\x36\x65\x37\x61","\x23\x34\x35\x35\x61\x36\x34","\x23\x33\x37\x34\x37\x34\x66","\x23\x32\x36\x33\x32\x33\x38","\x23\x66\x61\x66\x61\x66\x61","\x23\x66\x35\x66\x35\x66\x35","\x23\x65\x65\x65\x65\x65\x65","\x23\x65\x30\x65\x30\x65\x30","\x23\x62\x64\x62\x64\x62\x64","\x23\x39\x65\x39\x65\x39\x65","\x23\x37\x35\x37\x35\x37\x35","\x23\x36\x31\x36\x31\x36\x31","\x23\x34\x32\x34\x32\x34\x32","\x23\x32\x31\x32\x31\x32\x31","\x23\x30\x30\x30\x30\x30\x30","\x23\x66\x66\x66\x66\x66\x66"];function colorPick(_0xd4aax2){var _0xd4aax3=_0xd4aax2[_0x236c[2]][_0x236c[1]](_0x236c[0]);return document[_0x236c[5]](_0x236c[4])[_0x236c[3]]=_0xd4aax3,cancelColor();}var activateColor,buildWidget,cancelColor,colors;colors=null,cancelColor=function(){var _0xd4aax2,_0xd4aax3,_0xd4aax8;return _0xd4aax8=$(_0x236c[12]),_0xd4aax2=_0xd4aax8[_0x236c[11]](_0x236c[13]),_0xd4aax8[_0x236c[11]](_0x236c[10])[_0x236c[8]](_0x236c[9]),_0xd4aax3=_0xd4aax8[_0x236c[11]](_0x236c[14]),_0xd4aax3[_0x236c[8]](_0x236c[7]),_0xd4aax2[_0x236c[8]](_0x236c[7]),setTimeout(function(){return _0xd4aax3[_0x236c[6]]()},1e3);},activateColor=function(_0xd4aax2){var _0xd4aax3,_0xd4aax8,_0xd4aax9,_0xd4aaxa,_0xd4aaxb,_0xd4aaxc,_0xd4aaxd,_0xd4aaxe,_0xd4aaxf,_0xd4aax10;for(cancelColor(),_0xd4aaxb=$(_0x236c[12]),_0xd4aax3=_0xd4aaxb[_0x236c[11]](_0x236c[13]),_0xd4aaxd=_0xd4aax2[_0x236c[16]](_0x236c[15]),_0xd4aax9=_0xd4aax2[_0x236c[18]](_0x236c[17]),_0xd4aaxa=$(_0x236c[19]),_0xd4aax10=colors[_0xd4aaxd],_0xd4aaxe=0,_0xd4aaxf=_0xd4aax10[_0x236c[20]];_0xd4aaxf>_0xd4aaxe;_0xd4aaxe++){_0xd4aaxc=_0xd4aax10[_0xd4aaxe],_0xd4aax8=$(_0x236c[25]),_0xd4aax8[_0x236c[24]](_0x236c[0],_0xd4aaxc),_0xd4aax8[_0x236c[23]](_0x236c[22],_0xd4aaxc),_0xd4aaxa[_0x236c[21]](_0xd4aax8)};return _0xd4aax9[_0x236c[27]](_0xd4aaxa),_0xd4aax2[_0x236c[26]](_0x236c[9]),_0xd4aax3[_0x236c[26]](_0x236c[7]),setTimeout(function(){return _0xd4aaxa[_0x236c[26]](_0x236c[7])},0);},buildWidget=function(){var _0xd4aax2,_0xd4aax3,_0xd4aax8,_0xd4aax9,_0xd4aaxa,_0xd4aaxb,_0xd4aaxc,_0xd4aaxd,_0xd4aaxe,_0xd4aaxf,_0xd4aax10,_0xd4aax11,_0xd4aax12,_0xd4aax13,_0xd4aax14,_0xd4aax15,_0xd4aax16;for(_0xd4aaxa=$(_0x236c[12]),_0xd4aax10=Object[_0x236c[28]](colors),_0xd4aax13=[],_0xd4aaxd=_0xd4aax14=0;3>=_0xd4aax14;_0xd4aaxd= ++_0xd4aax14){_0xd4aax9=$(_0x236c[29]),_0xd4aaxa[_0x236c[21]](_0xd4aax9),_0xd4aax13[_0xd4aaxd]=_0xd4aax9};for(_0xd4aaxb= -1,_0xd4aax12=0,_0xd4aax11=function(){return _0xd4aaxb+=1,5===_0xd4aaxb&&(_0xd4aax12+=1,_0xd4aaxb=0),_0xd4aax12},_0xd4aaxe=_0xd4aax15=0,_0xd4aax16=_0xd4aax10[_0x236c[20]];_0xd4aax16>_0xd4aax15;_0xd4aaxe= ++_0xd4aax15){_0xd4aaxf=_0xd4aax10[_0xd4aaxe],4===_0xd4aaxe&&(_0xd4aax2=$(_0x236c[31]),_0xd4aax13[_0xd4aax11()][_0x236c[21]](_0xd4aax2)),_0xd4aax8=$(_0x236c[25]),_0xd4aaxc=colors[_0xd4aaxf][5],_0xd4aax8[_0x236c[24]](_0x236c[30],_0xd4aaxf),_0xd4aax8[_0x236c[24]](_0x236c[0],_0xd4aaxc),_0xd4aax8[_0x236c[23]](_0x236c[22],_0xd4aaxc),_0xd4aax13[_0xd4aax11()][_0x236c[21]](_0xd4aax8)};return _0xd4aax3=$(_0x236c[38]),_0xd4aaxa[_0x236c[21]](_0xd4aax3),_0xd4aaxa[_0x236c[11]](_0x236c[13])[_0x236c[35]](function(_0xd4aax2){return _0xd4aax2[_0x236c[33]](),cancelColor()}),_0xd4aaxa[_0x236c[11]](_0x236c[37])[_0x236c[35]](function(_0xd4aax2){return _0xd4aax2[_0x236c[33]]()}),_0xd4aaxa[_0x236c[11]](_0x236c[36])[_0x236c[35]](function(_0xd4aax2){var _0xd4aax3;return _0xd4aax2[_0x236c[33]](),_0xd4aax3=$(_0xd4aax2[_0x236c[34]]),_0xd4aax3[_0x236c[32]](_0x236c[9])?cancelColor():activateColor(_0xd4aax3);});},colors={Red:[_0x236c[39],_0x236c[40],_0x236c[41],_0x236c[42],_0x236c[43],_0x236c[44],_0x236c[45],_0x236c[46],_0x236c[47],_0x236c[48],_0x236c[49],_0x236c[50],_0x236c[51],_0x236c[52]],Pink:[_0x236c[53],_0x236c[54],_0x236c[55],_0x236c[56],_0x236c[57],_0x236c[58],_0x236c[59],_0x236c[60],_0x236c[61],_0x236c[62],_0x236c[63],_0x236c[64],_0x236c[65],_0x236c[66]],Purple:[_0x236c[67],_0x236c[68],_0x236c[69],_0x236c[70],_0x236c[71],_0x236c[72],_0x236c[73],_0x236c[74],_0x236c[75],_0x236c[76],_0x236c[77],_0x236c[78],_0x236c[79],_0x236c[80]],"\x44\x65\x65\x70\x20\x50\x75\x72\x70\x6C\x65":[_0x236c[81],_0x236c[82],_0x236c[83],_0x236c[84],_0x236c[85],_0x236c[86],_0x236c[87],_0x236c[88],_0x236c[89],_0x236c[90],_0x236c[91],_0x236c[92],_0x236c[93],_0x236c[94]],Indigo:[_0x236c[95],_0x236c[96],_0x236c[97],_0x236c[98],_0x236c[99],_0x236c[100],_0x236c[101],_0x236c[102],_0x236c[103],_0x236c[104],_0x236c[105],_0x236c[106],_0x236c[107],_0x236c[108]],Blue:[_0x236c[109],_0x236c[110],_0x236c[111],_0x236c[112],_0x236c[113],_0x236c[114],_0x236c[115],_0x236c[116],_0x236c[117],_0x236c[118],_0x236c[119],_0x236c[120],_0x236c[121],_0x236c[122]],"\x4C\x69\x67\x68\x74\x20\x42\x6C\x75\x65":[_0x236c[123],_0x236c[124],_0x236c[125],_0x236c[126],_0x236c[127],_0x236c[128],_0x236c[129],_0x236c[130],_0x236c[131],_0x236c[132],_0x236c[133],_0x236c[134],_0x236c[135],_0x236c[136]],Cyan:[_0x236c[137],_0x236c[138],_0x236c[139],_0x236c[140],_0x236c[141],_0x236c[142],_0x236c[143],_0x236c[144],_0x236c[145],_0x236c[146],_0x236c[147],_0x236c[148],_0x236c[149],_0x236c[150]],Teal:[_0x236c[151],_0x236c[152],_0x236c[153],_0x236c[154],_0x236c[155],_0x236c[156],_0x236c[157],_0x236c[158],_0x236c[159],_0x236c[160],_0x236c[161],_0x236c[162],_0x236c[163],_0x236c[164]],Green:[_0x236c[165],_0x236c[166],_0x236c[167],_0x236c[168],_0x236c[169],_0x236c[170],_0x236c[171],_0x236c[172],_0x236c[173],_0x236c[174],_0x236c[175],_0x236c[176],_0x236c[177],_0x236c[178]],"\x4C\x69\x67\x68\x74\x20\x47\x72\x65\x65\x6E":[_0x236c[179],_0x236c[180],_0x236c[181],_0x236c[182],_0x236c[183],_0x236c[184],_0x236c[185],_0x236c[186],_0x236c[187],_0x236c[188],_0x236c[189],_0x236c[190],_0x236c[191],_0x236c[192]],Lime:[_0x236c[193],_0x236c[194],_0x236c[195],_0x236c[196],_0x236c[197],_0x236c[198],_0x236c[199],_0x236c[200],_0x236c[201],_0x236c[202],_0x236c[203],_0x236c[204],_0x236c[205],_0x236c[206]],Yellow:[_0x236c[207],_0x236c[208],_0x236c[209],_0x236c[210],_0x236c[211],_0x236c[212],_0x236c[213],_0x236c[214],_0x236c[215],_0x236c[216],_0x236c[217],_0x236c[218],_0x236c[219],_0x236c[220]],Amber:[_0x236c[221],_0x236c[222],_0x236c[223],_0x236c[224],_0x236c[225],_0x236c[226],_0x236c[227],_0x236c[228],_0x236c[229],_0x236c[230],_0x236c[231],_0x236c[232],_0x236c[233],_0x236c[234]],Orange:[_0x236c[235],_0x236c[236],_0x236c[237],_0x236c[238],_0x236c[239],_0x236c[240],_0x236c[241],_0x236c[242],_0x236c[243],_0x236c[244],_0x236c[245],_0x236c[246],_0x236c[247],_0x236c[248]],"\x44\x65\x65\x70\x20\x4F\x72\x61\x6E\x67\x65":[_0x236c[249],_0x236c[250],_0x236c[251],_0x236c[252],_0x236c[253],_0x236c[254],_0x236c[255],_0x236c[256],_0x236c[257],_0x236c[258],_0x236c[259],_0x236c[260],_0x236c[261],_0x236c[262]],Brown:[_0x236c[263],_0x236c[264],_0x236c[265],_0x236c[266],_0x236c[267],_0x236c[268],_0x236c[269],_0x236c[270],_0x236c[271],_0x236c[272]],"\x42\x6C\x75\x65\x20\x47\x72\x65\x79":[_0x236c[273],_0x236c[274],_0x236c[275],_0x236c[276],_0x236c[277],_0x236c[278],_0x236c[279],_0x236c[280],_0x236c[281],_0x236c[282]],Grey:[_0x236c[283],_0x236c[284],_0x236c[285],_0x236c[286],_0x236c[287],_0x236c[288],_0x236c[289],_0x236c[290],_0x236c[291],_0x236c[292],_0x236c[293],_0x236c[294]]},$(function(){return buildWidget()});
//]]>
</script> <script type="text/javascript">
$('<input type="text" id="coloredvalue" value="">').appendTo('body');
$('body').on('click',function(){ $('#coloredvalue').select(); });

//
$('input').click(function(e) {
$(this).focus().select();
$(this).keypress(function(e){
e.preventDefault();
})

});
</script>
Versi Color Picker 2
<div id=flatualpukoding><ul class=flatui><li style=background:#5c97bf><span class=kodebesar><span class=kodekecil>Kode Warna</span> #5C97BF</span><li style=background:#4b77be><span class=kodebesar><span class=kodekecil>Kode Warna</span> #4B77BE</span><li style=background:#1f3a93><span class=kodebesar><span class=kodekecil>Kode Warna</span> #1F3A93</span><li style=background:#2574a9><span class=kodebesar><span class=kodekecil>Kode Warna</span> #2574A9</span><li style=background:#67809f><span class=kodebesar><span class=kodekecil>Kode Warna</span> #67809F</span><li style=background:#34495e><span class=kodebesar><span class=kodekecil>Kode Warna</span> #34495E</span><li style=background:#3a539b><span class=kodebesar><span class=kodekecil>Kode Warna</span> #3A539B</span><li style=background:#1e8bc3><span class=kodebesar><span class=kodekecil>Kode Warna</span> #1E8BC3</span><li style=background:#6bb9f0><span class=kodebesar><span class=kodekecil>Kode Warna</span> #6BB9F0</span><li style=background:#22313f><span class=kodebesar><span class=kodekecil>Kode Warna</span> #22313F</span><li style=background:#336e7b><span class=kodebesar><span class=kodekecil>Kode Warna</span> #336E7B</span><li style=background:#19b5fe><span class=kodebesar><span class=kodekecil>Kode Warna</span> #19B5FE</span><li style=background:#89c4f4><span class=kodebesar><span class=kodekecil>Kode Warna</span> #89C4F4</span><li style=background:#2c3e50><span class=kodebesar><span class=kodekecil>Kode Warna</span> #2C3E50</span><li style=background:#3498db><span class=kodebesar><span class=kodekecil>Kode Warna</span> #3498DB</span><li style=background:#22a7f0><span class=kodebesar><span class=kodekecil>Kode Warna</span> #22A7F0</span><li style=background:#94e0ee><span class=kodebesar><span class=kodekecil>Kode Warna</span> #94E0EE</span><li style=background:#52b3d9><span class=kodebesar><span class=kodekecil>Kode Warna</span> #52B3D9</span><li style=background:#59abe3><span class=kodebesar><span class=kodekecil>Kode Warna</span> #59ABE3</span><li style=background:#26a65b><span class=kodebesar><span class=kodekecil>Kode Warna</span> #26A65B</span><li style=background:#1e824c><span class=kodebesar><span class=kodekecil>Kode Warna</span> #1E824C</span><li style=background:#00b16a><span class=kodebesar><span class=kodekecil>Kode Warna</span> #00B16A</span><li style=background:#2abb9b><span class=kodebesar><span class=kodekecil>Kode Warna</span> #2ABB9B</span><li style=background:#4daf7c><span class=kodebesar><span class=kodekecil>Kode Warna</span> #4DAF7C</span><li style=background:#03a678><span class=kodebesar><span class=kodekecil>Kode Warna</span> #03A678</span><li style=background:#26c281><span class=kodebesar><span class=kodekecil>Kode Warna</span> #26C281</span><li style=background:#019875><span class=kodebesar><span class=kodekecil>Kode Warna</span> #019875</span><li style=background:#3fc380><span class=kodebesar><span class=kodekecil>Kode Warna</span> #3FC380</span><li style=background:#16a085><span class=kodebesar><span class=kodekecil>Kode Warna</span> #16A085</span><li style=background:#2ecc71><span class=kodebesar><span class=kodekecil>Kode Warna</span> #2ECC71</span><li style=background:#c5eff7><span class=kodebesar><span class=kodekecil>Kode Warna</span> #C5EFF7</span><li style=background:#c8f7c5><span class=kodebesar><span class=kodekecil>Kode Warna</span> #C8F7C5</span><li style=background:#049372><span class=kodebesar><span class=kodekecil>Kode Warna</span> #049372</span><li style=background:#36d7b7><span class=kodebesar><span class=kodekecil>Kode Warna</span> #36D7B7</span><li style=background:#6c9><span class=kodebesar><span class=kodekecil>Kode Warna</span> #66CC99</span><li style=background:#1ba39c><span class=kodebesar><span class=kodekecil>Kode Warna</span> #1BA39C</span><li style=background:#1bbc9b><span class=kodebesar><span class=kodekecil>Kode Warna</span> #1BBC9B</span><li style=background:#65c6bb><span class=kodebesar><span class=kodekecil>Kode Warna</span> #65C6BB</span><li style=background:#bfbfbf><span class=kodebesar><span class=kodekecil>Kode Warna</span> #BFBFBF</span><li style=background:#abb7b7><span class=kodebesar><span class=kodekecil>Kode Warna</span> #ABB7B7</span><li style=background:#dadfe1><span class=kodebesar><span class=kodekecil>Kode Warna</span> #DADFE1</span><li style=background:#95a5a6><span class=kodebesar><span class=kodekecil>Kode Warna</span> #95A5A6</span><li style=background:#c5dce2><span class=kodebesar><span class=kodekecil>Kode Warna</span> #C5DCE2</span><li style=background:#bdc3c7><span class=kodebesar><span class=kodekecil>Kode Warna</span> #BDC3C7</span><li style=background:#eee><span class=kodebesar><span class=kodekecil>Kode Warna</span> #EEEEEE</span><li style=background:#d2d7d3><span class=kodebesar><span class=kodekecil>Kode Warna</span> #D2D7D3</span><li style=background:#f0e2c5><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F0E2C5</span><li style=background:#eb9532><span class=kodebesar><span class=kodekecil>Kode Warna</span> #EB9532</span><li style=background:#e67e22><span class=kodebesar><span class=kodekecil>Kode Warna</span> #E67E22</span><li style=background:#f27935><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F27935</span><li style=background:#f9bf3b><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F9BF3B</span><li style=background:#f7ca18><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F7CA18</span><li style=background:#f9690e><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F9690E</span><li style=background:#f39c12><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F39C12</span><li style=background:#d35400><span class=kodebesar><span class=kodekecil>Kode Warna</span> #D35400</span><li style=background:#f4d03f><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F4D03F</span><li style=background:#f5ab35><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F5AB35</span><li style=background:#eb974e><span class=kodebesar><span class=kodekecil>Kode Warna</span> #EB974E</span><li style=background:#f2784b><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F2784B</span><li style=background:#f4b350><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F4B350</span><li style=background:#e87e04><span class=kodebesar><span class=kodekecil>Kode Warna</span> #E87E04</span><li style=background:#e74c3c><span class=kodebesar><span class=kodekecil>Kode Warna</span> #E74C3C</span><li style=background:#cf000f><span class=kodebesar><span class=kodekecil>Kode Warna</span> #CF000F</span><li style=background:#c0392b><span class=kodebesar><span class=kodekecil>Kode Warna</span> #C0392B</span><li style=background:#d64541><span class=kodebesar><span class=kodekecil>Kode Warna</span> #D64541</span><li style=background:#ef4836><span class=kodebesar><span class=kodekecil>Kode Warna</span> #EF4836</span><li style=background:#96281b><span class=kodebesar><span class=kodekecil>Kode Warna</span> #96281B</span><li style=background:#d91e18><span class=kodebesar><span class=kodekecil>Kode Warna</span> #D91E18</span><li style=background:#e26a6a><span class=kodebesar><span class=kodekecil>Kode Warna</span> #E26A6A</span><li style=background:red><span class=kodebesar><span class=kodekecil>Kode Warna</span> #FF0000</span><li style=background:#f22613><span class=kodebesar><span class=kodekecil>Kode Warna</span> #F22613</span><li style=background:#e08283><span class=kodebesar><span class=kodekecil>Kode Warna</span> #E08283</span><li style=background:#9b59b6><span class=kodebesar><span class=kodekecil>Kode Warna</span> #9B59B6</span><li style=background:#8e44ad><span class=kodebesar><span class=kodekecil>Kode Warna</span> #8E44AD</span><li style=background:#be90d4><span class=kodebesar><span class=kodekecil>Kode Warna</span> #BE90D4</span><li style=background:#bf55ec><span class=kodebesar><span class=kodekecil>Kode Warna</span> #BF55EC</span><li style=background:#9a12b3><span class=kodebesar><span class=kodekecil>Kode Warna</span> #9A12B3</span><li style=background:#913d88><span class=kodebesar><span class=kodekecil>Kode Warna</span> #913D88</span><li style=background:#722d6a><span class=kodebesar><span class=kodekecil>Kode Warna</span> #722D6A</span><li style=background:#740a4e><span class=kodebesar><span class=kodekecil>Kode Warna</span> #740A4E</span></ul></div>
<style scoped="" type="text/css">
#flatualpukoding ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0;}#flatualpukoding 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);}#flatualpukoding ul.flatui li:hover{z-index:4;}#flatualpukoding 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);}#flatualpukoding ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0);}#flatualpukoding 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;}#flatualpukoding ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s;}#flatualpukoding ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3;}#flatualpukoding 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){#flatualpukoding ul.flatui li{width:33.3%;line-height:normal;}}@media screen and (max-width:640px){#flatualpukoding ul.flatui li{width:50%;}}@media screen and (max-width:480px){#flatualpukoding ul.flatui li{width:100%;}}
</style>
2. Setelah terpasang kemudian publikasikan post dan lihat hasilnya atau bisa dengan pratinjau bila ingin melihatnya dulu.

Untuk melihat demo tampilannya, silakan buka link dibawah ini.



Gimana sob, tampilannya bagus dan nyaman tentunya dimata ngak bakalan pedih tentu saja ini juga dapat mempermudah pengunjung bila ingin tahu berbagai warna colo picker. Mungkin sekian artikel tentang Cara Membuat Color Picker Di Blog Responsive Flat Ui dan semoga bermanfaat bagi sobat semua.

Comments : Cara Membuat Color Picker Di Blog