Assalamualaikum warahmatullahi wabarakatuh
Sebagai pengisi artikel pada postingan kali ini saya akan berbagi cara "Membuat Hack Color Flat UI" Mohon maaf jika saya belum bisa hadir pada blog anda sebelumnya. Tidak kado atau oleh oleh yang bermanfaat haya postingan sederhana dan apa adanya saja. Sebelumnya saya publikasikan post : Sitemap Sederhana. Dimana pada artikel tersebut belum saya share kodenya karena waktu saya yang sangat terbatas untuk online. Semoga pada kesempatan selanjutnya bisa saya bagikan jika ada yang menghendakinya.
Artikel selengkapnya blog ini klik : Daftar Isi Atau klik : Sitemap Elegance
Color Flat UI :
Bagi anda yang gemar mendesain template atau theme bloggger wordpress atau blog lainy. Kiranya hack color Flat UI yang instan tinggal copy dan pilih warna UI yang anda sukai jika tutorial ini terpasang pada blog anda. Sebetulnya hack color tanpa trik ini sudah tersedia pada software edite foto seperti Photoshop dan edite foto lainya yang menyediakan hack color. Tetapi alangkah praktir dan simple nya jika anda menggunakan hack color flat ui ini secara online di blog. Karena hasilnya lebih bagus dan dinamis.
Bagi anda yang berminat memasang Kode Warna Flat UI pada blog anda silahkan simak pemasanganya pada blog anda. Sebelumnya siapkan secangkir kopi plus kue nya jangan lupa bahan bakar Rokok nya.
Cara Memasang Color Flat UI :
Buat Laman baru atau Artikel baru pada blog anda dan masukan di bawah ini pada laman baru atau artikel baru anda. Memasang kan kode nya pada mode HTML jangan pada mode Composed, Berikut di bawah ini kode nya yang harus anda copy selamat berkreasi tetap SERSAN (serius dan santai)..
<style type="text/css">
#header-wrapper,.page-menu,.postmeta,#footer,#menu-wrapper,.sidebar-wrapper,.comments,h1.title,#credit{display:none;}
.content-wrapper{width:100%}</style>
<article>
<div class="post-wrap" id="post-243">
<ul class="grid">
<li class="item" style="background-color:#D24D57;">
<span class="color-name">Chestnut Rose</span>
<span class="hex-number">D24D57</span>
<span class="rgb-number">210, 77, 87</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-173">
<ul class="grid">
<li class="item" style="background-color:#F22613;">
<span class="color-name">Pomegranate</span>
<span class="hex-number">F22613</span>
<span class="rgb-number">242, 38, 19</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-169">
<ul class="grid">
<li class="item" style="background-color:#D91E18;">
<span class="color-name">Thunderbird</span>
<span class="hex-number">D91E18</span>
<span class="rgb-number">217, 30, 24</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-165">
<ul class="grid">
<li class="item" style="background-color:#96281B;">
<span class="color-name">Old Brick</span>
<span class="hex-number">96281B</span>
<span class="rgb-number">150, 40, 27</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-163">
<ul class="grid">
<li class="item" style="background-color:#EF4836;">
<span class="color-name">Flamingo</span>
<span class="hex-number">EF4836</span>
<span class="rgb-number">239, 72, 54</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-161">
<ul class="grid">
<li class="item" style="background-color:#D64541;">
<span class="color-name">Valencia</span>
<span class="hex-number">D64541</span>
<span class="rgb-number">214, 69, 65</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-159">
<ul class="grid">
<li class="item" style="background-color:#C0392B;">
<span class="color-name">Tall Poppy</span>
<span class="hex-number">C0392B</span>
<span class="rgb-number">192, 57, 43</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-157">
<ul class="grid">
<li class="item" style="background-color:#CF000F;">
<span class="color-name">Monza</span>
<span class="hex-number">CF000F</span>
<span class="rgb-number">207, 0, 15</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-155">
<ul class="grid">
<li class="item" style="background-color:#E74C3C;">
<span class="color-name">Cinnabar</span>
<span class="hex-number">E74C3C</span>
<span class="rgb-number">231, 76, 60</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-253">
<ul class="grid">
<li class="item" style="background-color:#DB0A5B;">
<span class="color-name">Razzmatazz</span>
<span class="hex-number">DB0A5B</span>
<span class="rgb-number">219, 10, 91</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-229">
<ul class="grid">
<li class="item" style="background-color:#F64747;">
<span class="color-name">Sunset Orange</span>
<span class="hex-number">F64747</span>
<span class="rgb-number">246, 71, 71</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-227">
<ul class="grid">
<li class="item" style="background-color:#F1A9A0;">
<span class="color-name">Wax Flower</span>
<span class="hex-number">F1A9A0</span>
<span class="rgb-number">241, 169, 160</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-233">
<ul class="grid">
<li class="item" style="background-color:#D2527F;">
<span class="color-name">Cabaret</span>
<span class="hex-number">D2527F</span>
<span class="rgb-number">210, 82, 127</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-197">
<ul class="grid">
<li class="item" style="background-color:#E08283;">
<span class="color-name">New York Pink</span>
<span class="hex-number">E08283</span>
<span class="rgb-number">224, 130, 131</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-221">
<ul class="grid">
<li class="item" style="background-color:#F62459;">
<span class="color-name">Radical Red</span>
<span class="hex-number">F62459</span>
<span class="rgb-number">246, 36, 89</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-175">
<ul class="grid">
<li class="item" style="background-color:#E26A6A;">
<span class="color-name">Sunglo</span>
<span class="hex-number">E26A6A</span>
<span class="rgb-number">226, 106, 106</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-240">
<ul class="grid">
<li class="item" style="background-color:#DCC6E0;">
<span class="color-name">Snuff</span>
<span class="hex-number">DCC6E0</span>
<span class="rgb-number">220, 198, 224</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-255">
<ul class="grid">
<li class="item" style="background-color:#663399;">
<span class="color-name">rebeccapurple</span>
<span class="hex-number">663399</span>
<span class="rgb-number">102, 51, 153</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-225">
<ul class="grid">
<li class="item" style="background-color:#674172;">
<span class="color-name">Honey Flower</span>
<span class="hex-number">674172</span>
<span class="rgb-number">103, 65, 114</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-217">
<ul class="grid">
<li class="item" style="background-color:#AEA8D3;">
<span class="color-name">Wistful</span>
<span class="hex-number">AEA8D3</span>
<span class="rgb-number">174, 168, 211</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-190">
<ul class="grid">
<li class="item" style="background-color:#913D88;">
<span class="color-name">Plum</span>
<span class="hex-number">913D88</span>
<span class="rgb-number">145, 61, 136</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-185">
<ul class="grid">
<li class="item" style="background-color:#9A12B3;">
<span class="color-name">Seance</span>
<span class="hex-number">9A12B3</span>
<span class="rgb-number">154, 18, 179</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-183">
<ul class="grid">
<li class="item" style="background-color:#BF55EC;">
<span class="color-name">Medium Purple</span>
<span class="hex-number">BF55EC</span>
<span class="rgb-number">191, 85, 236</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-181">
<ul class="grid">
<li class="item" style="background-color:#BE90D4;">
<span class="color-name">Light Wisteria</span>
<span class="hex-number">BE90D4</span>
<span class="rgb-number">190, 144, 212</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-179">
<ul class="grid">
<li class="item" style="background-color:#8E44AD;">
<span class="color-name">Studio</span>
<span class="hex-number">8E44AD</span>
<span class="rgb-number">142, 68, 173</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-177">
<ul class="grid">
<li class="item" style="background-color:#9B59B6;">
<span class="color-name">Wisteria</span>
<span class="hex-number">9B59B6</span>
<span class="rgb-number">155, 89, 182</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-277">
<ul class="grid">
<li class="item" style="background-color:#446CB3;">
<span class="color-name">San Marino</span>
<span class="hex-number">446CB3</span>
<span class="rgb-number">68,108,179</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-239">
<ul class="grid">
<li class="item" style="background-color:#E4F1FE;">
<span class="color-name">Alice Blue</span>
<span class="hex-number">E4F1FE</span>
<span class="rgb-number">228, 241, 254</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-235">
<ul class="grid">
<li class="item" style="background-color:#4183D7;">
<span class="color-name">Royal Blue</span>
<span class="hex-number">4183D7</span>
<span class="rgb-number">65, 131, 215</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-87">
<ul class="grid">
<li class="item" style="background-color:#59ABE3;">
<span class="color-name">Picton Blue</span>
<span class="hex-number">59ABE3</span>
<span class="rgb-number">89, 171, 227</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-223">
<ul class="grid">
<li class="item" style="background-color:#81CFE0;">
<span class="color-name">Spray</span>
<span class="hex-number">81CFE0</span>
<span class="rgb-number">129, 207, 224</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-206">
<ul class="grid">
<li class="item" style="background-color:#52B3D9;">
<span class="color-name">Shakespeare</span>
<span class="hex-number">52B3D9</span>
<span class="rgb-number">82, 179, 217</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-116">
<ul class="grid">
<li class="item" style="background-color:#C5EFF7;">
<span class="color-name">Humming Bird</span>
<span class="hex-number">C5EFF7</span>
<span class="rgb-number">197, 239, 247</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-83">
<ul class="grid">
<li class="item" style="background-color:#22A7F0;">
<span class="color-name">Picton Blue</span>
<span class="hex-number">22A7F0</span>
<span class="rgb-number">34, 167, 240</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-73">
<ul class="grid">
<li class="item" style="background-color:#3498DB;">
<span class="color-name">Curious Blue</span>
<span class="hex-number">3498DB</span>
<span class="rgb-number">52, 152, 219</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-75">
<ul class="grid">
<li class="item" style="background-color:#2C3E50;">
<span class="color-name">Madison</span>
<span class="hex-number">2C3E50</span>
<span class="rgb-number">44, 62, 80</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-85">
<ul class="grid">
<li class="item" style="background-color:#19B5FE;">
<span class="color-name">Dodger Blue</span>
<span class="hex-number">19B5FE</span>
<span class="rgb-number">25, 181, 254</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-101">
<ul class="grid">
<li class="item" style="background-color:#336E7B;">
<span class="color-name">Ming</span>
<span class="hex-number">336E7B</span>
<span class="rgb-number">51, 110, 123</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-49">
<ul class="grid">
<li class="item" style="background-color:#22313F;">
<span class="color-name">Ebony Clay</span>
<span class="hex-number">22313F</span>
<span class="rgb-number">34, 49, 63</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-47">
<ul class="grid">
<li class="item" style="background-color:#6BB9F0;">
<span class="color-name">Malibu</span>
<span class="hex-number">6BB9F0</span>
<span class="rgb-number">107, 185, 240</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-45">
<ul class="grid">
<li class="item" style="background-color:#1E8BC3;">
<span class="color-name">Curious Blue</span>
<span class="hex-number">1E8BC3</span>
<span class="rgb-number">30, 139, 195</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-43">
<ul class="grid">
<li class="item" style="background-color:#3A539B;">
<span class="color-name">Chambray</span>
<span class="hex-number">3A539B</span>
<span class="rgb-number">58, 83, 155</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-41">
<ul class="grid">
<li class="item" style="background-color:#34495E;">
<span class="color-name">Pickled Bluewood</span>
<span class="hex-number">34495E</span>
<span class="rgb-number">52, 73, 94</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-39">
<ul class="grid">
<li class="item" style="background-color:#67809F;">
<span class="color-name">Hoki</span>
<span class="hex-number">67809F</span>
<span class="rgb-number">103, 128, 159</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-37">
<ul class="grid">
<li class="item" style="background-color:#2574A9;">
<span class="color-name">Jelly Bean</span>
<span class="hex-number">2574A9</span>
<span class="rgb-number">37, 116, 169</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-122">
<ul class="grid">
<li class="item" style="background-color:#1F3A93;">
<span class="color-name">Jacksons Purple</span>
<span class="hex-number">1F3A93</span>
<span class="rgb-number">31, 58, 147</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-199">
<ul class="grid">
<li class="item" style="background-color:#89C4F4;">
<span class="color-name">Jordy Blue</span>
<span class="hex-number">89C4F4</span>
<span class="rgb-number">137, 196, 244</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-34">
<ul class="grid">
<li class="item" style="background-color:#4B77BE;">
<span class="color-name">Steel Blue</span>
<span class="hex-number">4B77BE</span>
<span class="rgb-number">75, 119, 190</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-23">
<ul class="grid">
<li class="item" style="background-color:#5C97BF;">
<span class="color-name">Fountain Blue</span>
<span class="hex-number">5C97BF</span>
<span class="rgb-number">92, 151, 191</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-270">
<ul class="grid">
<li class="item" style="background-color:#4ECDC4;">
<span class="color-name">Medium Turquoise</span>
<span class="hex-number">4ECDC4</span>
<span class="rgb-number">78,205,196</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-251">
<ul class="grid">
<li class="item" style="background-color:#A2DED0;">
<span class="color-name">Aqua Island</span>
<span class="hex-number">A2DED0</span>
<span class="rgb-number">162, 222, 208</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-249">
<ul class="grid">
<li class="item" style="background-color:#87D37C;">
<span class="color-name">Gossip</span>
<span class="hex-number">87D37C</span>
<span class="rgb-number">135, 211, 124</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-241">
<ul class="grid">
<li class="item" style="background-color:#90C695;">
<span class="color-name">Dark Sea Green</span>
<span class="hex-number">90C695</span>
<span class="rgb-number">144, 198, 149</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-51">
<ul class="grid">
<li class="item" style="background-color:#26A65B;">
<span class="color-name">Eucalyptus</span>
<span class="hex-number">26A65B</span>
<span class="rgb-number">38, 166, 91</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-237">
<ul class="grid">
<li class="item" style="background-color:#03C9A9;">
<span class="color-name">Caribbean Green</span>
<span class="hex-number">03C9A9</span>
<span class="rgb-number">3, 201, 169</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-213">
<ul class="grid">
<li class="item" style="background-color:#68C3A3;">
<span class="color-name">Silver Tree</span>
<span class="hex-number">68C3A3</span>
<span class="rgb-number">104, 195, 163</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-98">
<ul class="grid">
<li class="item" style="background-color:#65C6BB;">
<span class="color-name">Downy</span>
<span class="hex-number">65C6BB</span>
<span class="rgb-number">101, 198, 187</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-96">
<ul class="grid">
<li class="item" style="background-color:#1BBC9B;">
<span class="color-name">Mountain Meadow</span>
<span class="hex-number">1BBC9B</span>
<span class="rgb-number">27, 188, 155</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-94">
<ul class="grid">
<li class="item" style="background-color:#1BA39C;">
<span class="color-name">Light Sea Green</span>
<span class="hex-number">1BA39C</span>
<span class="rgb-number">27, 163, 156</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-89">
<ul class="grid">
<li class="item" style="background-color:#66CC99;">
<span class="color-name">Medium Aquamarine</span>
<span class="hex-number">66CC99</span>
<span class="rgb-number">102, 204, 153</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-202">
<ul class="grid">
<li class="item" style="background-color:#36D7B7;">
<span class="color-name">Turquoise</span>
<span class="hex-number">36D7B7</span>
<span class="rgb-number">54, 215, 183</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-118">
<ul class="grid">
<li class="item" style="background-color:#C8F7C5;">
<span class="color-name">Madang</span>
<span class="hex-number">C8F7C5</span>
<span class="rgb-number">200, 247, 197</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-208">
<ul class="grid">
<li class="item" style="background-color:#86E2D5;">
<span class="color-name">Riptide</span>
<span class="hex-number">86E2D5</span>
<span class="rgb-number">134, 226, 213</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-71">
<ul class="grid">
<li class="item" style="background-color:#2ECC71;">
<span class="color-name">Shamrock</span>
<span class="hex-number">2ECC71</span>
<span class="rgb-number">46, 204, 113</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-69">
<ul class="grid">
<li class="item" style="background-color:#16a085;">
<span class="color-name">Mountain Meadow</span>
<span class="hex-number">16a085</span>
<span class="rgb-number">22, 160, 133</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-67">
<ul class="grid">
<li class="item" style="background-color:#3FC380;">
<span class="color-name">Emerald</span>
<span class="hex-number">3FC380</span>
<span class="rgb-number">63, 195, 128</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-65">
<ul class="grid">
<li class="item" style="background-color:#019875;">
<span class="color-name">Green Haze</span>
<span class="hex-number">019875</span>
<span class="rgb-number">1, 152, 117</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-61">
<ul class="grid">
<li class="item" style="background-color:#03A678;">
<span class="color-name">Free Speech Aquamarine</span>
<span class="hex-number">03A678</span>
<span class="rgb-number">3, 166, 120</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-59">
<ul class="grid">
<li class="item" style="background-color:#4DAF7C;">
<span class="color-name">Ocean Green</span>
<span class="hex-number">4DAF7C</span>
<span class="rgb-number">77, 175, 124</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-57">
<ul class="grid">
<li class="item" style="background-color:#2ABB9B;">
<span class="color-name">Niagara</span>
<span class="hex-number">2ABB9B</span>
<span class="rgb-number">42, 187, 155</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-55">
<ul class="grid">
<li class="item" style="background-color:#00B16A;">
<span class="color-name">Jade</span>
<span class="hex-number">00B16A</span>
<span class="rgb-number">0, 177, 106</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-53">
<ul class="grid">
<li class="item" style="background-color:#1E824C;">
<span class="color-name">Salem</span>
<span class="hex-number">1E824C</span>
<span class="rgb-number">30, 130, 76</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-120">
<ul class="grid">
<li class="item" style="background-color:#049372;">
<span class="color-name">Observatory</span>
<span class="hex-number">049372</span>
<span class="rgb-number">4, 147, 114</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-63">
<ul class="grid">
<li class="item" style="background-color:#26C281;">
<span class="color-name">Jungle Green</span>
<span class="hex-number">26C281</span>
<span class="rgb-number">38, 194, 129</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-267">
<ul class="grid">
<li class="item" style="background-color:#F5D76E;">
<span class="color-name">Cream Can</span>
<span class="hex-number">F5D76E</span>
<span class="rgb-number">245, 215, 110</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-132">
<ul class="grid">
<li class="item" style="background-color:#F7CA18;">
<span class="color-name">Ripe Lemon</span>
<span class="hex-number">F7CA18</span>
<span class="rgb-number">247, 202, 24</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-141">
<ul class="grid">
<li class="item" style="background-color:#F4D03F;">
<span class="color-name">Saffron</span>
<span class="hex-number">F4D03F</span>
<span class="rgb-number">244, 208, 63</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-264">
<ul class="grid">
<li class="item" style="background-color:#FDE3A7;">
<span class="color-name">Cape Honey</span>
<span class="hex-number">FDE3A7</span>
<span class="rgb-number">253, 227, 167</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-247">
<ul class="grid">
<li class="item" style="background-color:#F89406;">
<span class="color-name">California</span>
<span class="hex-number">F89406</span>
<span class="rgb-number">248, 148, 6</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-124">
<ul class="grid">
<li class="item" style="background-color:#EB9532;">
<span class="color-name">Fire Bush</span>
<span class="hex-number">EB9532</span>
<span class="rgb-number">235, 149, 50</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-151">
<ul class="grid">
<li class="item" style="background-color:#E87E04;">
<span class="color-name">Tahiti Gold</span>
<span class="hex-number">E87E04</span>
<span class="rgb-number">232, 126, 4</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-149">
<ul class="grid">
<li class="item" style="background-color:#F4B350;">
<span class="color-name">Casablanca</span>
<span class="hex-number">F4B350</span>
<span class="rgb-number">244, 179, 80</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-147">
<ul class="grid">
<li class="item" style="background-color:#F2784B;">
<span class="color-name">Crusta</span>
<span class="hex-number">F2784B</span>
<span class="rgb-number">242, 120, 75</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-145">
<ul class="grid">
<li class="item" style="background-color:#EB974E;">
<span class="color-name">Jaffa</span>
<span class="hex-number">EB974E</span>
<span class="rgb-number">235, 151, 78</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-143">
<ul class="grid">
<li class="item" style="background-color:#F5AB35;">
<span class="color-name">Lightning Yellow</span>
<span class="hex-number">F5AB35</span>
<span class="rgb-number">245, 171, 53</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-139">
<ul class="grid">
<li class="item" style="background-color:#D35400;">
<span class="color-name">Burnt Orange</span>
<span class="hex-number">D35400</span>
<span class="rgb-number">211, 84, 0</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-137">
<ul class="grid">
<li class="item" style="background-color:#F39C12;">
<span class="color-name">Buttercup</span>
<span class="hex-number">F39C12</span>
<span class="rgb-number">243, 156, 18</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-134">
<ul class="grid">
<li class="item" style="background-color:#F9690E;">
<span class="color-name">Ecstasy</span>
<span class="hex-number">F9690E</span>
<span class="rgb-number">249, 105, 14</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-130">
<ul class="grid">
<li class="item" style="background-color:#F9BF3B;">
<span class="color-name">Sandstorm</span>
<span class="hex-number">F9BF3B</span>
<span class="rgb-number">249, 191, 59</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-128">
<ul class="grid">
<li class="item" style="background-color:#F27935;">
<span class="color-name">Jaffa</span>
<span class="hex-number">F27935</span>
<span class="rgb-number">242, 121, 53</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-126">
<ul class="grid">
<li class="item" style="background-color:#E67E22;">
<span class="color-name">Zest</span>
<span class="hex-number">E67E22</span>
<span class="rgb-number">230, 126, 34</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-272">
<ul class="grid">
<li class="item" style="background-color:#ececec;">
<span class="color-name">White Smoke</span>
<span class="hex-number">ececec</span>
<span class="rgb-number">236,236,236</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-245">
<ul class="grid">
<li class="item" style="background-color:#6C7A89;">
<span class="color-name">Lynch</span>
<span class="hex-number">6C7A89</span>
<span class="rgb-number">108, 122, 137</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-112">
<ul class="grid">
<li class="item" style="background-color:#D2D7D3;">
<span class="color-name">Pumice</span>
<span class="hex-number">D2D7D3</span>
<span class="rgb-number">210, 215, 211</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-204">
<ul class="grid">
<li class="item" style="background-color:#EEEEEE;">
<span class="color-name">Gallery</span>
<span class="hex-number">EEEEEE</span>
<span class="rgb-number">238, 238, 238</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-110">
<ul class="grid">
<li class="item" style="background-color:#BDC3C7;">
<span class="color-name">Silver Sand</span>
<span class="hex-number">BDC3C7</span>
<span class="rgb-number">189, 195, 199</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-108">
<ul class="grid">
<li class="item" style="background-color:#ECF0F1;">
<span class="color-name">Porcelain</span>
<span class="hex-number">ECF0F1</span>
<span class="rgb-number">236, 240, 241</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-106">
<ul class="grid">
<li class="item" style="background-color:#95A5A6;">
<span class="color-name">Cascade</span>
<span class="hex-number">95A5A6</span>
<span class="rgb-number">149, 165, 166</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-104">
<ul class="grid">
<li class="item" style="background-color:#DADFE1;">
<span class="color-name">Iron</span>
<span class="hex-number">DADFE1</span>
<span class="rgb-number">218, 223, 225</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-81">
<ul class="grid">
<li class="item" style="background-color:#ABB7B7;">
<span class="color-name">Edward</span>
<span class="hex-number">ABB7B7</span>
<span class="rgb-number">171, 183, 183</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-114">
<ul class="grid">
<li class="item" style="background-color:#F2F1EF;">
<span class="color-name">Cararra</span>
<span class="hex-number">F2F1EF</span>
<span class="rgb-number">242, 241, 239</span>
</li>
</div>
<!--post--> </article> <article> <div class="post-wrap" id="post-79">
<ul class="grid">
<li class="item" style="background-color:#BFBFBF;">
<span class="color-name">Silver</span>
<span class="hex-number">BFBFBF</span>
<span class="rgb-number">191, 191, 191</span>
</li>
</div>
<!--post--> </article> </div>
<div style="clear:both;">
</div>
<div class="footer">
<ul class="six columns" id="social">
<li id="g-plusone">
<div class='likes'>
<!-- Place this tag where you want the +1 button to render. -->
<div class='g-plusone' data-size='medium'/>
<!-- Place this tag after the last +1 button tag. -->
</div>
</li>
<li id="facebook">
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
</li>
</ul>
<div class="three columns me">
<h4>
<a href="http://karristaent.blogspot.com" rel=" target="_blank" title="Karrysta">Karrysta</a></h4>
</div>
</div>Simpan Jquery js di bawah ini tepat di bawah kode yang diatas :
<link rel='stylesheet' id='portfolio-css' href='http://www.flatuicolorpicker.com/wp-content/themes/flatuicolor/css/portfolio-fluid.css' type='text/css' media='all' /> <link rel='stylesheet' id='googleFonts-css' href='http://fonts.googleapis.com/css?family=Montserrat%3A400%2C700' type='text/css' media='all' /> <link rel='stylesheet' id='base-css' href='http://www.flatuicolorpicker.com/wp-content/themes/flatuicolor/base.css' type='text/css' media='all' /> <link rel='stylesheet' id='skeleton-css' href='http://www.flatuicolorpicker.com/wp-content/themes/flatuicolor/skeleton.css' type='text/css' media='all' /> <link rel='stylesheet' id='style-css' href='http://www.flatuicolorpicker.com/wp-content/themes/flatuicolor/style.css' type='text/css' media='all' /> <script type='text/javascript' src='http://www.flatuicolorpicker.com/wp-content/themes/flatuicolor/js/modernizr.custom.js'></script>
Untuk DEMO Tampilan dari Kode Warna Flat UI silahkan klik button dibawah ini
Setelah cara pemasangan KodE warna flat ui terpasang pada laman baru atau artikel baru di blog anda. Jika sesuai menurut petunjuk diatas silahkan klik Publikasikan.
31 komentar
hebat2..mas saud jago.. otakatik kode2 an..
selamat beraktifitas sj Kang Saud..!,
semakin sgar sj nh.. desain warna webnya Kakak Saud..!
o gitu ya cara membuat kode flat ui mas..nggak sulit ya ternyata.
masih sibuk yamas,semoga pekerjaannya cepet kelar
jangan lupa minum kopi
Saya langsung liat demonya.. ternyata Kombinasi kode warnanya banyak juga mas... tapi warna kesukaan saya kok gak ada ya Blue Flash #0000ff
waduuuh Mas Fajri nie ko sama dengan saya sih, saya juga suka bingit sama warna biru :)
Selamat malam Mas Karryst...piye kabare?
Seperti biasa mas cuma bisa ikutan nyimak aja kalo soal yang beginian mah, sepertinya Mas Karryst'nya masih sibuk ya...saya cuma bisa bantu doa aja mas, semoga pekerjaannya lancar jaya, salam sukses slalu :)
Amiin.....
saya lagi seruput kopi nas mas yan, mau ndak?
siapin aja selangnya ya :D
siap sersan, hehe. akromin boleh juga, mas. jadi sama kayak anggota :D
warna flat UI memang lebih kalem yah. seperti yang banyak digunakan di microsoft. tidak begitu solid warnanya. tapi elegan.
ikut duduk dulu yah mas ,,,istirht bntar ,,, tadi bs muter2 ke tetangga belakang ,,, :)
kebetulan kode warna yang selama ini takpake, kode warna google error, jadi tak ganti ah pake kode warna ini.
salam sehat dan ceria selalu mang
Tampilannya Warna Flat UI keren mas. Ngiler saya, jadi pengen nyoba :)
Kalemnya kayak saya.
Keep calm..
Kalau aku udah pernah nyoba biar tambah gaul.
wih pertamax nih mkasih infonya kang saud :)
"Assalamu'alaikum" "Wa'alaikum salam" lama tdk berkunjung kemari, duduk manis saja sambil menyimak ^_^
ikut mampir kemari sambil menyimak :)
Kode warna flat memang sangat bagus sekali ya mas... tidak terlalu norak dan minimalis
nyimak aja dipelototoin juga kaga mudeng ekeke salam kenal :)
boleh yaa komen sama diatas wkwkwk dua akun nih skalian BW hehehe
Waahhh, ternyata ahli template ya pak, btw bisa tolong saya gak pak? dari kemarin pusing utak-atik template untuk mengatur padding-bottom blog tapi sampai sekarang belum beres juga :(
Keren mas...saya coba pasang yah.
Hai, Bang.. Apa kabar? :D
tak cobain dulu caranya mas,kayaknya bagus ni buat belajar bikin warna :)
warnanya asyik,
cukup seru dimata
thanks gan
Makasih mas Bro informasinya akan aku coba semoga berhasil. Selamat dan sukses selalu
izin belajar gan, ane masih pemula blogger, jadi nggak tahu sama kode2an gan
bacanya aja sampai kliengan gan, hehe, sukanya yang instan2 ane, bdw thx ilmunya
kayaknya mas saud sama seperti saya...lagi g ada waktu untuk ngeblok...hehehe
menarik sekali mas, mampir juga ke website saya http://www.citramebeljepara.com/
Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini
Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower