Share code tạo trang lấy mã màu cho Blogspot

Khi các bạn thiết kế 1 trang web, trang trí nó bằng những đoạn code thì không thể không nói đến màu sắc của trang web .Ngoài việc sử dụng tên của màu sắc thì bạn có thể sử dụng mã màu .Vậy làm cách nào để có những mã màu đó .Hôm nay mình sẽ hướng dẫn các bạn cách để tạo 1 trang mã hóa màu cho blog của bạn .

Lợi ích của việc tạo 1 bảng mã màu cho blogspot

Các lợi ích :

• Giúp blog của bạn trở nên thân thiện hơn với Google .
• Chứa 1 số màu mà bạn không biết tên .
• Làm Blog của bạn trở nên chuyên nghiệp hơn .
• Người dùng sẽ biết đến website-blog của bạn nhiều hơn .

Cách tạo trang lấy mã màu cho Blogspot

Các bước thực hiện :

Bước 1 : Chọn Trang => Tạo trang mới => Chọn chế độ HTML .

Bước 2 : Dán 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>

Bước 3 : Lưu lại và xem kết quả !

Các bạn có thể xem Demo :

Demo