Membuat Flat UI Color Generator

Membuat Flat UI Color Generator - Pada kesempatan kali ini saya akan membagikan artikel yang berkaitan tentang Tutorial Blog yakni Membuat Flat UI Color Generator. Flat UI Color Generator berfungsi untuk mengetahui lebih cepat kode warna jika ingin mengutak atik template :D .

Demo

Cara Membuat Flat UI Color Generator

1. Login blog dan masuk dashboard blog sobat

2. Masuk ke Template >> Edit HTML

3. Cari kode ]]></b:skin>

4. Masukan kode kode dibawah tepat diatas ]]></b:skin>

 /* Flat UI */
.flatui li { float: left; width: 20%; padding: 4% 0; list-style: none; background: #444; text-align: center; font-family: Tahoma; color: #fff; font-size: 14px; margin : 0;font-style:bold}
ul.flatui  { float: left; width: 100%; text-align: center; color: #CFCECE; font-size: 12px; margin : 0; position:relative;padding:0}
@media screen and (max-width:480px){.flatui li{width: 50%;}}

5. Simpan Template, Lalu pergi ke Laman >> Laman Baru
6. Ganti Compose menjadi HTML , masukan kode dibawah lalu publikasikan

<div style="display: none;">
Flat UI color Generator</div>
<ul class="flatui">
<li style="background: #5C97BF;">Kode Warna: #5C97BF</li>
<li style="background: #4B77BE;">Kode Warna: #4B77BE</li>
<li style="background: #1F3A93;">Kode Warna: #1F3A93</li>
<li style="background: #2574A9;">Kode Warna: #2574A9</li>
<li style="background: #67809F;">Kode Warna: #67809F</li>
<li style="background: #34495E;">Kode Warna: #34495E</li>
<li style="background: #3A539B;">Kode Warna: #3A539B</li>
<li style="background: #1E8BC3;">Kode Warna: #1E8BC3</li>
<li style="background: #6BB9F0;">Kode Warna: #6BB9F0</li>
<li style="background: #22313F;">Kode Warna: #22313F</li>
<li style="background: #336E7B;">Kode Warna: #336E7B</li>
<li style="background: #19B5FE;">Kode Warna: #19B5FE</li>
<li style="background: #89C4F4;">Kode Warna: #89C4F4</li>
<li style="background: #2C3E50;">Kode Warna: #2C3E50</li>
<li style="background: #3498DB;">Kode Warna: #3498DB</li>
<li style="background: #22A7F0;">Kode Warna: #22A7F0</li>
<li style="background: #94E0EE;">Kode Warna: #94E0EE</li>
<li style="background: #52B3D9;">Kode Warna: #52B3D9</li>
<li style="background: #59ABE3;">Kode Warna: #59ABE3</li>
<li style="background: #26A65B;">Kode Warna: #26A65B</li>
<li style="background: #1E824C;">Kode Warna: #1E824C</li>
<li style="background: #00B16A;">Kode Warna: #00B16A</li>
<li style="background: #2ABB9B;">Kode Warna: #2ABB9B</li>
<li style="background: #4DAF7C;">Kode Warna: #4DAF7C</li>
<li style="background: #03A678;">Kode Warna: #03A678</li>
<li style="background: #26C281;">Kode Warna: #26C281</li>
<li style="background: #019875;">Kode Warna: #019875</li>
<li style="background: #3FC380;">Kode Warna: #3FC380</li>
<li style="background: #16A085;">Kode Warna: #16A085</li>
<li style="background: #2ECC71;">Kode Warna: #2ECC71</li>
<li style="background: #C5EFF7;">Kode Warna: #C5EFF7</li>
<li style="background: #C8F7C5;">Kode Warna: #C8F7C5</li>
<li style="background: #049372;">Kode Warna: #049372</li>
<li style="background: #36D7B7;">Kode Warna: #36D7B7</li>
<li style="background: #66CC99;">Kode Warna: #66CC99</li>
<li style="background: #1BA39C;">Kode Warna: #1BA39C</li>
<li style="background: #1BBC9B;">Kode Warna: #1BBC9B</li>
<li style="background: #65C6BB;">Kode Warna: #65C6BB</li>
<li style="background: #BFBFBF;">Kode Warna: #BFBFBF</li>
<li style="background: #ABB7B7;">Kode Warna: #ABB7B7</li>
<li style="background: #DADFE1;">Kode Warna: #DADFE1</li>
<li style="background: #95A5A6;">Kode Warna: #95A5A6</li>
<li style="background: #C5DCE2;">Kode Warna: #C5DCE2</li>
<li style="background: #BDC3C7;">Kode Warna: #BDC3C7</li>
<li style="background: #EEEEEE;">Kode Warna: #EEEEEE</li>
<li style="background: #D2D7D3;">Kode Warna: #D2D7D3</li>
<li style="background: #F0E2C5;">Kode Warna: #F0E2C5</li>
<li style="background: #EB9532;">Kode Warna: #EB9532</li>
<li style="background: #E67E22;">Kode Warna: #E67E22</li>
<li style="background: #F27935;">Kode Warna: #F27935</li>
<li style="background: #F9BF3B;">Kode Warna: #F9BF3B</li>
<li style="background: #F7CA18;">Kode Warna: #F7CA18</li>
<li style="background: #F9690E;">Kode Warna: #F9690E</li>
<li style="background: #F39C12;">Kode Warna: #F39C12</li>
<li style="background: #D35400;">Kode Warna: #D35400</li>
<li style="background: #F4D03F;">Kode Warna: #F4D03F</li>
<li style="background: #F5AB35;">Kode Warna: #F5AB35</li>
<li style="background: #EB974E;">Kode Warna: #EB974E</li>
<li style="background: #F2784B;">Kode Warna: #F2784B</li>
<li style="background: #F4B350;">Kode Warna: #F4B350</li>
<li style="background: #E87E04;">Kode Warna: #E87E04</li>
<li style="background: #E74C3C;">Kode Warna: #E74C3C</li>
<li style="background: #CF000F;">Kode Warna: #CF000F</li>
<li style="background: #C0392B;">Kode Warna: #C0392B</li>
<li style="background: #D64541;">Kode Warna: #D64541</li>
<li style="background: #EF4836;">Kode Warna: #EF4836</li>
<li style="background: #96281B;">Kode Warna: #96281B</li>
<li style="background: #D91E18;">Kode Warna: #D91E18</li>
<li style="background: #E26A6A;">Kode Warna: #E26A6A</li>
<li style="background: #FF0000;">Kode Warna: #FF0000</li>
<li style="background: #F22613;">Kode Warna: #F22613</li>
<li style="background: #E08283;">Kode Warna: #E08283</li>
<li style="background: #9B59B6;">Kode Warna: #9B59B6</li>
<li style="background: #8E44AD;">Kode Warna: #8E44AD</li>
<li style="background: #BE90D4;">Kode Warna: #BE90D4</li>
<li style="background: #BF55EC;">Kode Warna: #BF55EC</li>
<li style="background: #9A12B3;">Kode Warna: #9A12B3</li>
<li style="background: #913D88;">Kode Warna: #913D88</li>
<li style="background: #722D6A;">Kode Warna: #722D6A</li>
<li style="background: #740A4E;">Kode Warna: #740A4E</li>
</ul>

Sekian dari saya, semoga bermanfaat ^_^...