Trang trí cho widget Label và Blogroll

6/24/2009 02:14:00 CH with 1 Nhận xét » In bài
Bookmark and Share

Bài liên quan
[TMT-Blog]Đây là một trong những thủ thuật cơ bản của blogger, dùng các đoạn code CSS để trang trí blog theo ý thích của riêng mình. Bài viết này mình sẽ giới thiệu mẫu cho bạn 2 widget (1 là widget có sẵn của blogger, 2 là widget tự tạo) để bạn tham khảo, rồi tự áp dụng cho các widget khác.

Hình ảnh minh họa

Hình ảnh minh họa

Trên 1 blog, các widget phải luôn được trang trí 1 cách đồng bộ với nhau, không nên tạo mỗi widget một kiểu. Vì thế trước khi đi vào trang trí cho các widget, ta sẽ tạo các class chung để sử dụng cho các widget này.

☼ Các bước chèn code CSS vào code template:
- Vào bố cục
- Vào chỉnh sửa code HTML
- chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>


#widget-t {
padding:3px 5px 3px 5px;
border:1px solid #444;
background:#eee;
font-weight:bold;
font-size:120%;
text-align:center;
}
#widget-c {
padding:5px;
border:1px solid #444;
height: 200px;
overflow: auto;
}

Trong đoạn code trên, bạn có thể tùy chỉnh lại height, đó là chiều cao được thiết lập sẵn, nếu widget có nội dung dài hơn chiều cao này thì sẽ tự xuất hiện thanh trượt. (như hình minh họa phía trên)
- Save template.

Bây giờ ta bắt đầu đi vào trang trí

A. Trang trí cho widget có sẵn từ blogger: ở đây minh họa cụ thể là widget Label.
- Để chỉnh sửa các widget dạng này ta phải vào trong code template để chỉnh sửa trực tiếp.
- Đầu tiên hãy tìm đến đoạn code của widget Label.
+ vào bố cục
+ vào chỉnh sửa code HMTL
+ chọn mở rộng mẫu tiện ích
+ tìm đoạn code như bên dưới

<b:widget id='Label1' locked='false' title='Nhãn' 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'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

+ Và sửa nó lại như đoạn code bên dưới:

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

+ Save template.

B. Trang trí cho widget tự tạo: ở đây minh họa cụ thể là widget Blogroll.
- Đối với các widget dạng này, đa số được tạo từ tiện ích HTML/Javascript, vì thế ta sẽ trang trí trực tiếp nó trong tiện ích HTML/Javascript. Khác với các widget được cung cấp sẵn, ta không cần thiết phải vào code template để chỉnh sửa.
- Khi tạo 1 widget HTML/Javascript, bạn nên để trống phần tiêu để, vào tiêu đề của nó ta sẽ tạo ngay trong phần code của thủ thuật.

Hình ảnh minh họa

Và phần nội dung bên trong của nó sau khi trang trí sẽ có dạng như sau:

<div id="widget-t">Blogroll</div>
<div id="widget-c">
{CODE CỦA THỦ THUẬT - NỘI DUNG CỦA WIDGET}
</div>

Fandung

Nếu thấy hay bạn hãy gửi bài này lên linkhay.com cho mọi người bình luận nhé! Chia sẻ

Download Vietkey 2007 miễn phí
Kích thước nhỏ gọn, có thể nhúng được tiếng Việt trong hầu hết các ứng dụng.

Download Unikey 4.0
Phần mềm gõ Tiếng Việt phổ biến nhất hiện nay. Chương trình nhỏ gọn, free.




Cám ơn bạn đã ghé qua Trai miền Tây.Com Để mọi người biết đến bạn bằng cách để lại ý kiến (Post Comment) của bạn bên dưới bài viết này nhé. Nếu bạn thấy hay hãy Đăng ký đọc tin mới mỗi ngày bằng Email (nhớ mở email và click vào link để kích hoạt) hoặc bạn có thể đọc bài viết bằng các công cụ đọc tin (RSS) Đọc tin bằng RSS bên trên. Chúc bạn nhiều niềm vui và đừng quên trở lại nếu bạn cảm thấy thích TraimiềnTây.Com

-----------------------------------------------------------------------------------------------------------------------------------------

Copy đường link dưới đây gửi đến nick Yahoo! bạn bè:

1 Nhận xét

Mời bạn cho ý kiến về bài viết, và tuân thủ một số quy tắc nhỏ sau: (Xem hướng dẫn)
Nội dung comment phải nghiêm túc, không dung tục, không spam.
Hãy để lại tên của bạn khi comment, để mình có thể dễ dàng trả lời comment của bạn khi cần.
HTML Tag: chỉ chấp nhận các định dạng in đậm, nghiêng và liên kết.

  1. toan hoc 7/01/2009

    Mình đang cần cái này. Cảm ơn bạn.


Ghi rõ link gốc khi phát hành lại thông tin trên trang này. Xem tốt nhất trên các trình duyệt Internet Explorer 7.0, Mozilla Firefox, Google Chrome ở độ phân giải 1024 x 768 pixels. Trang này được xây dựng trên nền Blogger với tên miền tùy chỉnh.