Tùy biến nhãn (Label) màu sắc cho Blogspot (Blogger)

Hôm nay mình sẽ Hướng dẫn tùy biến nhãn màu sắc cho Blogspot (Blogger). Thủ thuật giúp làm đẹp nhãn trong Blog bạn đẹp hơn và ấn tượng hơn.

Tùy biến nhãn (Label) màu sắc cho Blogspot (Blogger)

Tiến hành

1. Các bạn vào Blogger >> Mẫu >> Chỉnh sửa HTML >> Tìm đến thẻ đóng ]]></b:skin> và thêm toàn bộ code sau vào trước nó.

#sidebar-wrapper{margin:auto;max-width:400px;}
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;margin:10px 10px 5px 10px}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#FFFEFC;color:#333;padding:0px;margin:5px;text-align:left;width:97%;transition:all .8s ease-out;text-transform:none;border:1px solid #fff;box-shadow:0px 0px 1px rgba(0,0,0,0.4);}
#sidebar-wrapper .Label li:hover {color:#0074D9;transition:all 0s ease-out;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:98%;background:#4fafe9;transition:all .8s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;transition:all 0s ease-out}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:35px;color:#787878;text-decoration:none;transition:all .8s ease-out}
#sidebar-wrapper .Label li a:before {font-family: fontawesome;content: "\f07c";padding-right: 10px !important;}
#sidebar-wrapper .Label li a:hover {color:#fff;transition:all 0s ease-out}
#sidebar-wrapper .Label li span{float:right;height:98%;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;display:inline-block;color:#666;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}
#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;right:-10px!important;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;right:-15px!important}
#sidebar-wrapper .label-size a:hover{color:#666;border-color:#4fafe9}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

2. Các bạn tiếp tục tìm đến thẻ đóng </body> và thêm toàn bộ code sau vào trước nó.

 (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://use.fontawesome.com/e3eb25f65e.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

3. Các bạn vào Bố cục >> Thêm tiện ích >> HTML/Javascript >> Và thêm toàn bộ code sau vào.

<div id="sidebar-wrapper">
<div class="sidebar section" id="sidebartab3"><div class="widget Label" data-version="1" id="Label1">
<h2>LABELS</h2>
<div class="widget-content list-label-widget-content">
<ul>
<li>
<a href='#'>
Blogger</a>
<span dir="ltr">(63)</span>
</li>
<li><a href='#'>
CSS</a>
<span dir="ltr">(23)</span>
</li>
<li><a href='#'>
HTML</a>
<span dir="ltr">(15)</span>
</li>
<li><a href='#'>
Templates</a>
<span dir="ltr">(5)</span>
</li>
<li><a href='#'>
Tools</a>
<span dir="ltr">(16)</span>
</li>
<li><a href='#'>
Umum</a>
<span dir="ltr">(24)</span>
</li>
<li><a href='#'>
Widget</a>
<span dir="ltr">(25)</span>
</li>
</ul>
</div>
</div></div>
  <div style='clear:both'/><br/>
<a href='http://upsot.blogspot.com/2016/08/widget-label-nhieu-mau-sac-cho-blogspot.html'>Back to the Tutorial</a>
</div>

4. Tùy chỉnh # thêm link nhãn của các bạn.
5. Lưu lại và tận hưởng thành quả.

Có lẽ bạn thích?