Laman

Tùy biến label thành tag cloud giống WP

34   nhận xét

Bạn có thấy tag cloud của WP đẹp không ? , vậy giờ chúng ta sẽ làm giống y hệt nhé , chúng ta sẽ làm cho WP phải lác mắt với sức mạnh blogger.



1.Nói lại code hiển thị số bài đăng trong label của Duypham (blog.duypham.info) :
Bởi vì trong blog chúng ta sẽ có 2 thẻ <data:label.count/> một cho dạng list , một cho dạng tag cloud như trong ảnh của bạn Duy Phạm chụp
Ta thay thế:
<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>
Thành:
<b:if cond='data:showFreqNumbers'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; Bài đăng trong nhãn &quot; + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:if>
Rồi tiếp tục:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
Thành:
<b:if cond='data:showFreqNumbers'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; Bài đăng trong nhãn &quot; + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:if>
2.Tạo dạng tag cloud:
Các bạn vào Thiết Kế >>> Phần tử trang và bấm vào chỉnh sửa , chúng ta sẽ có như hình trên và làm theo 2 bước như trong hình
Sau đó thêm đoạn code sau trước ]]></b:skin> :
.sidebar .list-label-widget-content li{display:inline;font-size:10px;text-transform:uppercase;white-space:nowrap;line-height:2.5em}
.sidebar .list-label-widget-content li a{-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #BBB;padding:3px 6px;opacity:0.7}
.sidebar .list-label-widget-content li a:hover{border:1px solid #F26535}
Nếu các bạn thấy không chạy thì hãy làm theo bỏ đoạn css trên và thay bằng đoạn css bên dưới:
.list-label-widget-content li{display:inline;font-size:10px;text-transform:uppercase;white-space:nowrap;line-height:2.5em}
.list-label-widget-content li a{-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #BBB;padding:3px 6px;opacity:0.7}
.list-label-widget-content li a:hover{border:1px solid #F26535}
Nhìn đẹp mắt đó Yolks à! Phải áp dụng cho Blog mình mới được! Thanks Yolks nha! Thời gian tới post thêm nhiều bài nữa nhé!
@Linh Dung Sắp tới còn nhiều cái hay mà , lên kế hoạch hết rồi
Mình thích dạng hình cầu xoay xoay ý
blog nào nhiều label thì nên chơi cái này
Hay nhưng làm hơi phức tạp, a thấy ko cần thiết lắm :D
đồng ý với anh NAD :D
Cái này chỉ cần CSS là đủ nhóc ạ, không cần chỉnh sửa tới XML đâu.
@Neyurt Bên WP rê chuột vào nó mới báo số bài đăng nếu không áp dụng thì làm sao
Đẹp nhưng hơi rắm rối!Ủng hộ em...
@Yolks Hì thế thì ngon rồi, mình cũng đã có kế hoạch rồi, chỉ cần làm đúng tiến trình là được :3)
Thấy cũng bình thường mà nhỉ! XML chỉ là để hiển thị số bài viết trong nhãn thôi, còn hình thức thì chỉ là CSS!
Yolks chia sẻ cái giao diện comment phân cấp đi, 3 cái blog đang xài có giao diện giống nhau, đang muốn đổi mà chưa có thời gian nghịch nữa!
Cái này hay đấy, để mình thử xem sao...
a {
color: #A00505;
text-decoration:none;
}
@Cu0nglsf Bạn sửa giùm trong :)) css trên có 2 đoạn mã màu đó bạn
Bắt đền Yolks luôn đó, anh làm theo y trang, mà nó thành ra như vầy nè, chỉ thấy số không thấy nhãn đâu. Hihi!^^
@Phạm Minh Tâm ey`sao lại ko dc , 1 số blog làm trôi chảy lắm chứ , anh có quên code ko , 2 trường hợp cho xml , và cách chỉnh cho đúng , sau đó thêm css vào ??? A có thể gửi template cho em xem để có thể khắc phục sự cố ko . Lưu ý là để dạng list
Anh đã thử đi thử lại rồi, làm y trang luôn, không sai bước nào hết, gửi templates rồi sửa giúp anh nhé, nhưng Yolks phải bảo mật chứ anh sợ bị đụng hành lắm, không thích trùng lắp templates với ai cả nha...
Hi em, Trao đổi liên kết với Neyurt.com nhé.
vậy thì mục hỏi đáp của bạn ở đâu ?
temp này của bạn tải chậm wa
phần sidebar sấp xếp không được đẹp & chuyên nghiệp,
còn khi tải trang thì màng hình bị giật ngang
làm cho mọi người cảm thấy khó chiệu khi vào xem nội dung,
mình chân tình mới góp ý mong bạn đừng giận.
bạn tìm cách khắc phục nhé,
@Anonymous À chậm là do cái tiện ích xem nhanh của tớ . Nếu bỏ nó đi thì tốc độ chỉ tầm 1s
@Yolks Mình load trang đâu thấy bị giật đâu card màn hình bạn có vấn đề rồi :))
Cảm ơn Yolks, anh làm được rồi...
À mà em xóa cái EmailDemo đó đi nhé, anh không thích bị đụng hàng đâu, và lại blog của anh thiên về Công giáo, nên rất cần sự tôn trọng và tôn nghiêm, hy vọng anh sẽ học hỏi được nhiều điều hơn từ Yolks. Thanks!^^
Cái này có lỗi font tiếng việt ko?
Bên mình bị
@Đing Kiu Truê Có thể do font bên bạn lỗi có thể dùng tahoma chẳng hạn :)) , mà chắc chắn là ko bị lỗi 100%
Anh cảm ơn Yolks đã nhiệt tình giúp đỡ =>
Nhưng anh không thích Yolks dùng templates đó làm demo và phổ biến nó...
Hơn nữa cây Thánh giá chính là biểu tượng thiêng liêng nhất của hàng tỷ người Công giáo trên thế giới nói chung, và hàng triệu người Công giáo Việt Nam nói riêng, như vậy chỉ nên treo ở những nơi như Thánh đường - Thánh địa hay những sites/blog Công giáo để vinh sáng Danh Chúa, chứ không nên treo ở một cái demo thủ thuật, và lại anh tin tưởng Yolks nên mới gửi templates, rất mong Yolks hiểu và không làm anh phải thất vọng (^_^)!
Thanh chú nhá, anh làm ngon ơ, mà blog anh sao đc 1 thẻ thôi
k chạy dc yolks ak .huuhu .thay 2 code rồi muk.
Neyurt
09 November, 2011 17:03 Reply
Cái này chỉ cần CSS là đủ nhóc ạ, không cần chỉnh sửa tới XML đâu.


Yolks
09 November, 2011 17:15 Reply
Bên WP rê chuột vào nó mới báo số bài đăng nếu không áp dụng thì làm sao

>>> Su sung thuoc tinh : hover
Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D