Tạo trang lấy mã màu màu sắc cực đẹp cho Blogger (Blogspot)

Công cụ lấy mã màu - hay còn gọi là Color Picker là công cụ có sự kết hợp giữa HTML và CSS tạo nên một bảng mã màu rất có ích cho các lập trình web. Nào, giờ chúng ta bắt đầu tạo nó nhé.
- DEMO -
Tạo trang lấy mã màu màu sắc cực đẹp cho Blogger

Tiến hành

1. Các bạn vào Blogger >> Trang >> Trang mới >> Nhập tiêu đề >> Chuyển sang tab HTML >> thêm toàn bộ code sau vào:
 <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 và tận hưởng kết quả.
Lời Kết

Thủ thuật rất đơn giản, giao diện đẹp, có sẵn khi bạn cần lấy mã màu.
Các bạn có thể copy code trên rồi paste vào notepad ++ rồi bổ sung mã màu mà bạn muốn.
Nguồn: www.anhnhim.net
Hieu Dev Blog

Tạo trang lấy mã màu màu sắc cực đẹp cho Blogger (Blogspot)

Tạo trang lấy mã màu màu sắc cực đẹp cho Blogger

Tiến hành

Lời Kết

Có lẽ bạn thích?

1 comment

Post a Comment

Danh Mục

Blog Bạn Bè

Comments

Địa chỉ

Dịch vụ

Khám phá

Liên kết
