Seo nhãn (Label) trên Widget chuẩn của Blogger

Mặc định, để tạo nhãn Label theo chương mục trên Blogger, mình thường hay sử dụng thiết kế chuẩn của nó. Blogger là một ứng dụng thiết kế Web của Google, luôn luôn có sẳn các thiết kế chuẩn. Nhiều tiện ích được phát triển và tích hợp ở đây. Trên nền tảng Layout, có sẳn cả một giao diện để thiết kế bố cục cho một Website mà bạn đã từng thấy, có nghĩa là bạn muốn Add Widget thêm các tiện ích hiển thị, chỉ cần Click chuột vào đó và chọn lựa.

Tuy nhiên, Blogger chỉ cung ứng những thứ đủ xài, không tốn phí nên chúng ta cần phải tùy biến nhiều thứ lắm, để chúng trở thành cái của riêng ta. Widget Label cũng vậy, trông rất đơn điệu, làm hoài cũng chán. Ở phần thiết kế Template, vào Edit Html, bạn có thể tùy biến được rất nhiều trên chính Source code của nó.

Để hiểu thêm nhiều về cách thiết kế Web trên nền tảng Blogger, bạn có thể vào tham khảo bài: 

• Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
• Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot

Nếu như các bạn đã biết rồi, có thể vào thẳng vấn đề trong Blogger với các bước như sau:

- Layout: Phải có sẳn Widget Label, nếu không có phải chịu khó chọn Add Widget (thêm tiện ích), và chọn tên Widget Label để thêm vào.

- Template: Bạn vào Edit Html(Chỉnh sữa mẫu). Nhấn Ctrl+F tìm thẻ: </b:skin> và chép dán Source dưới đây lên phía trên nó: (Tùy kiểu mà bạn muốn)

Kiểu 1:

.Label a {
    padding-left: 20px;
    background: #000;
    padding: 0 10px;
    color: #fff!important;
    border-radius: 70px;
    -moz-border-radius: 70px;
    height: 27px;
    line-height: 32px;
    text-transform: uppercase;
    text-decoration: none;
    border: none !important;
    -webkit-transition: all .3s ease-in-out !important;
    t: 20pxt: 20px;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 10px;
}
.Label a:hover {
    color: #000 !important;
    background: #ff0;
}

Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. Mình cũng đã làm như thế. Có thể các bạn vào phần demo dưới để xem thử nhé.!

http://ketbancungkhanhnguyen5.blogspot.com/









Kiểu 2:



.widget li, .BlogArchive #ArchiveList ul.flat li{  list-style: none;
  padding: .25em 0;
  margin: 0;
  text-indent: 0;}
.label-size {
float: left;
font-size: 13px;
}
.list-label-widget-content ul,
.list-label-widget-content li {
list-style: none outide none;
}
.list-label-widget-content li a {
background: #F3F3F3;
color: #525252;
border: 1px solid #E2E2E2;
border-radius: 3px;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 153px;
}
.list-label-widget-content li span {
color: orangered;
background: #F3F3F3;
border-radius: 3px;
min-width: 40px;
float: right;
padding: 6px;
margin-bottom: 5px;
text-align: center;
border: 1px solid #E2E2E2;
}
.list-label-widget-content li span:first-child {
background: #F3F3F3;
border: 1px solid #E2E2E2;
border-radius: 3px;
border-right: 10px solid;
border-left: 10px solid;
width: 113px !important;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 250px;
}
.list-label-widget-content li a:hover,
#footer-nav .list-label-widget-content li a:hover {
background: orangered;
color: #fff;
}
.cloud-label-widget-content .label-size {
font-size: 100%;
float: left;
}
.cloud-label-widget-content .label-size a {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {
background-color: #FD4326;
color: #FFF;
text-decoration: none;
transition: all 0.2s ease-out 0s;
}
.cloud-label-widget-content .label-size span {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.cloud-label-widget-content .label-size span:first-child,
.cloud-label-widget-content .label-size span:first-child span:nth-child(2) {
background: #FD4326;
color: #FFF;
}

Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. 






http://ketbancungkhanhnguyen7.blogspot.com/









Kiểu 3:
- Thêm đoạn css sau trên ]]></b:skin>



.Label ul{margin:0!important;padding:0!important;list-style-type:none!important}
.Label ul li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 0 10px!important}
.Label ul li a{display:block;position:relative;margin:10px 0!important;background:#17b38f;padding:10px 0 10px 20px!important;font-size:14px;line-height:20px;color:#fff!important;text-decoration:none}
.Label ul li a:hover{color:#fff!important;text-decoration:none}
.Label ul li a:hover:after{background:#ff4e47}
.Label ul li a:before{content:'';position:absolute;top:0;left:-10px;width:0;height:0;border-top:20px solid transparent;border-right:10px solid #17b38f;border-bottom:20px solid transparent}
.Label ul li a:after{content:'';position: absolute;top:17px;left:0;border-radius:50%;background:#fff;width:6px;height:6px}
.Label ul li span{float:right;margin-right:-10px;background:#ff4e47;width:30px;height:20px;font-size:10px;color:#fff;text-align:center}

CHỈNH SỬA WIDGET LABEL

- Nếu Widget Label trong Blogger của bạn chỉ có mỗi một, bạn mở Template kiễm tra thử sẽ thấy nó có tên duy nhất là Label1 và không có bất kỳ một Widget nào khác có tên Label.
- Tìm đoạn code sau trong widget Label1 bên trong Template:

<b:loop values='data:labels' var='label'>
  <li>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </li>
</b:loop>

Thay thế đoạn code vừa tìm thành đoạn code dưới đây:


<b:loop index='i' values='data:labels' var='label'>
  <b:if cond='data:i &lt; 5'>
    <li><a expr:href='data:label.url' rel='tag'><data:label.name/><b:if cond='data:showFreqNumbers'><span><data:label.count/></span></b:if></a></li>
  </b:if>
</b:loop>

Con số 5 màu đỏ ở trên là số tên nhãn mà bạn muốn xuất hiện.
Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. 






http://ketbancungkhanhnguyen8.blogspot.com/




Từ những Code trên, bạn có thể tùy biến thữ dược rất nhiều hình dạng khác nhau, mà bạn có thể vọc cho biết. Mình chỉ sưu tầm được cái nào thì chia sẽ cái đó. Chúc các bạn nhiều may mắn.




Người viết: Nguyễn Đạt Khánh.

Read More