Theo yêu cầu của bạn Hiệp Cò (www.hiepco.com)

[FD's BlOg] - Yêu cầu này bạn hiệp cò đã nhờ mình lâu, vì 1 vài lý do mà bây giờ mình mới đáp ứng được cho bạn. Đâ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

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 đoạn code màu đỏ, đó 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 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>

- Blogroll : chính là tiêu đề của widget
- Thay đoạn code màu xanh thành code của thủ thuật.

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

Read more…

[FD's BlOg] - Như các bạn đã biết, khi dữ liệu của 1 tab quá dài, mà bạn không muốn nó chiếm nhiều không gian trong blog thì ta tạo cho nó thanh trượt. Sẽ có bạn ko không thích thanh trượt này, và ngay cả mình, mình cũng không thích thú cho lắm khi thấy nó hiển thị ở trong tab. Và bài viết này sẽ hướng dẫn các bạn 1 thủ thuật tạo hiệu ứng trượt nội dung khi rê chuột vào button, tab sẽ trượt như kiểu ta nhấn vào button lên hoặc xuống ở thanh trượt thông thường.

Xem demo ở đây: http://fandung.110mb.com/JS-files/easy-scroller/index.html

Hình minh họa :

Khi bạn rê chuột vào button Up thì nội dung bên trong sẽ trượt xuống, khi bạn rê vào button Down thì nội dung sẽ trượt lên, còn khi nhấn vào button Reset thì nội dung sẽ trở về vị trí ban đầu.

Bài viết này mình sẽ chỉ giới thiệu thủ thuật, còn việc áp dụng cho các widget thì các bạn có thể tự theo hướng dẫn của bài này mà thực hiện. Sau này rảnh mình sẽ áp dụng nó cho các widget và viết bài hướng dẫn sau.

☼ Bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script type="text/javascript" src="http://fandung.110mb.com/JS-files/easy-scroller/easyscroll.js"></script>

<script type="text/javascript">
var speed = 5;
var height = 250;
</script>


<style type="text/css">
#easyscroll{
background:#eee;
margin:1em 0;
/* add additional styling */
}

/* easyscroll navigation buttons */

#easyscrollnav, #easyscrollnav li{
height:28px;
line-height:28px;
margin:0;
padding:0;
}
#easyscrollnav{
margin:1em 0;
}
#easyscrollnav li{
list-style:none;
float:left;
background:#eee;
margin-right:10px;
padding:0 10px;
color:#333;
cursor:pointer;
}
#easyscrollnav li.over{
color:#999;
text-decoration:underline;
background:#ccc;
}
</style>

- Vài chú thích nhỏ :

+ var speed = 5; : tốc độ trượt nội dung
+ var height = 250; : chiều cao của tab.

5. Và đây là code HTML của thủ thuật :

<div id="myContent">
{NỘI DUNG CỦA TAB}
</div>

Khi muốn áp dụng cho 1 widget hoặc 1 tiện ích nào, bạn chỉ cần thay đoạn code màu xanh thành nội dung của widget đó là xong. Nếu không thực hiện được, hoặc không biết cách thực hiện, có thể vào mục yêu cầu thủ thuật của blog mình để yêu cầu mình giúp, mình sẽ hướng dẫn cho các bạn.
Hạn chế của thủ thuật là chỉ chạy được 1 tab trên 1 trang mà thôi.

Cập nhật 1 số chỉnh sửa nhỏ (22/6/2009)
Chúc các bạn thành công.

Read more…