CARA MEMBUAT FLAT UI COLOR PADA HALAMAN STATIS

Hai sobat, ane hadir lagi di kehidupan sobat. Flat UI color berguna untuk mengetahui warna-warna dalam code HTML (mungkin). Mungkin tutorial ini kurang berguna, tapi apa salahnya, biar dikira jago HTML gitu hehehe. Ok langsung aja, daripada ane makin gak jelas...........

1. Buka blogger.com
2. Buka opsi Laman terus buat Laman Baru
3. Copy code ini di tab HTML jangan compose

<div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #131426; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#131426</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #15589E; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#15589E</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #1B1B1B; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#1B1B1B</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #1B1C1E; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#1B1C1E</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #232323; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#232323</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #232A2B; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#232A2B</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #277FBF; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#277FBF</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #2A2A2A; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#2A2A2A</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #2A7BBA; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#2A7BBA</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #2D2D2D; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#2D2D2D</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #2D3E50; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#2D3E50</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #2D3E52; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#2D3E52</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #2F3E48; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#2F3E48</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #2FCDB4; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#2FCDB4</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #32425C; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#32425C</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #363F48; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#363F48</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #3D3D45; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#3D3D45</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #3DA3A2; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#3DA3A2</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #40A5C3; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#40A5C3</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #440136; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#440136</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #459BB6; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#459BB6</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #47AADD; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#47AADD</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #4C5262; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#4C5262</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #4EA88F; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#4EA88F</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #50419D; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#50419D</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #61767D; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#61767D</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #69C3A0; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#69C3A0</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #702E90; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#702E90</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #758D7D; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#758D7D</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #77BAB1; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#77BAB1</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #7ACCC8; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#7ACCC8</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #84267E; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#84267E</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #88B922; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#88B922</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #932256; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#932256</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #ABD6BA; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#ABD6BA</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #AF2C0E; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#AF2C0E</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #B0D9F5; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover"><span style="color: black;">#B0D9F5</span></div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #D49E99; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#D49E99</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #D81E28; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#D81E28</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #DC3C48; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#DC3C48</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #E2614C; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#E2614C</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #E56967; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#E56967</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F0F0F0; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover"><span style="color: #888888;">#F0F0F0</span></div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F14E4F; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#F14E4F</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F1A744; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#F1A744</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F3F3EB; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover"><span style="color: #888888;">#F3F3EB</span></div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F48067; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#F48067</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F4F4F4; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover"><span style="color: #888888;">#F4F4F4</span></div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F6D66F; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#F6D66F</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F7C56C; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#F7C56C</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F8823C; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#F8823C</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F8C492; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#F8C492</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #FA6800; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#FA6800</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #FCD475; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#FCD475</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #FDC800; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#FDC800</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #FEED48; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover"><span style="color: black;">#FEED48</span></div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #FF8850; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#FF8850</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #FFB900; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover">#FFB900</div></div></div><div style="background:#fff;margin:0 auto;float:left;padding:9px;"><div style="background: #F4EF6F; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 120px; padding: 10px; width: 120px;"><div class="uihover"><span style="color: black;">#F4EF6F</span></div></div></div><b:if cond="data:blog.pageType == "http://arlinadesign.blogspot.com/p/flat-ui-color.html""> <style scoped="" type="text/css">
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;text-align:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.uihover{opacity:0;width:100%;height:100%;transition: all 0.3s ease-in-Out;}
.uihover:hover{opacity:1;transition: all 0.3s ease-in-Out;-moz-animation: fadeIn 0.3s ease-in;-webkit-animation: fadeIn 0.3s ease-in;animation: fadeIn 0.3s ease-in;}
.post-inner {padding:0 0 0 0;margin:0 auto;}
</style> </b:if>
<div style='clear:both;'></div>

4. Kemudian klik publikasikan

• Demo

sumber : arlinadesign.blogspot.com/p/flat-ui-color.html

Subscribe to receive free email updates: