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:
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:
- 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:
- 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:
- Xóa đoạn code màu xanh (xóa title) và thêm đoạn code màu đỏ, như sau:
- 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
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õ
Đầu Trang
Xem bài trong ngày
Bài mới nhất
hi nice blog...if u wanna exchange link with me i have given u link at my blog...Mobile Mania(http://mobimaniacs.blogspot.com)...
...plz give link back to my blog.....thanxx in advance.
Làm sao để trang trí cho bloglist đây Anh Võ? Mình làm mà nó cứ báo lỗi hoài!
Mỗi widget đều có dạng tổng quát như sau:
<div class='widget-content'>
....
....
....
</div>
Do đó để trang trí cho widget, cậu chỉ cần thêm code mở của trang trí vào dưới thẻ DIV và thẻ đóng của trang trí nằm trên thẻ /DIV. Ví dụ:
<div class='widget-content'>
<TABLE---------------
<TR>
<TD>
....
....
....
</TD>
</TR>
</TABLE>
</div>
phần code của Table chính là mã trang trí, như ví dụ trong bài.
Mình muốn đổi màu cho tên bài viết và nút ▼ trong widget "Blog Archived" , Nhưng màu của các phần trong blog của mình dính líu tùm lum đến nhau :
■ Màu tên các bài trong "Blog Archived" = màu liên kết
■ Màu của nút ▼ = màu của widget Poll và nội dung của Profile (cái profile mình làm bằng widget HTML nên ko bị ảnh hưởng )
Làm sao tách biệt màu của các phần này ra , đổi màu phần này vẫn ko ảnh hưởng tới phần kia ??
hỏi nhiều quá, hỏng biết đường trả lời luôn :D
Nói chơi vậy chứ bạn Ngân muốn tùy biến thì phải chịu khó học HTML đi, vì mỗi cái mỗi chỉ bạn tốn thời gian quá :D.
Hic ! vậy hỏi cái đơn giản thôi nè : Template mình down về chỉnh sửa , vốn phần comments không hiện icon , Sửa chỗ nào ?
Chào Anh Võ! Chào anh em Blogger! Mình có một vấn đề này xin hỏi mong các bạn giúp cho. Cái widget "Theo dõi blog" của mình không hiểu sao không thể xóa được cái biểu tượng chình sửa nhanh, mình vào xóa dòng b:include name='quickedit' nó vẫn cho nhưng xem lại thì nó vẫn còn y nguyên hà. Trong khi những widget khác vẫn xóa được bình thường. Rất mong các bạn giúp đỡ nhé, cảm ơn các bạn!
chào Thế Thưởng, Widget Follow Me hiện nay bạn không còn sử dụng nên Anhvo cũng không biết lỗi là ở chỗ nào. Theo Anhvo thì widget đó cũng không cần thiết lắm đặt vô blog, chỉ tổ làm cho blog nặng nề thêm thôi. Chúc blog của bạn sẽ mau chóng phát triển!