Cara Membuat Flat Ui Color Picker Responsive

Cara Membuat Flat Ui Color Picker Responsive

8:21 PM

Cara Membuat Flat Ui Color Picker Responsive - Postingan berikutnya saya akan berbagi artikel yang berkaikan dengan Tips Blogger yaitu Cara Membuat Flat Ui Color Picker Responsive.

Flat Ui Color Picker mempunyai beberapa fungsi untuk blog anda.
- Anda bisa mengetahu kode warna/color dengan cepat tanpa harus melihat di Google color.
- Anda bisa menjadi penyedia layanan Flat Ui Color Picker yang lebih lengkap.
- Dll
Gambar 0.1
 Kode Flat Ui Color Picker ini sudah menggunakan tampilan yang cukup responsive sehingga anda akan nyaman melihatnya. Kode Flat Ui Color Picker ini hanya menggunakan kode/script HTML dan CSS sehingga tidak akan mempengaruhi loading blog anda.

Baiklah tanpa panjang lebar silahkan ikuti langkah-langkah berikut ini.

Flat Ui Color Picker

#1. Silahkan anda login ke Blogger > Laman > Laman baru
Gambar 0.2
#2. Kemudian silahkan anda pilih mode HTML Compose dan masukan kode di bawah ini.

<div id="wajoni">
<ul class="flatui">
<li style="background: #F44336;"><span class="kodebesar"><span class="kodekecil">500</span> #F44336</span>
</li>
<li style="background: #E91E63;"><span class="kodebesar"><span class="kodekecil">500</span> #E91E63</span>
</li>
<li style="background: #9C27B0;"><span class="kodebesar"><span class="kodekecil">500</span> #9C27B0</span>
</li>
<li style="background: #FFEBEE;"><span class="kodebesar"><span class="kodekecil">50</span> #FFEBEE</span>
</li>
<li style="background: #FCE4EC;"><span class="kodebesar"><span class="kodekecil">50</span> #FCE4EC</span>
</li>
<li style="background: #F3E5F5;"><span class="kodebesar"><span class="kodekecil">50</span> #F3E5F5</span>
</li>
<li style="background: #FFCDD2;"><span class="kodebesar"><span class="kodekecil">100</span> #FFCDD2</span>
</li>
<li style="background: #F8BBD0;"><span class="kodebesar"><span class="kodekecil">100</span> #F8BBD0</span>
</li>
<li style="background: #E1BEE7;"><span class="kodebesar"><span class="kodekecil">100</span> #E1BEE7</span>
</li>
<li style="background: #EF9A9A;"><span class="kodebesar"><span class="kodekecil">200</span> #EF9A9A</span>
</li>
<li style="background: #F48FB1;"><span class="kodebesar"><span class="kodekecil">200</span> #F48FB1</span>
</li>
<li style="background: #CE93D8;"><span class="kodebesar"><span class="kodekecil">200</span> #CE93D8</span>
</li>
<li style="background: #E57373;"><span class="kodebesar"><span class="kodekecil">300</span> #E57373</span>
</li>
<li style="background: #F06292;"><span class="kodebesar"><span class="kodekecil">300</span> #F06292</span>
</li>
<li style="background: #BA68C8;"><span class="kodebesar"><span class="kodekecil">300</span> #BA68C8</span>
</li>
<li style="background: #EF5350;"><span class="kodebesar"><span class="kodekecil">400</span> #EF5350</span>
</li>
<li style="background: #EC407A;"><span class="kodebesar"><span class="kodekecil">400</span> #EC407A</span>
</li>
<li style="background: #AB47BC;"><span class="kodebesar"><span class="kodekecil">400</span> #AB47BC</span>
</li>
<li style="background: #F44336;"><span class="kodebesar"><span class="kodekecil">500</span> #F44336</span>
</li>
<li style="background: #E91E63;"><span class="kodebesar"><span class="kodekecil">500</span> #E91E63</span>
</li>
<li style="background: #9C27B0;"><span class="kodebesar"><span class="kodekecil">500</span> #9C27B0</span>
</li>
<li style="background: #E53935;"><span class="kodebesar"><span class="kodekecil">600</span> #E53935</span>
</li>
<li style="background: #D81B60;"><span class="kodebesar"><span class="kodekecil">600</span> #D81B60</span>
</li>
<li style="background: #8E24AA;"><span class="kodebesar"><span class="kodekecil">600</span> #8E24AA</span>
</li>
<li style="background: #D32F2F;"><span class="kodebesar"><span class="kodekecil">700</span> #D32F2F</span>
</li>
<li style="background: #C2185B;"><span class="kodebesar"><span class="kodekecil">700</span> #C2185B</span>
</li>
<li style="background: #7B1FA2;"><span class="kodebesar"><span class="kodekecil">700</span> #7B1FA2</span>
</li>
<li style="background: #C62828;"><span class="kodebesar"><span class="kodekecil">800</span> #C62828</span>
</li>
<li style="background: #AD1457;"><span class="kodebesar"><span class="kodekecil">800</span> #AD1457</span>
</li>
<li style="background: #6A1B9A;"><span class="kodebesar"><span class="kodekecil">800</span> #6A1B9A</span>
</li>
<li style="background: #B71C1C;"><span class="kodebesar"><span class="kodekecil">900</span> #B71C1C</span>
</li>
<li style="background: #880E4F;"><span class="kodebesar"><span class="kodekecil">900</span> #880E4F</span>
</li>
<li style="background: #4A148C;"><span class="kodebesar"><span class="kodekecil">900</span> #4A148C</span>
</li>
<li style="background: #FF8A80;"><span class="kodebesar"><span class="kodekecil">A100</span> #FF8A80</span>
</li>
<li style="background: #FF80AB;"><span class="kodebesar"><span class="kodekecil">A100</span> #FF80AB</span>
</li>
<li style="background: #EA80FC;"><span class="kodebesar"><span class="kodekecil">A100</span> #EA80FC</span>
</li>
<li style="background: #FF5252;"><span class="kodebesar"><span class="kodekecil">A200</span> #FF5252</span>
</li>
<li style="background: #FF4081;"><span class="kodebesar"><span class="kodekecil">A200</span> #FF4081</span>
</li>
<li style="background: #E040FB;"><span class="kodebesar"><span class="kodekecil">A200</span> #E040FB</span>
</li>
<li style="background: #FF1744;"><span class="kodebesar"><span class="kodekecil">A400</span> #FF1744</span>
</li>
<li style="background: #F50057;"><span class="kodebesar"><span class="kodekecil">A400</span> #F50057</span>
</li>
<li style="background: #D500F9;"><span class="kodebesar"><span class="kodekecil">A400</span> #D500F9</span>
</li>
<li style="background: #D50000;"><span class="kodebesar"><span class="kodekecil">A700</span> #D50000</span>
</li>
<li style="background: #C51162;"><span class="kodebesar"><span class="kodekecil">A700</span> #C51162</span>
</li>
<li style="background: #AA00FF;"><span class="kodebesar"><span class="kodekecil">A700</span> #AA00FF</span>
</li>
<li style="background: #673AB7;"><span class="kodebesar"><span class="kodekecil">500</span> #673AB7</span>
</li>
<li style="background: #3F51B5;"><span class="kodebesar"><span class="kodekecil">500</span> #3F51B5</span>
</li>
<li style="background: #2196F3;"><span class="kodebesar"><span class="kodekecil">500</span> #2196F3</span>
</li>
<li style="background: #EDE7F6;"><span class="kodebesar"><span class="kodekecil">50</span> #EDE7F6</span>
</li>
<li style="background: #E8EAF6;"><span class="kodebesar"><span class="kodekecil">50</span> #E8EAF6</span>
</li>
<li style="background: #E3F2FD;"><span class="kodebesar"><span class="kodekecil">50</span> #E3F2FD</span>
</li>
<li style="background: #D1C4E9;"><span class="kodebesar"><span class="kodekecil">100</span> #D1C4E9</span>
</li>
<li style="background: #C5CAE9;"><span class="kodebesar"><span class="kodekecil">100</span> #C5CAE9</span>
</li>
<li style="background: #BBDEFB;"><span class="kodebesar"><span class="kodekecil">100</span> #BBDEFB</span>
</li>
<li style="background: #B39DDB;"><span class="kodebesar"><span class="kodekecil">200</span> #B39DDB</span>
</li>
<li style="background: #9FA8DA;"><span class="kodebesar"><span class="kodekecil">200</span> #9FA8DA</span>
</li>
<li style="background: #90CAF9;"><span class="kodebesar"><span class="kodekecil">200</span> #90CAF9</span>
</li>
<li style="background: #9575CD;"><span class="kodebesar"><span class="kodekecil">300</span> #9575CD</span>
</li>
<li style="background: #7986CB;"><span class="kodebesar"><span class="kodekecil">300</span> #7986CB</span>
</li>
<li style="background: #64B5F6;"><span class="kodebesar"><span class="kodekecil">300</span> #64B5F6</span>
</li>
<li style="background: #7E57C2;"><span class="kodebesar"><span class="kodekecil">400</span> #7E57C2</span>
</li>
<li style="background: #5C6BC0;"><span class="kodebesar"><span class="kodekecil">400</span> #5C6BC0</span>
</li>
<li style="background: #42A5F5;"><span class="kodebesar"><span class="kodekecil">400</span> #42A5F5</span>
</li>
<li style="background: #673AB7;"><span class="kodebesar"><span class="kodekecil">500</span> #673AB7</span>
</li>
<li style="background: #3F51B5;"><span class="kodebesar"><span class="kodekecil">500</span> #3F51B5</span>
</li>
<li style="background: #2196F3;"><span class="kodebesar"><span class="kodekecil">500</span> #2196F3</span>
</li>
<li style="background: #5E35B1;"><span class="kodebesar"><span class="kodekecil">600</span> #5E35B1</span>
</li>
<li style="background: #3949AB;"><span class="kodebesar"><span class="kodekecil">600</span> #3949AB</span>
</li>
<li style="background: #1E88E5;"><span class="kodebesar"><span class="kodekecil">600</span> #1E88E5</span>
</li>
<li style="background: #512DA8;"><span class="kodebesar"><span class="kodekecil">700</span> #512DA8</span>
</li>
<li style="background: #303F9F;"><span class="kodebesar"><span class="kodekecil">700</span> #303F9F</span>
</li>
<li style="background: #1976D2;"><span class="kodebesar"><span class="kodekecil">700</span> #1976D2</span>
</li>
<li style="background: #4527A0;"><span class="kodebesar"><span class="kodekecil">800</span> #4527A0</span>
</li>
<li style="background: #283593;"><span class="kodebesar"><span class="kodekecil">800</span> #283593</span>
</li>
<li style="background: #1565C0;"><span class="kodebesar"><span class="kodekecil">800</span> #1565C0</span>
</li>
<li style="background: #311B92;"><span class="kodebesar"><span class="kodekecil">900</span> #311B92</span>
</li>
<li style="background: #1A237E;"><span class="kodebesar"><span class="kodekecil">900</span> #1A237E</span>
</li>
<li style="background: #0D47A1;"><span class="kodebesar"><span class="kodekecil">900</span> #0D47A1</span>
</li>
<li style="background: #B388FF;"><span class="kodebesar"><span class="kodekecil">A100</span> #B388FF</span>
</li>
<li style="background: #8C9EFF;"><span class="kodebesar"><span class="kodekecil">A100</span> #8C9EFF</span>
</li>
<li style="background: #82B1FF;"><span class="kodebesar"><span class="kodekecil">A100</span> #82B1FF</span>
</li>
<li style="background: #7C4DFF;"><span class="kodebesar"><span class="kodekecil">A200</span> #7C4DFF</span>
</li>
<li style="background: #536DFE;"><span class="kodebesar"><span class="kodekecil">A200</span> #536DFE</span>
</li>
<li style="background: #448AFF;"><span class="kodebesar"><span class="kodekecil">A200</span> #448AFF</span>
</li>
<li style="background: #651FFF;"><span class="kodebesar"><span class="kodekecil">A400</span> #651FFF</span>
</li>
<li style="background: #3D5AFE;"><span class="kodebesar"><span class="kodekecil">A400</span> #3D5AFE</span>
</li>
<li style="background: #2979FF;"><span class="kodebesar"><span class="kodekecil">A400</span> #2979FF</span>
</li>
<li style="background: #6200EA;"><span class="kodebesar"><span class="kodekecil">A700</span> #6200EA</span>
</li>
<li style="background: #304FFE;"><span class="kodebesar"><span class="kodekecil">A700</span> #304FFE</span>
</li>
<li style="background: #2962FF;"><span class="kodebesar"><span class="kodekecil">A700</span> #2962FF</span>
</li>
<li style="background: #03A9F4;"><span class="kodebesar"><span class="kodekecil">500</span> #03A9F4</span>
</li>
<li style="background: #00BCD4;"><span class="kodebesar"><span class="kodekecil">500</span> #00BCD4</span>
</li>
<li style="background: #009688;"><span class="kodebesar"><span class="kodekecil">500</span> #009688</span>
</li>
<li style="background: #E1F5FE;"><span class="kodebesar"><span class="kodekecil">50</span> #E1F5FE</span>
</li>
<li style="background: #E0F7FA;"><span class="kodebesar"><span class="kodekecil">50</span> #E0F7FA</span>
</li>
<li style="background: #E0F2F1;"><span class="kodebesar"><span class="kodekecil">50</span> #E0F2F1</span>
</li>
<li style="background: #B3E5FC;"><span class="kodebesar"><span class="kodekecil">100</span> #B3E5FC</span>
</li>
<li style="background: #B2EBF2;"><span class="kodebesar"><span class="kodekecil">100</span> #B2EBF2</span>
</li>
<li style="background: #B2DFDB;"><span class="kodebesar"><span class="kodekecil">100</span> #B2DFDB</span>
</li>
<li style="background: #81D4FA;"><span class="kodebesar"><span class="kodekecil">200</span> #81D4FA</span>
</li>
<li style="background: #80DEEA;"><span class="kodebesar"><span class="kodekecil">200</span> #80DEEA</span>
</li>
<li style="background: #80CBC4;"><span class="kodebesar"><span class="kodekecil">200</span> #80CBC4</span>
</li>
<li style="background: #4FC3F7;"><span class="kodebesar"><span class="kodekecil">300</span> #4FC3F7</span>
</li>
<li style="background: #4DD0E1;"><span class="kodebesar"><span class="kodekecil">300</span> #4DD0E1</span>
</li>
<li style="background: #4DB6AC;"><span class="kodebesar"><span class="kodekecil">300</span> #4DB6AC</span>
</li>
<li style="background: #29B6F6;"><span class="kodebesar"><span class="kodekecil">400</span> #29B6F6</span>
</li>
<li style="background: #26C6DA;"><span class="kodebesar"><span class="kodekecil">400</span> #26C6DA</span>
</li>
<li style="background: #26A69A;"><span class="kodebesar"><span class="kodekecil">400</span> #26A69A</span>
</li>
<li style="background: #03A9F4;"><span class="kodebesar"><span class="kodekecil">500</span> #03A9F4</span>
</li>
<li style="background: #00BCD4;"><span class="kodebesar"><span class="kodekecil">500</span> #00BCD4</span>
</li>
<li style="background: #009688;"><span class="kodebesar"><span class="kodekecil">500</span> #009688</span>
</li>
<li style="background: #039BE5;"><span class="kodebesar"><span class="kodekecil">600</span> #039BE5</span>
</li>
<li style="background: #00ACC1;"><span class="kodebesar"><span class="kodekecil">600</span> #00ACC1</span>
</li>
<li style="background: #00897B;"><span class="kodebesar"><span class="kodekecil">600</span> #00897B</span>
</li>
<li style="background: #0288D1;"><span class="kodebesar"><span class="kodekecil">700</span> #0288D1</span>
</li>
<li style="background: #0097A7;"><span class="kodebesar"><span class="kodekecil">700</span> #0097A7</span>
</li>
<li style="background: #00796B;"><span class="kodebesar"><span class="kodekecil">700</span> #00796B</span>
</li>
<li style="background: #0277BD;"><span class="kodebesar"><span class="kodekecil">800</span> #0277BD</span>
</li>
<li style="background: #00838F;"><span class="kodebesar"><span class="kodekecil">800</span> #00838F</span>
</li>
<li style="background: #00695C;"><span class="kodebesar"><span class="kodekecil">800</span> #00695C</span>
</li>
<li style="background: #01579B;"><span class="kodebesar"><span class="kodekecil">900</span> #01579B</span>
</li>
<li style="background: #006064;"><span class="kodebesar"><span class="kodekecil">900</span> #006064</span>
</li>
<li style="background: #004D40;"><span class="kodebesar"><span class="kodekecil">900</span> #004D40</span>
</li>
<li style="background: #80D8FF;"><span class="kodebesar"><span class="kodekecil">A100</span> #80D8FF</span>
</li>
<li style="background: #84FFFF;"><span class="kodebesar"><span class="kodekecil">A100</span> #84FFFF</span>
</li>
<li style="background: #A7FFEB;"><span class="kodebesar"><span class="kodekecil">A100</span> #A7FFEB</span>
</li>
<li style="background: #40C4FF;"><span class="kodebesar"><span class="kodekecil">A200</span> #40C4FF</span>
</li>
<li style="background: #18FFFF;"><span class="kodebesar"><span class="kodekecil">A200</span> #18FFFF</span>
</li>
<li style="background: #64FFDA;"><span class="kodebesar"><span class="kodekecil">A200</span> #64FFDA</span>
</li>
<li style="background: #00B0FF;"><span class="kodebesar"><span class="kodekecil">A400</span> #00B0FF</span>
</li>
<li style="background: #00E5FF;"><span class="kodebesar"><span class="kodekecil">A400</span> #00E5FF</span>
</li>
<li style="background: #1DE9B6;"><span class="kodebesar"><span class="kodekecil">A400</span> #1DE9B6</span>
</li>
<li style="background: #0091EA;"><span class="kodebesar"><span class="kodekecil">A700</span> #0091EA</span>
</li>
<li style="background: #00B8D4;"><span class="kodebesar"><span class="kodekecil">A700</span> #00B8D4</span>
</li>
<li style="background: #00BFA5;"><span class="kodebesar"><span class="kodekecil">A700</span> #00BFA5</span>
</li>
<li style="background: #4CAF50;"><span class="kodebesar"><span class="kodekecil">500</span> #4CAF50</span>
</li>
<li style="background: #8BC34A;"><span class="kodebesar"><span class="kodekecil">500</span> #8BC34A</span>
</li>
<li style="background: #CDDC39;"><span class="kodebesar"><span class="kodekecil">500</span> #CDDC39</span>
</li>
<li style="background: #E8F5E9;"><span class="kodebesar"><span class="kodekecil">50</span> #E8F5E9</span>
</li>
<li style="background: #F1F8E9;"><span class="kodebesar"><span class="kodekecil">50</span> #F1F8E9</span>
</li>
<li style="background: #F9FBE7;"><span class="kodebesar"><span class="kodekecil">50</span> #F9FBE7</span>
</li>
<li style="background: #C8E6C9;"><span class="kodebesar"><span class="kodekecil">100</span> #C8E6C9</span>
</li>
<li style="background: #DCEDC8;"><span class="kodebesar"><span class="kodekecil">100</span> #DCEDC8</span>
</li>
<li style="background: #F0F4C3;"><span class="kodebesar"><span class="kodekecil">100</span> #F0F4C3</span>
</li>
<li style="background: #A5D6A7;"><span class="kodebesar"><span class="kodekecil">200</span> #A5D6A7</span>
</li>
<li style="background: #C5E1A5;"><span class="kodebesar"><span class="kodekecil">200</span> #C5E1A5</span>
</li>
<li style="background: #E6EE9C;"><span class="kodebesar"><span class="kodekecil">200</span> #E6EE9C</span>
</li>
<li style="background: #81C784;"><span class="kodebesar"><span class="kodekecil">300</span> #81C784</span>
</li>
<li style="background: #AED581;"><span class="kodebesar"><span class="kodekecil">300</span> #AED581</span>
</li>
<li style="background: #DCE775;"><span class="kodebesar"><span class="kodekecil">300</span> #DCE775</span>
</li>
<li style="background: #66BB6A;"><span class="kodebesar"><span class="kodekecil">400</span> #66BB6A</span>
</li>
<li style="background: #9CCC65;"><span class="kodebesar"><span class="kodekecil">400</span> #9CCC65</span>
</li>
<li style="background: #D4E157;"><span class="kodebesar"><span class="kodekecil">400</span> #D4E157</span>
</li>
<li style="background: #4CAF50;"><span class="kodebesar"><span class="kodekecil">500</span> #4CAF50</span>
</li>
<li style="background: #8BC34A;"><span class="kodebesar"><span class="kodekecil">500</span> #8BC34A</span>
</li>
<li style="background: #CDDC39;"><span class="kodebesar"><span class="kodekecil">500</span> #CDDC39</span>
</li>
<li style="background: #43A047;"><span class="kodebesar"><span class="kodekecil">600</span> #43A047</span>
</li>
<li style="background: #7CB342;"><span class="kodebesar"><span class="kodekecil">600</span> #7CB342</span>
</li>
<li style="background: #C0CA33;"><span class="kodebesar"><span class="kodekecil">600</span> #C0CA33</span>
</li>
<li style="background: #388E3C;"><span class="kodebesar"><span class="kodekecil">700</span> #388E3C</span>
</li>
<li style="background: #689F38;"><span class="kodebesar"><span class="kodekecil">700</span> #689F38</span>
</li>
<li style="background: #AFB42B;"><span class="kodebesar"><span class="kodekecil">700</span> #AFB42B</span>
</li>
<li style="background: #2E7D32;"><span class="kodebesar"><span class="kodekecil">800</span> #2E7D32</span>
</li>
<li style="background: #558B2F;"><span class="kodebesar"><span class="kodekecil">800</span> #558B2F</span>
</li>
<li style="background: #9E9D24;"><span class="kodebesar"><span class="kodekecil">800</span> #9E9D24</span>
</li>
<li style="background: #1B5E20;"><span class="kodebesar"><span class="kodekecil">900</span> #1B5E20</span>
</li>
<li style="background: #33691E;"><span class="kodebesar"><span class="kodekecil">900</span> #33691E</span>
</li>
<li style="background: #827717;"><span class="kodebesar"><span class="kodekecil">900</span> #827717</span>
</li>
<li style="background: #B9F6CA;"><span class="kodebesar"><span class="kodekecil">A100</span> #B9F6CA</span>
</li>
<li style="background: #CCFF90;"><span class="kodebesar"><span class="kodekecil">A100</span> #CCFF90</span>
</li>
<li style="background: #F4FF81;"><span class="kodebesar"><span class="kodekecil">A100</span> #F4FF81</span>
</li>
<li style="background: #69F0AE;"><span class="kodebesar"><span class="kodekecil">A200</span> #69F0AE</span>
</li>
<li style="background: #B2FF59;"><span class="kodebesar"><span class="kodekecil">A200</span> #B2FF59</span>
</li>
<li style="background: #EEFF41;"><span class="kodebesar"><span class="kodekecil">A200</span> #EEFF41</span>
</li>
<li style="background: #00E676;"><span class="kodebesar"><span class="kodekecil">A400</span> #00E676</span>
</li>
<li style="background: #76FF03;"><span class="kodebesar"><span class="kodekecil">A400</span> #76FF03</span>
</li>
<li style="background: #C6FF00;"><span class="kodebesar"><span class="kodekecil">A400</span> #C6FF00</span>
</li>
<li style="background: #00C853;"><span class="kodebesar"><span class="kodekecil">A700</span> #00C853</span>
</li>
<li style="background: #64DD17;"><span class="kodebesar"><span class="kodekecil">A700</span> #64DD17</span>
</li>
<li style="background: #AEEA00;"><span class="kodebesar"><span class="kodekecil">A700</span> #AEEA00</span>
</li>
<li style="background: #FFEB3B;"><span class="kodebesar"><span class="kodekecil">500</span> #FFEB3B</span>
</li>
<li style="background: #FFC107;"><span class="kodebesar"><span class="kodekecil">500</span> #FFC107</span>
</li>
<li style="background: #FF9800;"><span class="kodebesar"><span class="kodekecil">500</span> #FF9800</span>
</li>
<li style="background: #FFFDE7;"><span class="kodebesar"><span class="kodekecil">50</span> #FFFDE7</span>
</li>
<li style="background: #FFF8E1;"><span class="kodebesar"><span class="kodekecil">50</span> #FFF8E1</span>
</li>
<li style="background: #FFF3E0;"><span class="kodebesar"><span class="kodekecil">50</span> #FFF3E0</span>
</li>
<li style="background: #FFF9C4;"><span class="kodebesar"><span class="kodekecil">100</span> #FFF9C4</span>
</li>
<li style="background: #FFECB3;"><span class="kodebesar"><span class="kodekecil">100</span> #FFECB3</span>
</li>
<li style="background: #FFE0B2;"><span class="kodebesar"><span class="kodekecil">100</span> #FFE0B2</span>
</li>
<li style="background: #FFF59D;"><span class="kodebesar"><span class="kodekecil">200</span> #FFF59D</span>
</li>
<li style="background: #FFE082;"><span class="kodebesar"><span class="kodekecil">200</span> #FFE082</span>
</li>
<li style="background: #FFCC80;"><span class="kodebesar"><span class="kodekecil">200</span> #FFCC80</span>
</li>
<li style="background: #FFF176;"><span class="kodebesar"><span class="kodekecil">300</span> #FFF176</span>
</li>
<li style="background: #FFD54F;"><span class="kodebesar"><span class="kodekecil">300</span> #FFD54F</span>
</li>
<li style="background: #FFB74D;"><span class="kodebesar"><span class="kodekecil">300</span> #FFB74D</span>
</li>
<li style="background: #FFEE58;"><span class="kodebesar"><span class="kodekecil">400</span> #FFEE58</span>
</li>
<li style="background: #FFCA28;"><span class="kodebesar"><span class="kodekecil">400</span> #FFCA28</span>
</li>
<li style="background: #FFA726;"><span class="kodebesar"><span class="kodekecil">400</span> #FFA726</span>
</li>
<li style="background: #FFEB3B;"><span class="kodebesar"><span class="kodekecil">500</span> #FFEB3B</span>
</li>
<li style="background: #FFC107;"><span class="kodebesar"><span class="kodekecil">500</span> #FFC107</span>
</li>
<li style="background: #FF9800;"><span class="kodebesar"><span class="kodekecil">500</span> #FF9800</span>
</li>
<li style="background: #FDD835;"><span class="kodebesar"><span class="kodekecil">600</span> #FDD835</span>
</li>
<li style="background: #FFB300;"><span class="kodebesar"><span class="kodekecil">600</span> #FFB300</span>
</li>
<li style="background: #FB8C00;"><span class="kodebesar"><span class="kodekecil">600</span> #FB8C00</span>
</li>
<li style="background: #FBC02D;"><span class="kodebesar"><span class="kodekecil">700</span> #FBC02D</span>
</li>
<li style="background: #FFA000;"><span class="kodebesar"><span class="kodekecil">700</span> #FFA000</span>
</li>
<li style="background: #F57C00;"><span class="kodebesar"><span class="kodekecil">700</span> #F57C00</span>
</li>
<li style="background: #F9A825;"><span class="kodebesar"><span class="kodekecil">800</span> #F9A825</span>
</li>
<li style="background: #FF8F00;"><span class="kodebesar"><span class="kodekecil">800</span> #FF8F00</span>
</li>
<li style="background: #EF6C00;"><span class="kodebesar"><span class="kodekecil">800</span> #EF6C00</span>
</li>
<li style="background: #F57F17;"><span class="kodebesar"><span class="kodekecil">900</span> #F57F17</span>
</li>
<li style="background: #FF6F00;"><span class="kodebesar"><span class="kodekecil">900</span> #FF6F00</span>
</li>
<li style="background: #E65100;"><span class="kodebesar"><span class="kodekecil">900</span> #E65100</span>
</li>
<li style="background: #FFFF8D;"><span class="kodebesar"><span class="kodekecil">A100</span> #FFFF8D</span>
</li>
<li style="background: #FFE57F;"><span class="kodebesar"><span class="kodekecil">A100</span> #FFE57F</span>
</li>
<li style="background: #FFD180;"><span class="kodebesar"><span class="kodekecil">A100</span> #FFD180</span>
</li>
<li style="background: #FFFF00;"><span class="kodebesar"><span class="kodekecil">A200</span> #FFFF00</span>
</li>
<li style="background: #FFD740;"><span class="kodebesar"><span class="kodekecil">A200</span> #FFD740</span>
</li>
<li style="background: #FFAB40;"><span class="kodebesar"><span class="kodekecil">A200</span> #FFAB40</span>
</li>
<li style="background: #FFEA00;"><span class="kodebesar"><span class="kodekecil">A400</span> #FFEA00</span>
</li>
<li style="background: #FFC400;"><span class="kodebesar"><span class="kodekecil">A400</span> #FFC400</span>
</li>
<li style="background: #FF9100;"><span class="kodebesar"><span class="kodekecil">A400</span> #FF9100</span>
</li>
<li style="background: #FFD600;"><span class="kodebesar"><span class="kodekecil">A700</span> #FFD600</span>
</li>
<li style="background: #FFAB00;"><span class="kodebesar"><span class="kodekecil">A700</span> #FFAB00</span>
</li>
<li style="background: #FF6D00;"><span class="kodebesar"><span class="kodekecil">A700</span> #FF6D00</span>
</li>
<li style="background: #FF5722;"><span class="kodebesar"><span class="kodekecil">500</span> #FF5722</span>
</li>
<li style="background: #795548;"><span class="kodebesar"><span class="kodekecil">500</span> #795548</span>
</li>
<li style="background: #795548;"><span class="kodebesar"><span class="kodekecil">500</span> #795548</span>
</li>
<li style="background: #FBE9E7;"><span class="kodebesar"><span class="kodekecil">50</span> #FBE9E7</span>
</li>
<li style="background: #EFEBE9;"><span class="kodebesar"><span class="kodekecil">50</span> #EFEBE9</span>
</li>
<li style="background: #FAFAFA;"><span class="kodebesar"><span class="kodekecil">50</span> #FAFAFA</span>
</li>
<li style="background: #FFCCBC;"><span class="kodebesar"><span class="kodekecil">100</span> #FFCCBC</span>
</li>
<li style="background: #D7CCC8;"><span class="kodebesar"><span class="kodekecil">100</span> #D7CCC8</span>
</li>
<li style="background: #F5F5F5;"><span class="kodebesar"><span class="kodekecil">100</span> #F5F5F5</span>
</li>
<li style="background: #FFAB91;"><span class="kodebesar"><span class="kodekecil">200</span> #FFAB91</span>
</li>
<li style="background: #BCAAA4;"><span class="kodebesar"><span class="kodekecil">200</span> #BCAAA4</span>
</li>
<li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">200</span> #EEEEEE</span>
</li>
<li style="background: #FF8A65;"><span class="kodebesar"><span class="kodekecil">300</span> #FF8A65</span>
</li>
<li style="background: #A1887F;"><span class="kodebesar"><span class="kodekecil">300</span> #A1887F</span>
</li>
<li style="background: #E0E0E0;"><span class="kodebesar"><span class="kodekecil">300</span> #E0E0E0</span>
</li>
<li style="background: #FF7043;"><span class="kodebesar"><span class="kodekecil">400</span> #FF7043</span>
</li>
<li style="background: #8D6E63;"><span class="kodebesar"><span class="kodekecil">400</span> #8D6E63</span>
</li>
<li style="background: #BDBDBD;"><span class="kodebesar"><span class="kodekecil">400</span> #BDBDBD</span>
</li>
<li style="background: #FF5722;"><span class="kodebesar"><span class="kodekecil">500</span> #FF5722</span>
</li>
<li style="background: #795548;"><span class="kodebesar"><span class="kodekecil">500</span> #795548</span>
</li>
<li style="background: #9E9E9E;"><span class="kodebesar"><span class="kodekecil">500</span> #9E9E9E</span>
</li>
<li style="background: #F4511E;"><span class="kodebesar"><span class="kodekecil">600</span> #F4511E</span>
</li>
<li style="background: #6D4C41;"><span class="kodebesar"><span class="kodekecil">600</span> #6D4C41</span>
</li>
<li style="background: #757575;"><span class="kodebesar"><span class="kodekecil">600</span> #757575</span>
</li>
<li style="background: #E64A19;"><span class="kodebesar"><span class="kodekecil">700</span> #E64A19</span>
</li>
<li style="background: #5D4037;"><span class="kodebesar"><span class="kodekecil">700</span> #5D4037</span>
</li>
<li style="background: #616161;"><span class="kodebesar"><span class="kodekecil">700</span> #616161</span>
</li>
<li style="background: #D84315;"><span class="kodebesar"><span class="kodekecil">800</span> #D84315</span>
</li>
<li style="background: #4E342E;"><span class="kodebesar"><span class="kodekecil">800</span> #4E342E</span>
</li>
<li style="background: #424242;"><span class="kodebesar"><span class="kodekecil">800</span> #424242</span>
</li>
<li style="background: #BF360C;"><span class="kodebesar"><span class="kodekecil">900</span> #BF360C</span>
</li>
<li style="background: #3E2723;"><span class="kodebesar"><span class="kodekecil">900</span> #3E2723</span>
</li>
<li style="background: #212121;"><span class="kodebesar"><span class="kodekecil">900</span> #212121</span>
</li>
<li style="background: #FF9E80;"><span class="kodebesar"><span class="kodekecil">A100</span> #FF9E80</span>
</li>
<li style="background: #FF6E40;"><span class="kodebesar"><span class="kodekecil">A200</span> #FF6E40</span>
</li>
<li style="background: #FF3D00;"><span class="kodebesar"><span class="kodekecil">A400</span> #FF3D00</span>
</li>
<li style="background: #DD2C00;"><span class="kodebesar"><span class="kodekecil">A700</span> #DD2C00</span>
</li>
<li style="background: #607D8B;"><span class="kodebesar"><span class="kodekecil">500</span> #607D8B</span>
</li>
<li style="background: #000000;"><span class="kodebesar"><span class="kodekecil">500</span> #000000</span>
</li>
<li style="background: #FFFFFF;"><span class="kodebesar"><span style="color: #00796b;"><span class="kodekecil">500</span> #FFFFFF</span></span>
</li>
<li style="background: #ECEFF1;"><span class="kodebesar"><span class="kodekecil">50</span> #ECEFF1</span>
</li>
<li style="background: #CFD8DC;"><span class="kodebesar"><span class="kodekecil">100</span> #CFD8DC</span>
</li>
<li style="background: #B0BEC5;"><span class="kodebesar"><span class="kodekecil">200</span> #B0BEC5</span>
</li>
<li style="background: #90A4AE;"><span class="kodebesar"><span class="kodekecil">300</span> #90A4AE</span>
</li>
<li style="background: #78909C;"><span class="kodebesar"><span class="kodekecil">400</span> #78909C</span>
</li>
<li style="background: #607D8B;"><span class="kodebesar"><span class="kodekecil">500</span> #607D8B</span>
</li>
<li style="background: #546E7A;"><span class="kodebesar"><span class="kodekecil">600</span> #546E7A</span>
</li>
<li style="background: #455A64;"><span class="kodebesar"><span class="kodekecil">700</span> #455A64</span>
</li>
<li style="background: #37474F;"><span class="kodebesar"><span class="kodekecil">800</span> #37474F</span>
</li>
<li style="background: #263238;"><span class="kodebesar"><span class="kodekecil">900</span> #263238</span>
</li>
</ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by wajoni.blogspot.com */
#wajoni ul.flatui{
position:relative;
display:table;
width:100%;
text-align:center;
color:#fff;
font-size:12px;
margin:auto;
position:relative;
padding:0;
}
#wajoni ul.flatui li{
position:relative;
display:flex;
float:left;
width:25%;
height:100px;
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);
}
#wajoni ul.flatui li:hover{z-index:4}
#wajoni 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)}
#wajoni ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#wajoni 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}
#wajoni ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#wajoni ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#wajoni 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}
</style>
#3. Setelah kode di terapkan, silahkan anda Publikasikan untuk melihat hasilnya.
Next
« Prev Post
Previous
Next Post »

1 comments:

Click here for comments
Unknown
admin
December 11, 2016 at 9:51 PM ×

Nice Post

Congrats bro Unknown you got PERTAMAX...! hehehehe...
Reply
avatar
Subscribe to: Post Comments (Atom)