Cách tạo nhãn (Tab View) cho Blogger

31 tháng 7, 2009

Cách tạo nhãn (Tab View) cho Blogger

22:41

VIETTIEN

THÔNG TIN

TabView là gì?
TabView là cách rất tiện lợi để giới thiệu thông tin cho người đọc, đặc biệt khi bạn muốn tiết kiệm diện tích trên sidebar hoặc sidebar đã có nhiều thành phần.

Thành phần nào có thể đưa vào TabView?
TabView có thể hiển thị nhiều loại thông tin như nhắn nhanh (Shoutmix), Twitter, bài mới nhất, bình luận mới nhất...

THÊM TABVIEW VÀO BLOGGER

1. Trong Dashboard, chọn Layout - Edit HTML
2. Nhấn chuột vào Download Full Template để sao lưu toàn bộ thiết lập của blog (phòng trường hợp có trục trặc có thể khôi phục blog về trạng thái như hiện hành)
3. Nhấn chuột vào Expand Widget Template để xem Template ở chế độ nâng cao. Sao chép toàn bộ đoạn mã dưới đây và dán vào ngay trước giá trị ]]></b:skin> (có thể dùng Ctrl+F để tìm nhanh).

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /*width of main menu*/ text-align: center;
height: 24px; /* height of main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #F4F4F4; /* border colour from above */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Type of Fonts */
font-weight: 900;
color: #F4F4F4; /* Colour of fonts*/
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF;/* background colour*/
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #F4F4F4; /* line colour menu*/
overflow: hidden;
background-color: #FFFFFF; /* backgorund colour */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;

4. Dán đoạn mã sau ngay trước </head>

<script src="http://viettien.webs.com/codes/tabview.js" type="text/javascript"></script>

5. Lưu Template, chuyển tới Layout - Page Elements, nhấn chuột vào Add a Gadget và chọn HTML/Javascript từ danh sách. Sao chép và dán đoạn mã sau đâu vào cửa sổ Configure HTML/JavaScript:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">

<a>Nhãn 1</a>
<a>Nhãn 2</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">

Mã 1 cho Nhãn 1 <br />
Mã 2 cho Nhãn 1 <br />

</div>
</div>
<div class="Page">
<div class="Pad">

Mã 1 cho Nhãn 2 <br />
Mã 2 cho Nhãn 2 <br />

</div>
</div>
</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

6. Lưu các thay đổi cho Template. Việc thêm mã TabView vào Template của blog đã hoàn thành. Bước tiếp theo là thuộc về sự sáng tạo của bạn.

7. Chú ý về các tham số trong HTML/Javascript:
- Nhãn 1-2: tên nhãn bạn muốn gán cho Tab (ví dụ Nhắn nhanh, Bài mới...);
- "width: 350px; height: 250px": độ rộng và độ cao của khung TabView tính bằng pixel. Bạn có thể thay đổi các thông số này cho vừa với theme của blog.
- Mã cho Nhãn: là nơi dán mã của thành phần bạn muốn thêm vào TabView. Ví dụ Nhãn 1 là Bài mới thì bạn dán mã Bài mới (Recent Commnent) đè lên Mã 1 cho Nhãn 1.

Chúc vui!

Tham khảo:
- http://blogtutormaster.blogspot.com
- http://hoctrointro.blogspot.com