Trang trí cho widget .

 Kiểu trang trí 1:

 [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.

Nguồn : http://www.fandung.com/2009/08/trang-tri-cac-widget.html

Kiểu trang trí 2:

Để trang trí đẹp mắt cho blog mình, các bạn có thể dùng nhiều cách.Bây giờ mình xin giới thiệu một trong số đó để các bạn tham khảo.Đó là tạo khung cho các widget trên sidebar,như hình bên dưới:

Ảnh minh họa

Bây giờ chúng ta bắt đầu:
1.Đăng nhập blog
2.Vào bố cục (layout)
3.Vào chỉnh sửa code HTML (edit code HTML)
4.Tìm đọan code CSS sau (hoặc tương tự):

.sidebar h2 {
margin:0;
padding:0;
color:$sidebarHeaderColor;
font: $headerFont;
}

Thay thế nó bằng code bên dưới:

.sidebar h2 {
background: #CCCBB9 url(http://lh6.ggpht.com/_TaHzV-QgYq0/Skg5f9XukTI/AAAAAAAAAJc/BxXcr0AXlnc/tabrightC.gif) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}

Bạn có thể thay đổi code mau tím trên theo hình yêu thích của mình5.Tiếp tục tìm đọan code như bên dưới (hoặc tương tự):

.sidebar .widget {
font-size:86%;
margin-top:6px;
margin-$endSide:0;
margin-bottom:12px;
margin-$startSide:0;
padding:0;
line-height: 1.4em;
}

Và thay thế nó bằng code như bên dưới :

.sidebar .widget {
font-size:86%;border-left: 3px solid #CCCBB9;
border-right: 3px solid #CCCBB9;
border-bottom: 3px solid #e0d5c2;padding: 10px;
line-height: 1.4em;
}

Bạn có thể thay đổi các code mau tím dựa vào bảng mã màu thập lục.Bạn có thể click

vào đây

để xem mã màu
6.Xong bạn hãy save lại
Chúc thành công 

Nguồn : http://singleboy010.wordpress.com

 

Kiểu trang trí 3:

 

Nếu xem Template như ngôi nhà thì Widget chính là bàn, ghế, giường, tủ,…Việc bố trí đồ đạc sao cho gọn gàng, phù hợp với căn nhà sẽ góp phần làm cho nơi ở của bạn trở nên đẹp hơn, “pro” hơn trong mắt khách viếng thăm.

Hay nói cách khác, việc bố trí các Widget trên Template một cách hợp lý sẽ làm nổi bật nội dung cần truyền tải, logic và hài hòa với bố cục Blog.

Chính vì lý do đó xin được giới thiệu đến bạn đọc những thủ thuật nhỏ để “hiển thị Widget ở những trang nhất định trong Blogspot”, tiến hành như sau :

- Vào Thiết kế ( Bố cục ) > Nhấp vào Chỉnh sửa trên Widget cần xử lý

- Một Popup bật lên, bạn nhìn vào phía trên góc phải ( gần thanh tiêu đề ) sẽ thấy dòng …null&widgetId=HTML2 ( trong trường hợp này là widget HTML2, đối với widget khác sẽ có ID khác)

- Sau khi xác định được ID của widget, bạn vào Chỉnh sửa HTML > Mở rộng mẫu tiện ích để tìm widget đó trong Template ( nhấn Ctrl+F rồi gõ vào ID của widget )

Như vậy, ta đã xác định được ID cũng như vị trí và nội dung của Widget, và bây giờ là phần chính của thủ thuật

1. Chỉ hiển thị Widget ngoài trang chủ

Bạn thêm dòng code bên dưới vào sau dòng của widget đó:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

và một thẻ đóng </b:if> cho nó trước dòng </b:includable>. Khi đó sẽ trông như hình dưới:

Tương tự như vậy, để hiển thị tại vị trí khác, bạn chỉ việc thay dòng <b:if cond='data:blog.url == data:blog.homepageUrl'> bằng đoạn code tương ứng.

2. Chỉ hiển thị Widget ở trang Archive
Thay dòng code <b:if cond='data:blog.url == data:blog.homepageUrl'> bằng dòng này :
<b:if cond='data:blog.pageType == &quot;archive&quot;'>


3. Chỉ hiển thị Widget ở trang bài viết
Thay dòng code <b:if cond='data:blog.url == data:blog.homepageUrl'> bằng dòng này :
<b:if cond='data:blog.pageType == &quot;item&quot;'>


4. Chỉ hiển thị Widget ở trang Static Page
Thay dòng code <b:if cond='data:blog.url == data:blog.homepageUrl'> bằng dòng này :
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>


5. Chỉ hiển thị Widget ở những trang với liên kết cụ thể
Thay dòng code <b:if cond='data:blog.url == data:blog.homepageUrl'> bằng dòng này :
<b:if cond='data:blog.url == "URL của trang chỉ định"'>
Ví dụ, chỉ hiển thị widget ở chuyên mục ( Label ) Network, bạn thay bằng đoạn code sau :
<b:if cond='data:blog.url == "http://www.tuyetvan.net/search/label/HD-Bluray"'>


6. Chỉ hiển thị Widget ở Trang chủ, trang Label và trang Archive
Thay dòng code <b:if cond='data:blog.url == data:blog.homepageUrl'> bằng dòng này :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
* Ở trên bạn có thể thấy iTechPlus cố ý đánh dấu “==” bằng màu đỏ, có nghĩa là, bạn hoàn toàn có thể thay dấu “==” bằng dấu “!=” sẽ mang ý nghĩa khác.

Qui ước :

== : “bằng” hoặc tương đương

!= : “khác” hoặc không tương đương

Ví dụ, nếu bạn muốn Widget HTML2 hiển thị ở tất cả các trang khác ngoài trang chủ, thì ta sẽ có đoạn code sau ( thay thế <b:if cond='data:blog.url == data:blog.homepageUrl'> ) :
<b:if cond='data:blog.url != data:blog.homepageUrl'>

Tùy biến nâng cao sử dụng kết hợp các điều kiện

Vì một lý do nào đó, bạn chỉ muốn hiển thị widget ở trang A ( và\hoặc ) trang B, ta sẽ kết hợp các điều kiện với nhau như sau:

A. Trường hợp 1: chỉ hiển thị widget khi thỏa mãn 2 hay nhiều điều kiện
Ví dụ, hiển thị widget ở tất cả các trang ngoại trừ chuyên mục Graphic và Security:

<b:if cond='data:blog.url != "http://www.tuyetvan.net/search/label/Phim Bộ"'>
<b:if cond='data:blog.url != "http://www.tuyetvan.net/search/label/Phim Lẻ "'>
nội dung widget
</b:if></b:if>

B. Trường hợp 2 : chỉ hiển thị widget khi thỏa mãn một trong các điều kiện
Ví dụ, chỉ hiển thị widget ở chuyên mục Graphic hoặc Security

<b:if cond='data:blog.url == "http://www.tuyetvan.net/search/label/Xem Online"'>
nội dung widget
<b:else/>
<b:if cond='data:blog.url == "http://www.tuyetvan.net/search/label/Trailer"'>
nội dung widget
<b:else/>
<!--không hiển thị ở đây-->
</b:if>
</b:if>

Như vậy là ta đã hoàn thành các bước để tùy biến vị trí Widget rồi đó, việc còn lại bây giờ của bạn là Save Template và tận hưởng thành quả.

Chúc các bạn thành công !

Nguồn: iTechPlus

Được đăng tại nhãn: Thủ thuật blog