[Toturial] Tạo Trang Responsive Color Picker Flat UI Cho Blogger - Blogspot

Color picker - đó là một bảng mã màu dành cho ngôn ngữ lập trình web html. Nó là một công cụ đắc lực cho lập trình viên web. Vây có cách làm đem nó lên blogger không? Hơn thế lại còn làm nó có giao diện phẳng (Flat UI). tất cả sẽ được giải đáp sau khi bạn thực hiện một thủ thuật sau.

Mục lục:
Mục Đích
Thực Hiện
Nâng Cao
Lời Kết

Mục Đích

Tạo cho web bạn thêm phong phú, đa dạng
Giao diện Flat UI rất đẹp
Có sẵn để khi nào cần khỏi cần phải tải màn phần mêm rồi các trang web khác cung cấp

Thực Hiện

1. Đầu tiên các bạn Vào Blogger - > Trang -> Trang Mới, nhập tiêu đề là Color Picker
2. Sau đó các bạn vào chế độ html, rồi toàn bộ code html sau vào trong đó:

HTML  <h2 style="text-align: center;">Responsive <span style="font-weight:700">Flat UI</span> Color Picker</h2>
  <div id="flatuanhnhim">
    <ul class="flatui">
      <li style="background: #5C97BF;"><span class="largecode"><span class="smallcode">Mã Màu</span> #5C97BF</span>
      </li>
      <li style="background: #4B77BE;"><span class="largecode"><span class="smallcode">Mã Màu</span> #4B77BE</span>
      </li>
      <li style="background: #1F3A93;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1F3A93</span>
      </li>
      <li style="background: #2574A9;"><span class="largecode"><span class="smallcode">Mã Màu</span> #2574A9</span>
      </li>
      <li style="background: #67809F;"><span class="largecode"><span class="smallcode">Mã Màu</span> #67809F</span>
      </li>
      <li style="background: #34495E;"><span class="largecode"><span class="smallcode">Mã Màu</span> #34495E</span>
      </li>
      <li style="background: #3A539B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #3A539B</span>
      </li>
      <li style="background: #1E8BC3;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1E8BC3</span>
      </li>
      <li style="background: #6BB9F0;"><span class="largecode"><span class="smallcode">Mã Màu</span> #6BB9F0</span>
      </li>
      <li style="background: #22313F;"><span class="largecode"><span class="smallcode">Mã Màu</span> #22313F</span>
      </li>
      <li style="background: #336E7B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #336E7B</span>
      </li>
      <li style="background: #19B5FE;"><span class="largecode"><span class="smallcode">Mã Màu</span> #19B5FE</span>
      </li>
      <li style="background: #89C4F4;"><span class="largecode"><span class="smallcode">Mã Màu</span> #89C4F4</span>
      </li>
      <li style="background: #2C3E50;"><span class="largecode"><span class="smallcode">Mã Màu</span> #2C3E50</span>
      </li>
      <li style="background: #3498DB;"><span class="largecode"><span class="smallcode">Mã Màu</span> #3498DB</span>
      </li>
      <li style="background: #22A7F0;"><span class="largecode"><span class="smallcode">Mã Màu</span> #22A7F0</span>
      </li>
      <li style="background: #94E0EE;"><span class="largecode"><span class="smallcode">Mã Màu</span> #94E0EE</span>
      </li>
      <li style="background: #52B3D9;"><span class="largecode"><span class="smallcode">Mã Màu</span> #52B3D9</span>
      </li>
      <li style="background: #59ABE3;"><span class="largecode"><span class="smallcode">Mã Màu</span> #59ABE3</span>
      </li>
      <li style="background: #26A65B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #26A65B</span>
      </li>
      <li style="background: #1E824C;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1E824C</span>
      </li>
      <li style="background: #00B16A;"><span class="largecode"><span class="smallcode">Mã Màu</span> #00B16A</span>
      </li>
      <li style="background: #2ABB9B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #2ABB9B</span>
      </li>
      <li style="background: #4DAF7C;"><span class="largecode"><span class="smallcode">Mã Màu</span> #4DAF7C</span>
      </li>
      <li style="background: #03A678;"><span class="largecode"><span class="smallcode">Mã Màu</span> #03A678</span>
      </li>
      <li style="background: #26C281;"><span class="largecode"><span class="smallcode">Mã Màu</span> #26C281</span>
      </li>
      <li style="background: #019875;"><span class="largecode"><span class="smallcode">Mã Màu</span> #019875</span>
      </li>
      <li style="background: #3FC380;"><span class="largecode"><span class="smallcode">Mã Màu</span> #3FC380</span>
      </li>
      <li style="background: #16A085;"><span class="largecode"><span class="smallcode">Mã Màu</span> #16A085</span>
      </li>
      <li style="background: #2ECC71;"><span class="largecode"><span class="smallcode">Mã Màu</span> #2ECC71</span>
      </li>
      <li style="background: #C5EFF7;"><span class="largecode"><span class="smallcode">Mã Màu</span> #C5EFF7</span>
      </li>
      <li style="background: #C8F7C5;"><span class="largecode"><span class="smallcode">Mã Màu</span> #C8F7C5</span>
      </li>
      <li style="background: #049372;"><span class="largecode"><span class="smallcode">Mã Màu</span> #049372</span>
      </li>
      <li style="background: #36D7B7;"><span class="largecode"><span class="smallcode">Mã Màu</span> #36D7B7</span>
      </li>
      <li style="background: #66CC99;"><span class="largecode"><span class="smallcode">Mã Màu</span> #66CC99</span>
      </li>
      <li style="background: #1BA39C;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1BA39C</span>
      </li>
      <li style="background: #1BBC9B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1BBC9B</span>
      </li>
      <li style="background: #65C6BB;"><span class="largecode"><span class="smallcode">Mã Màu</span> #65C6BB</span>
      </li>
      <li style="background: #BFBFBF;"><span class="largecode"><span class="smallcode">Mã Màu</span> #BFBFBF</span>
      </li>
      <li style="background: #ABB7B7;"><span class="largecode"><span class="smallcode">Mã Màu</span> #ABB7B7</span>
      </li>
      <li style="background: #DADFE1;"><span class="largecode"><span class="smallcode">Mã Màu</span> #DADFE1</span>
      </li>
      <li style="background: #95A5A6;"><span class="largecode"><span class="smallcode">Mã Màu</span> #95A5A6</span>
      </li>
      <li style="background: #C5DCE2;"><span class="largecode"><span class="smallcode">Mã Màu</span> #C5DCE2</span>
      </li>
      <li style="background: #BDC3C7;"><span class="largecode"><span class="smallcode">Mã Màu</span> #BDC3C7</span>
      </li>
      <li style="background: #EEEEEE;"><span class="largecode"><span class="smallcode">Mã Màu</span> #EEEEEE</span>
      </li>
      <li style="background: #D2D7D3;"><span class="largecode"><span class="smallcode">Mã Màu</span> #D2D7D3</span>
      </li>
      <li style="background: #F0E2C5;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F0E2C5</span>
      </li>
      <li style="background: #EB9532;"><span class="largecode"><span class="smallcode">Mã Màu</span> #EB9532</span>
      </li>
      <li style="background: #E67E22;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E67E22</span>
      </li>
      <li style="background: #F27935;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F27935</span>
      </li>
      <li style="background: #F9BF3B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F9BF3B</span>
      </li>
      <li style="background: #F7CA18;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F7CA18</span>
      </li>
      <li style="background: #F9690E;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F9690E</span>
      </li>
      <li style="background: #F39C12;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F39C12</span>
      </li>
      <li style="background: #D35400;"><span class="largecode"><span class="smallcode">Mã Màu</span> #D35400</span>
      </li>
      <li style="background: #F4D03F;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F4D03F</span>
      </li>
      <li style="background: #F5AB35;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F5AB35</span>
      </li>
      <li style="background: #EB974E;"><span class="largecode"><span class="smallcode">Mã Màu</span> #EB974E</span>
      </li>
      <li style="background: #F2784B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F2784B</span>
      </li>
      <li style="background: #F4B350;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F4B350</span>
      </li>
      <li style="background: #E87E04;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E87E04</span>
      </li>
      <li style="background: #E74C3C;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E74C3C</span>
      </li>
      <li style="background: #CF000F;"><span class="largecode"><span class="smallcode">Mã Màu</span> #CF000F</span>
      </li>
      <li style="background: #C0392B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #C0392B</span>
      </li>
      <li style="background: #D64541;"><span class="largecode"><span class="smallcode">Mã Màu</span> #D64541</span>
      </li>
      <li style="background: #EF4836;"><span class="largecode"><span class="smallcode">Mã Màu</span> #EF4836</span>
      </li>
      <li style="background: #96281B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #96281B</span>
      </li>
      <li style="background: #D91E18;"><span class="largecode"><span class="smallcode">Mã Màu</span> #D91E18</span>
      </li>
      <li style="background: #E26A6A;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E26A6A</span>
      </li>
      <li style="background: #FF0000;"><span class="largecode"><span class="smallcode">Mã Màu</span> #FF0000</span>
      </li>
      <li style="background: #F22613;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F22613</span>
      </li>
      <li style="background: #E08283;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E08283</span>
      </li>
      <li style="background: #9B59B6;"><span class="largecode"><span class="smallcode">Mã Màu</span> #9B59B6</span>
      </li>
      <li style="background: #8E44AD;"><span class="largecode"><span class="smallcode">Mã Màu</span> #8E44AD</span>
      </li>
      <li style="background: #BE90D4;"><span class="largecode"><span class="smallcode">Mã Màu</span> #BE90D4</span>
      </li>
      <li style="background: #BF55EC;"><span class="largecode"><span class="smallcode">Mã Màu</span> #BF55EC</span>
      </li>
      <li style="background: #9A12B3;"><span class="largecode"><span class="smallcode">Mã Màu</span> #9A12B3</span>
      </li>
      <li style="background: #913D88;"><span class="largecode"><span class="smallcode">Mã Màu</span> #913D88</span>
      </li>
      <li style="background: #722D6A;"><span class="largecode"><span class="smallcode">Mã Màu</span> #722D6A</span>
      </li>
      <li style="background: #740A4E;"><span class="largecode"><span class="smallcode">Mã Màu</span> #740A4E</span>
      </li>
    </ul>
  </div>
