Home » Thủ thuật blog
Trang trí các widget
Thứ Bảy, 15 tháng 8, 2009

Ở bài này mình sẽ giới thiệu mẫu, để hiển thị tốt nhất trên blog của mình, các bạn phải chỉnh sửa 1 chút về ảnh nền của widget.
Hình ảnh minh họa :

☼ Các bước thực hiện :
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đoạn code CSS bên dưới vào trước dòng ]]></b:skin>
.widget_01_title
{
background: url(http://news.zing.vn/news/images/title_01.gif) no-repeat;
height: 26px;
}
.widget_01_title h5
{
color: #FFF;
padding: 4px 0 0 15px;
}
.widget_02_title h5
{
padding: 4px 0 0 15px;
}
.widget_02_title h5 a
{
color: #FFF;
}
.widget_01_content
{
width: 288px;
background: url(http://news.zing.vn/news/images/box_rep_01.gif) repeat-x left bottom;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}
.widget_02_title
{
background: url(http://news.zing.vn/news/images/title_02.gif) no-repeat #f3e5ff;
height: 26px;
}
.widget_02_content
{
width: 288px;
background: #f3e5ff;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}
4. Save template
- Nên download các ảnh nền về và chỉnh sửa kích thước lại cho hợp lý với blog của bạn.
- Về độ rộng của các class chưa nội dung widget, các bạn cũng tùy chỉnh lại so với ảnh nền đã thay đổi, như trong code mẫu, ảnh nền có kích thước là 300px, thì độ rộng của class widget_02_content sẽ là 288px = 300px - 2*5px - 2*1px.
5. Và đây là code để trang trí cho widget, (tạo 1 widget HTML/javascript) và dán code bên dưới vào :
<!-- style 1 -->
<div class="widget_01_title">
<h5><a href="#"> Tiêu đề widget (style 1)</a></h5>
</div>
<div class="widget_01_content">
Nội dung widget
</div>
<!-- Style 2 -->
<div class="widget_02_title">
<h5><a href="#"> Tiêu đề widget (style 2)</a></h5>
</div>
<div class="widget_02_content">
Nội dung widget
</div>
Với bước 5 là áp dụng cho các widget HTML không có tiêu đề (tức là tiêu đề của widget dược tạo ngay trong nội dung của widget), trường hợp các widget HTML/javascript có tiêu đề, thì các bạn có thể vào code template để chỉnh sửa hoặc xóa tiêu đề của nó đi và tạo thẳng trong nội dung của widget.
☼ Hướng dẫn chỉnh sửa ngay trong code template (chú ý, cách này nên áp dụng cho các widget có tiêu đề):
- Vào bố cục
- vào chỉnh sửa code HTML
- Nhấp chọn mở rộng mẫu tiện ích
- tìm tới đoạn code của widget mà bạn muốn trang trí, ví dụ như mình có code bên dưới :
<b:widget id='HTML1' locked='false' title='TEST' 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>
- chỉnh sửa lại code trên như bên dưới :
<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<div class="widget_01_title">
<h5><data:title/></h5>
</div>
</b:if>
<div class='widget_01_content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
- Save template.
Tham khảo source từ news.zing.vn
Chúc các bạn thành công.

- Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)
- Modify Form Comment : Bài 12 - Một cách đơn giản để trang trí cho khung comment
- 1 Sript đổi màu background khá hay
- Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung
- Một ứng dụng của lệnh position : Chèn tiện ích vào banner (Header)
- Modify Form Comment : Bài 11 - Gắn Tem cho bài comment đầu tiên
- [ Yêu cầu ] : Giới hạn việc xem blog cho trình duyệt IE
- [ Yêu cầu ] chỉ hiển thị tiện ích với quản trị blog
- Giải pháp Blogger bị chặn 02/07/2012
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Khắc phục hiện tượng chặn web của VNPT.
Comments[ 0 ]
Đăng nhận xét