Thêm Tiện Ích Color Picker Cho Blogger

         Color Picker - là mã màu của ngôn ngữ lập trình HTML. Vì vậy nếu bạn là một Admin của Blog nào đó, bạn có thể thêm tiện ích này vào trang của bạn, nó có thể làm tăng sức hút cho Blog bạn hoặc không để cho blog phô trương chỉ một chủ đề.

Thêm Tiện Ích Color Picker Cho Blogger

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

 <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>

Có lẽ bạn thích?

• Tạo nút gọi điện nhanh (Quick alo phone) cho Blogspot
• Tạo trang lấy mã màu màu sắc cực đẹp cho Blogger (Blogspot)
• Code đếm ngược thời gian ngày Tết hay

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

Demo

Nếu như bạn không lấy được code thì lấy code dự phòng Tại Đây