Membuat Flat Colour Pada Blog (2)

Sebuah flat colour pada dasarnya untuk mempermudahkan seseorang menentukan dalam memilih warna yang diinginkan serta untuk menentukan kode warna nya agar tidak cepat lupa maka dari sinilah saya membuat sebuat artikel tentang Flat Colour tidak lain untuk keperluan saya sendiri dan baiknya juga untuk semua pengunjung blog saya ini.

Saya mendapatkan sebuah kodenya dari tool4blog. Dan saya setting beberapa bagian kodenya untuk mempercantik tampilannya lagi.

Lalu bagaimana membuat sebuah Generator Flat Colour. Mari kita simak :

Pertama anda masuk ke dashboard blogger
Lalu ke option Tema - Edit Tema
Simpan kode dibawah ini tepat diatas ]]></b:skin>

 /* Flat UI YukTebarIlmu */
.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%;}}

Kemudian ke Laman - Buat Laman Baru 

Beri judul sesuai selera anda, kemudian pindahkan ke mode HTML bukan COMPOSE

Masukan kode dibawah ini 

<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>

Jika sudah anda tinggal Simpan.
Lalu lihatlah hasilnya. Untuk demonya anda bisa lihat disini

Terima kasih anda telah membaca artikel Membuat Flat Colour Pada Blog (2). Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: