Loading post navigation ...
 
 

Pro page

20
Nhận xét

Trang trí các widget

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Bài viết này mình sẽ hướg dẫn các bạn trang trí khung cho cách widget ở sidebar. Với 1 chút code CSS là bạn hoàn toàn có thể thực hiện được.
Ở 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.


Enter your mail address:

20

Yeusuckhoe

Chà bài này hay quá fandung ơi, công nhận fandung nghĩ nhiều chiêu độc quá.

fandung

:D, cám ơn anh, cũng nhờ mọi người cả thôi.

thông tin công ty doanh nghiệp

FD cho minh hoi neu minh muon chen 1 hinh anh vao khung bai viet khi nguoi xem vao xem 1 bai viet cu the thi lam the nao? Chi co khung bai viet la co hinh anh thoi nhe

thông tin công ty doanh nghiệp

Minh bo sung la hinh anh se hien thi ben duoi bai viet co nghia la phan chu*~ se noi len tren hinh anh

Pavel

Một thủ thuật nhỏ nhưng rất hữu ích cho bạn nào thích trang trí cho blog của mình.

Hieuacoustic

Dear FanDung

Bạn có thể hướng dẫn cho mình cách up video của Youtube lên Blogspot không? Mình rất cần Intruction này của bạn

Cám ơn bạn rất nhiều

hieuacoustic.

Hieuacoustic

Xin lỗi FanDung tớ post nhầm box, ,mình không biết cách remove
hieuacoustic

Duy

Chieu nay tuyet voi, nhan the hoi fandung lam cai nay thu xem, o trang chu zing.vn , muc tieu diem trang home co trinh bay toi 5 cai tab tin nong - song tre...the thao, lam sao minh trinh bay tab dep mat nhu vay. Cam on ban.

f9x

Cám ơn fandung, nhưng mình muốn tiêu đề wiget nằm giữa thì làm sao ?

fandung

@Lucky : chưa hiểu ý của bạn lắm

fandung

@Duy : cái này mình có thể làm được, nhưng phải có thời gian.

@f9x : muốn cho chữ nằm ở giữa, bạn chỉ việc thêm code text-align:center; vào trong các class .widget_02_title.widget_01_title

Khách (ẩn danh)

Cảm ơn anh FanDung nhiều lắm!!!

Unknown

@FD: Ý của lucky là làm 1 hình ảnh "ẩn" phía sau mỗi bài viết đó. Ví dụ như ta đứng trước một cái màn.Hình ảnh là cái màn và nội dung bài viết là ta ^.^

fandung

@VT : tức là tạo ảnh nền cho bài viết đó hả. Nếu tạo ảnh cho bài viết thì đơn giản, còn tạo cho mỗi bài có ảnh nền khác nhau thi hơi cực 1 chút.

Khách (ẩn danh)

Muốn upload video của Youtube lên blogspot. Bạn chỉ cần coppy đoạn code của Youtube rồi vào phần bài viết chọn edit HTML rồi đặt đoạn code đó vào. Sau đó xuất bản bài đăng.

Banking 789K34 UEH

bạn có hỗ trợ blogger nữa k thế?
link hình die hết rồi hix

www.sim9x.co.cc

mấy cái link ảnh *.gif die hết rồi, ko làm ăn gì được :(

Thanh Le

Tìm kiếm vài ngày nay, hôm nay mới lượm được bíkíp.
Cảm ơn Fandung.

Thanh Le

@f9x : muốn cho chữ nằm ở giữa, bạn chỉ việc thêm code text-align:center; vào trong các class .widget_02_title và .widget_01_title
---
text-align:center --> dùng không được rồi.

Điện Tử ChipKool

Anh Dũng xem lại bài viết này rất nhiều bạn cần..em cũng cần để chỉnh blog..anh sửa luôn và ngay nhé



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home