kali ini saya akan membagikan tutorial tool flat ui color generator, awalnya saya sangat kesulitan mencari tool ini di google yang bisa di pasang di blog, setelah berbagai macam keyword saya coba untuk mendapatkan tool ini di blog tapi hasilnya terus nihil, karena sebagian besar blog hanya memberi tool ini untuk di gunakan para pengunjungnya dan tidak berbagi bagaimana cara memasang tool ini di blog.
maka dari itu untuk memudahkan kalian mendapkan tool ini dan memasangnya di blog kalian, disini saya akan berbagi tutorialnya yang sangatlah mudah untuk memasangnya diblog.!!
Untuk yang berminat memasangya di blog kalian, silahkan ikuti tahapan dibawah ini yang dimana caranya simpel dan mudah meskipun masih newbie tapi saya yakin ini sangatlah mudah.
Silahkan lihat demonya terlebih dahulu untuk melihat lebih jelas.
Perhatikan langkah-langkah berikut untuk pemasangan.
Install
1. Pertama masuk ke Edit Template pada Dashboard lalu copy paste kode CSS dibawah ini tepat di atas </style> atau ]]></b:skin>. /* Flat UI Tools-4blog.blogspot.com*/
.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%;}}
Lebih baik lagi gunakan tag kondisional untuk halaman statis agar ukuran postingan lebih besar dengan menghilagkan sidebar wrapper.
2. Kedua buat halaman baru pada page statis (laman). Pindahkan Compose menjadi HTML lalu copy paste kode di bawah ini pada HTML laman postingan.
<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>
3. Publikasikan dan lihat hasilnya.
Demikianlah Tutorial cara membuat Flat UI Color di blog. Untuk yang kurang paham dan ingin bertanya silahkan berkomentar.
Tambah komentar
* Jika ada masalah dengan Tools diatas, berkomentarlah.
Info Konversi Kode OOT Smiley