Định dạng hiển thị label cloud nhiều màu sắc

Chia sẽ một đoạn css giúp hiển thị nhãn (label cloud) với nhiều màu sắc
- Đăng nhập vào Blogger
- Đi đến Mẫu (template) >> Chỉnh sửa HTML
- Và thêm đoạn mã CSS phía dưới vào trước ]]</b:skin> hoặc </style> và lưu lại là bạn có được kiểu dáng label cloud được hiển thị như hình dưới đây:

Xem thêm: Hiển thị tiện ích Label Cloud dưới dạng Flash

Lưu ý: Trong Định cấu hình nhãn, phần Hiển thị: "Danh sách" bạn chọn "Cloud"

.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) { background: #F53477; }
.label-size:nth-child(2) { background: #89C237; }
.label-size:nth-child(3) { background: #44CCF2; }
.label-size:nth-child(4) { background: #01ACE2; }
.label-size:nth-child(5) { background: #94368E; }
.label-size:nth-child(6) { background: #A51A5D; }
.label-size:nth-child(7) { background: #555; }
.label-size:nth-child(8) { background: #f2a261; }
.label-size:nth-child(9) { background: #00ff80; }
.label-size:nth-child(10) { background: #b8870b; }
.label-size:nth-child(11) { background: #99cc33; }
.label-size:nth-child(12) { background: #ffff00; }
.label-size:nth-child(13) { background: #40dece; }
.label-size:nth-child(14) { background: #ff6347; }
.label-size:nth-child(15) { background: #f0e68d; }
.label-size:nth-child(16) { background: #7fffd2; }
.label-size:nth-child(17) { background: #7a68ed; }
.label-size:nth-child(18) { background: #ff1491; }
.label-size:nth-child(19) { background: #698c23; }
.label-size:nth-child(20) { background: #00ff00; }
.label-size a, .label-size span {
    display: inline-block;
    color: #fff !important;
    padding: 4px 10px;
    font-weight: bold;
}
.label-size:hover {background: #222;}
.label-count {
    white-space: nowrap;
    padding-right: 3px;
    margin-left: -3px;
    background: #333;
    color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
    background-color: #ff6bb5;
}

- Lưu template lại và xem kết quả

Giới hạn số lượng bài viết cần hiển thị khi xem theo Nhãn (Labels) trong Blogger

Mặt định thì khi đi đến liên kết của một nhãn nào đó trên blog của bạn thì url trên thanh địa chỉ sẽ có dạng (ví dụ: http://example.com/search/label/Blogger và nó sẽ hiển thị tất cả bài viết thuộc nhãn Blogger), nếu nhãn đó có 100 bài viết thì nó sẽ hiển thị ra 100 bài viết trên trang đó, điều này sẽ làm cho blog của bạn tải rất chậm và rất dày trong rất sấu. Như vậy, điều bạn cần làm là giới hạn lại số bài viết hiển thị trên một nhãn bằng cách thêm ?max-results=10 cho nó. Chia sẽ một thủ thuật nhỏ để bạn có thể dễ dàng giới hạn số lượng bài viết muốn hiển thị trên một trang (nhãn) khi xem bài viết theo Labels (Nhãn) trong Blogger.

Giới hạn số lượng bài viết cho Nhãn (Labels) trong Blogger

- Đăng nhập vào Blgoger Tới Mẫu >> Chỉnh sữa HTML
- Nhấn Ctrl + F Tìm expr:href='data:label.url' và thay đổi tất cả đoạn mã tìm được thành:
expr:href='data:label.url + "?max-results=10"'

Với 10 là bài ​​viết giới hạn tối đa được hiển thị. Bạn có thể thay đổi thành giá trị khác nếu muốn.

- Lưu mẫu để hoàn thành!

Tiện ích Label Cloud (Tag Cloud) dạng Flash cho Blogspot

Khi sử dụng Blogger hẳn bạn đã quá quen thuộc với Label (nhãn) của Blogger. Blogger cung cấp cho ta 2 lựa chọn để hiển thị các Labels dưới dạng danh sách và dạng Cloud, bạn hoàn toàn có thể tùy biến các Labels này bằng cách định dạng css theo phong cách riêng của bạn. Hôm nay, mình chia sẽ cho các bạn thêm một Label Cloud dạng Flash mà đôi lúc ta thường thấy nó ở các CMS như WordPress, Joomla, vBulletin,...

Label Cloud Widget (hay còn gọi là Blogumus) là tiện ích hiển thị các nhãn của blogger dưới dạng flash, và bây giờ nó đả tích hợp được cho Blogger.

Xem thêm: Định dạng và hiển thị Label Cloud với nhiều màu sắc

Với tiện ích này, các labels sẽ được gói gọn xung quanh một quả cầu flash, khi bạn rê chuột lên các đối tượng nó sẽ bắt đầu chuyển động cho bạn lựa chọn một nhãn, chuyên mục mà bạn cần đi tới.

- Demo dưới đây sẻ cho bạn biết nó hoạt động như thế nào: (hoặc có thể xem tại đây)

- Để tích hợp vào blog của bạn rất đơn giản, chỉ cần thiết lập các giá trị dưới đây:

Thiết lập

Blog URL:
Labels Color:	Màu chữ label
Hover Color:	Màu chữ label khi hover
Background Color:	Mặt địnhThay đổi Màu nền
Size:	size: 4size: 5size: 6size: 7size: 8size: 9size: 10 Kích cở chữ label
Speed:	Tốc độ xoay
Width:	Chiều rộng
Height:	Chiều cao

<div id="cbFlashContent">
     <p style="text-align:center;">Đang tải...</p>
</div>
<script type="text/javascript">/*<![CDATA[*/
var cbFlashLabelSettings = {
 blogurl: "http://www.nhatchanh.info",
 color: "0090FF",
 hoverColor: "FF00FF",
 backgroundColor: "FFFFFF",
 size: 7,
 speed: 150,
 width: 350,
 height: 350,
 transparency: true
};/*]]>*/</script>
<script type="text/javascript" src="https://googledrive.com/host/0BwL0KbT-xOaTUWtuN2JJR1dRY2s/cloud.js"></script>

- Tiếp theo, Đăng nhập vào tài khoản Blogger vào Bố cục (Layout) >> Thêm một tiện ích (Add a gadget) >> HTML/Javascript. Copy và Paste đoạn mã phía trên vào Lưu lại là xong.

Như vậy, bạn đả có được một Label Cloud dạng Flash đẹp mắt cho blog của mình rồi phải không nào :D. Chúc bạn thành công!

Cập nhật 03/09/2014