<style type="text/css">
/* Flat UI Color Picker */
#flatuanhnhim ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatuanhnhim ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatuanhnhim ul.flatui li:hover{z-index:4}
#flatuanhnhim ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatuanhnhim ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatuanhnhim ul.flatui li:after{content:'Nhấn Ctr + C Để Sao Chép';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatuanhnhim ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatuanhnhim ul.flatui li .largecode{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatuanhnhim ul.flatui li .smallcode{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatuanhnhim ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatuanhnhim ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatuanhnhim ul.flatui li{width:100%}}
#comments,#sidebar-wrapper {display:none!important;}
#post-wrapper {width:100%!important;}
</style>

2. Sau đó nhấn xuất bản
3. Thưởng thức thành quả

Demo
click to view

Nâng Cao

Để thay đổi tiêu đề

Các bạn tìm chữ <h2>Responsive <span style="font-weight:700">Flat UI</span> Color Picker</h2> rồi thay các chữ Responsive - Flat UI - Color Picker thành các chữ bạn muốn

Để thay đổi chữ Mã màu

Các bạn vào MS word hoặc notepad, notepad ++ tìm và thay thế chữ "Mã Màu" thành chữ bạn muốn

Để thay đổi chữ "Nhấn Ctr + C Để Sao Chép"

Cũng tìm và thay thế chữ đó thành chữ bạn muốn

Lời Kết

Vậy là mình đã hướng dẫn các tạo Trang Responsive Color Picker Flat UI Cho Blogger - Blogspot. Nếu có thắc mắc xin vui lòng liên hệ mình hoặc comment bên dưới. Chúc các bạn thành côn.

Tạo Trang Responsive Color Picker Flat UI Cho Blogger - Blogspot

Mục lục:

Mục Đích

Thực Hiện

Nâng Cao

Lời Kết

Comments (4) Cancel reply

Menu