Trang trí cho Label và Archive widget

Thường khi bạn tạo các Label widget hay Archive widget, bạn chỉ điều chỉnh được dạng hiển thị của nó mà không biết cách trang trí thêm. Blogger mặc định cũng không hỗ trợ bạn làm việc này. Trang trí ở đây có nghĩa là ta có thể tùy chỉnh các widget này theo ý của ta, ví dụ như định lại dạng tiêu đề, chèn hình ảnh, hiệu ứng Over của con trỏ chuột lên các link của các widget này, hay là thêm khung cho widget,... Bài viết này tôi sẽ phân tích và hướng dẫn đầy đủ cho các bạn cách tùy chỉnh theo ý thích và bạn có thể áp dụng tùy chỉnh cho tất cả các widget hiện tại mà blogger cung cấp (Poll, Linklist, Video Bar, feed,...). (Bạn có thể tham khảo bài viết về các widget ở đây: Blogger Widgets)

Một widget trong xml-template của blogger có dạng như sau:

CODE 1:

<b:widget id='HTML5' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Ngâm cứu một hồi bạn sẽ thấy, cấu trúc của widget thật đơn giản. Bắt đầu và kết thúc bằng các (tạm gọi là) thẻ <b:widget>(mở) và </b:widget>(có dấu / là đóng). Hai thẻ này là bắt buộc phải có và là duy nhất trong một widget. Kế đến là các thẻ <b:includable> có tác dụng chia nội dung của widget ra làm nhiều thành phần (cho dễ quản lý), các thẻ <b:includable> có thể có nhiều trong widget.

Tiếp theo, bạn hãy xem các code có màu. Đoạn code màu xanh da trời (blue) là phần hiển thị tiêu đề của widget. Bạn hoàn toàn có thể thay đổi hoặc xóa dòng này nếu không muốn hiện tiêu đề. Mà xóa chi mệt nhỉ nếu không muốn hiện tiêu đề thì trong lúc tạo widget không đặt tiêu đề cho nó là được rồi.
Đoạn code mà đỏ chứa nội dung của widget, mỗi dạng widget khác nhau có nội dung khác nhau, bạn cũng không cần bận tâm nó khác nhau như thế nào. Ta hoàn toàn có thể thay đổi code này. Đoạn code màu xanh cỏ (green) là mã điều khiển hiện nút Quick Edit khi bạn truy cập blog của bạn mà đã login thì nó hiện. Không quan tâm tới cái này làm gì.
Như đã nói, một widget thông thường thì có mã như đoạn CODE 1. Đối với
các widget chính như Label, Archive, Main Posts thì mã phức tạp hơn nhiều. Tuy
nhiên cách thay đổi tương tự nhau cả. Dưới đây tôi sẽ hướng dẫn cách trang trí
cho Archive (thêm khung) và Label(thêm khung, tạo hiệu ứng OnMouser Over).

1. Trang trí Archives

Tôi muốn tạo một các khung cho Archive Widget có dạng như thế này:

- Tạo Archive Widget (nếu chưa có)
- Vào Template -> Edit HTML, backup một bản XML về máy nhé. Sau đó click
chọn Expand Widget Templates
- Tìm một đoạn code có dạng như sau:

CODE 2:

<b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> </div> <b:include name='quickedit'/> </div> </b:includable>

- Tiến hành xóa đoạn code màu xanh, thêm đoạn code màu đỏ vào nữa, như sau:

CODE 3:

<b:includable id='main'> <div class='widget-content'> <table style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%"> <tbody><tr><td> <table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%"> <tbody><tr><td width="16" height="20" bgcolor="#30a1db"><img border="0" width="16" src="http://vo1984.googlepages.com/kvr.gif" height="8"/></td><td class="A_white" height="20" bgcolor="#30a1db">Blog Archives</td></tr></tbody></table></td></tr> <tr><td bgcolor="#30a1db"><img border="0" width="1" src="http://vo1984.googlepages.com/spacer.gif" height="2"/></td></tr> <tr><td bgcolor="#ffffff"><img border="0" width="1" src="http://vo1984.googlepages.com/spacer.gif" height="1"/></td></tr> <tr><td valign="top" style="BORDER-RIGHT: #30a1db 1px solid; BORDER-TOP: #30a1db 1px solid; BORDER-LEFT: #30a1db 1px solid; BORDER-BOTTOM: #30a1db 1px solid; BACKGROUND-COLOR: #ffffff"> <table border="0" style="BORDER-COLLAPSE: collapse" cellspacing="3" cellpadding="3" width="100%"> <tbody><tr><td valign="top"> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> </div> </td></tr></tbody></table></td></tr> </tbody></table> <b:include name='quickedit'/> </div> </b:includable>

- Save template lại và mở blog xem thử kết quả nhé. (Bạn có thể xem Demo tại
ĐÂY . Chú ý: để có thể hiển thị được như trong bản Demo này bạn phải có Template như kiểu này)

2. Trang trí label

Vào xem trang http://anhvotest2.blogspot.com, rà chuột vào các link Label xem thử thế nào
nhé
- Cũng tương tự như mục 1, bạn tìm đến đoạn code có dạng như sau:

CODE 4:

<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

- Xóa đoạn code màu xanh (xóa title) và thêm đoạn code màu đỏ, như sau:

CODE 5:

<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <div class='widget-content'> <table style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%"> <tbody><tr><td> <table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%"> <tbody><tr><td width="16" height="20" bgcolor="#30a1db"><img border="0" width="16" src="http://vo1984.googlepages.com/kvr.gif" height="8"/></td><td class="A_white" height="20" bgcolor="#30a1db">Labels</td></tr></tbody></table></td></tr> <tr><td bgcolor="#30a1db"><img border="0" width="1" src="http://vo1984.googlepages.com/spacer.gif" height="2"/></td></tr> <tr><td bgcolor="#ffffff"><img border="0" width="1" src="http://vo1984.googlepages.com/spacer.gif" height="1"/></td></tr> <tr><td valign="top" style="BORDER-RIGHT: #30a1db 1px solid; BORDER-TOP: #30a1db 1px solid; BORDER-LEFT: #30a1db 1px solid; BORDER-BOTTOM: #30a1db 1px solid; BACKGROUND-COLOR: #ffffff"> <table border="0" style="BORDER-COLLAPSE: collapse" cellspacing="3" cellpadding="3" width="100%"> <tbody><tr><td valign="top"> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url' onmouseover="this.style.color='red'" onmouseout="this.style.color=''"><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> </td></tr></tbody></table></td></tr> </tbody></table> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

- Save Template lại và kiểm tra.

*** Qua 2 ví dụ bạn có thể thấy, việc chỉnh sửa trang trí các widget không phải
là khó. Bằng cách tương tự như trên bạn có thể chỉnh sửa bất kì một widget nào.
Hãy tập thực hành và ngâm cứu kĩ hơn chắc chắn bạn sẽ hiểu thêm nhiều về blogger
và sẽ biết được nhiều cách tùy biến khác.

*** Bạn có thể xem thêm bài "Cách chuyển giao diện blogspot thành giao diện web"Ở ĐÂY

Anh Võ
nguồn: vietwebguide.blogspot.com