Membuat Tools Kumpulan Warna Flat di Halaman Statis Blog



Flat Color

Hai sobat Blogger. Saya dapat request artikel lagi dari +wahyu lazzuardy yang menanyakan tentang "Membuat Tools Kumpulan Warna Flat di Halaman Statis Blog". Dan kali ini Click and Skip akan membahasnya.

Tools ini memudahkan kita untuk memilih warna yang cocok untuk diterapkan. Karena warna yang disediakan sangat menarik. Tidak perlu basa-basi lagi, ini dia:

1. Log in Blog
2. Klik Laman> Laman baru
3. Beralih dari Compose ke HTML
4. Copy kode di bawah lalu paste di kolom HTML laman

<div style="background: #fff; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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; float: left; margin: 0 auto; 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>
5. Publikasikan


Oh iya, maaf saya pernah berjanji untuk memposting ini di tanggal 11 atau 12. Tetapi, karena tadi saya ketiduran dan kelewatan sampai jam 1 pagi tanggal 13 :p


Semoga bermanfaat :)

Custom Search

2 Responses to "Membuat Tools Kumpulan Warna Flat di Halaman Statis Blog"

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. tutorial ini sangat mudah untuk dipahami. Trimakasih sudah berbagi

    ReplyDelete

Dilarang mengiklan di kolom komentar
Gunakan format www[dot]weblog[dot]com untuk menunjukkan link blog
dan gunakan format email[at]gmail[dot]com untuk menunjukkan email

Back to top