Tạo tab nội dung đơn giản với jQuery

[FD's BlOg] - Sau một thời gian dài "bỏ hoang" BlOg FD, hôm nay mình sẽ trở lại với các bạn với một thủ thuật tạo tab nội dung. Thủ thuật này sẽ hướng dẫn các bạn tạo các tab nội dung đơn giản nhưng cũng không kém phần bắt mắt. Ở thủ thuật này mình sẽ hướng dẫn khung sườn để tạo tab nội dung, còn phần nội dung bên trong các tab các bạn sẽ tự mình thêm vào.

Mình nhớ là có lần 1 bạn nào đó đã nhờ mình giới thiệu dạng tab như thế này. Dùng nó sẽ giúp tiết kiệm cho không gian blog của bạn. Tab mẫu mình giới thiệu chỉ có 2 màu trắng đen, rất giản dị và dễ phù hợp khi các bạn đưa vào blog của mình nếu không muốn chỉnh sửa gì nhiều.

Như các bạn đã biết, muốn tạo các tab nội dung như vậy thì nhất thiết phải dùng tới javascript, và ở đây cụ thể là jQuery ( Tuy nhiên cũng có thể dùng CSS để tạo tab dạng này nhưng nó trông không được pro cho lắm ). Do đó để cho tab được load nhanh, mình có lời khuyên là không nên dùng javascript vào trong các nội dung của tab. Các bạn nên thêm các thủ thuật đơn thuần chỉ là HTML. Như thế tab của mình sẽ load nhanh hơn.

Hình ảnh minh họa thủ thuật :

Và bên dưới là code của thủ thuật: (các bạn tạo mội widget HTML/Javascript rồi dán code của thủ thuật vào)

<link rel="stylesheet" href="http://data.fandung.com/blog/demo/jquery-tab/data/style.css" type="text/css" media="screen">

<script src="http://data.fandung.com/blog/demo/jquery-tab/data/jquery-1.js"></script>
<script>
$(document).ready(function(){
$("a.tab").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>

<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">

<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Tips</a></li>
<li><a href="#" title="content_2" class="tab">Archives</a></li>
<li><a href="#" title="content_3" class="tab">Pages</a></li>
</ul>

<div style="display: block;" id="content_1" class="content">
<!-- nội dung của tab1 -->
<ul>
<li><a href="#">HTML Techniques <small>24 Posts</small></a></li>
<li><a href="#">CSS Styling <small>32 Posts</small></a></li>
<li><a href="#">Blogspot Tutorials <small>112 Posts</small></a></li>
<li><a href="#">Web Design <small>19 Posts</small></a></li>
</ul>
<!-- END nội dung của tab1 -->
</div>

<div style="display: none;" id="content_2" class="content">
<!-- nội dung của tab2 -->
<ul>
<li><a href="#">November 2009 <small>4 Posts</small></a></li>
<li><a href="#">October 2009 <small>22 Posts</small></a></li>
<li><a href="#">September 2009 <small>12 Posts</small></a></li>
<li><a href="#">August 2009 <small>43 Posts</small></a></li>
<li><a href="#">July 2009 <small>15 Posts</small></a></li>
</ul>
<!-- END nội dung của tab2 -->
</div>

<div style="display: none;" id="content_3" class="content">
<!-- nội dung của tab3 -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Toturials</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- END nội dung của tab3 -->
</div>

</div>
</div>

- Khác với khác thủ thuật trước, mình không đưa code CSS vào trong thủ thuật mà đưa link (để code cho đỡ rườm rà). Nếu bạn nào muốn thay đổi lại cho phù hợp thì download file CSS về (http://data.fandung.com/blog/demo/jquery-tab/data/style.css) và thay đổi lại code chút ít cho phù hợp. Các bạn có thể tùy chỉnh lại code CSS ở 1 vài điểm chủ yếu như bên dưới :

#tabbed_box_1 {
margin: 40px auto 40px auto;
width:300px; /*độ rộng của tab*/
}
...
...
...

.tabbed_area {
border:1px solid #494e52;
background-color:#636d76; /*màu nền của tab (nền đen bên ngoài)*/
padding:7px;
}

- Trong demo mẫu, mình chỉ giới thiệu 3 tab, nếu muốn thêm các tab khác, các bạn chỉ cần thêm 1 vài code nhỏ như bên dưới :

...
...
...
<li><a href="#" title="content_3" class="tab">Pages</a></li>
<li><a href="#" title="content_4" class="tab">FAQs</a></li>
</ul>
...
...
...

<!-- END nội dung của tab3 -->
</div>

<div style="display: none;" id="content_4" class="content">
<!-- nội dung của tab4 -->

{Nội dung TAB}

<!-- END nội dung của tab4 -->
</div>

</div>
</div>

- Lưu ý : khi thêm tab vào, các bạn nên thay đổi lại độ rộng của tab, nếu không sẽ bị lỗi nhỏ như bên dưới

- và code để thay đổi là đây (trong file CSS)

#tabbed_box_1 {
margin: 40px auto 40px auto;
width:300px; /*độ rộng của tab*/
}

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

read more...

Hiển thị ngày đăng cho các bài viết xuất bản cùng ngày

[FD's BlOg] - Như các bạn đã biết, ở blogger, khi ta xem các trang như trang Home, Label, Archive thì ngày đăng bài viết (date-header) chỉ được hiển thị với bài viết mới nhất của ngày đó, còn các bài viết cũ hơn trong ngày đó sẽ không được hiển thị. Dưới đây mình sẽ hướng dẫn 1 cách để hiển thị ngày đăng ở các bài khác cùng ngày.

Đây là thủ thuật khá đơn giản, các bạn chỉ cần thực hiện các bước bên dưới :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đoạn code bên dưới :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

5. Và thay thế nó bằng đoạn code bên dưới :

<b:if cond='data:post.dateHeader'>
<script>var sameDay = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(sameDay);</script>
</h2>
</b:if>

6. Save template.

Thủ thuật tham khảo từ blog : blogspottutorial.com

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

read more...

Hiệu ứng thay đổi tiêu đề cho blog theo thời gian

Theo yêu cầu của bạn TOBU

[FD's BlOg] - Đôi khi các tiêu đề blog của bạn quá dài và nó không thể hiển thị được hoàn toàn trên thanh Navigation của trình duyệt web. Để khắc phục điều này ta có thể thay thế bằng các tiêu đề ngắn gọn, xúc tích. Hoặc cũng có thể tạo hiệu ứng chạy chữ cho các tiêu đề dài (cách này khá phổ biến). Hôm nay mình sẽ giới thiệu cách khác để khắc phục điều này. Đó là hiệu ứng thay đổi tiêu đề bài viết theo thời gian.

Thủ thuật này mình không có kèm hình minh họa, các bạn có thể xem demo ở đây : http://www.thuthuatpc.info/

Để thực hiện thủ thuật này, chúng ta chỉ cần chèn 1 đoạn script nhỏ vào trong code template là xong. Bên dưới là 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 Javascript bên dưới vào trước thẻ đóng </head>

<script language='javascript'>
step=0
function flash_title(){
step++
if (step==6) {step=1}
if (step==1) {document.title='BlOg FD - Tips For Blogger'}
if (step==2) {document.title='Thủ thuật blogspot cho người Việt'}
if (step==3) {document.title='Hãy truy cập vào weblog:'}
if (step==4) {document.title='www.fandung.com'}
if (step==5) {document.title='Mọi thắc măc của các bạn sẽ được giải đáp'}
setTimeout("flash_title()",700);}
flash_title()
</script>

- Thay đổi các code màu xanh thành các tiêu đề mà bạn muốn hiển thị.
- if (step==6) {step=1} :đây là đoạn code để quay về vòng lặp. nếu bạn có 10 tiêu đề, thì sửa nó lại thành if (step==11) {step=1}
- setTimeout("flash_title()",700);} : đây là code điều chỉnh thời gian giãn cách giữa 2 tiêu đề (đơn vị là ms)
4. Save template.

Tham khảo thủ thuật từ website : thuthuatpc.info

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

read more...

Hiển thị widget khi xem các bài viết của 1 nhãn nhất định

[FD's BlOg] - Bài viết hôm nay mình sẽ giới thiệu cho các bạn việc tùy chỉnh để 1 widget nào đó chỉ được phép hiển thị khi bạn vào xem 1 bài viết của 1 nhãn nào đó. Đây là 1 thủ thuật mà có một số bạn đã có nhờ mình, nhưng khi đó mình chưa trả lời được, nên bây giờ mới cho "ra lò". Mở rộng thủ thuật này ra ta có thể áp dụng cho tác giả của bài viết. Ví dụ tác giả A sẽ hiển thị widget A...

Hình ảnh minh họa :

Khi xem ở 1 trang bài viết
(ở hình minh họa là bài viết thuộc nhãn Love)

Khi xem ở trang chủ

Thủ thuật : các tiện ích được chọn sẽ mặc định được ẩn đi, khi bạn vào xem 1 bài viết nào đó, nếu lệnh lặp nhãn (Label) tìm thấy nhãn đã chỉ định thì tiện ích sẽ được hiển thị.

☼ Các bước thực hiện :
1. Xác định ID của widget cần thực hiện. (các bạn có thể tham khảo cách xem ID ở bài viết này : http://www.fandung.com/2009/09/huong-dan-tao-1-page-cho-blogspot.html)

2. Sau khi đã xác định được ID của widget cần thực hiện, các bạn làm tiếp theo các bước bên dưới :

a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. chèn đoạn code CSS bên dưới vào trước thẻ đóng </head>

<style type='text/css'>
#HTML3 {display:none;}
</style>

- Với HTML3 là ID của widget cần thực hiện.
e. tiếp tục tìm đoạn code tương tự như thế này :

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

f. và thêm đoạn code được đánh dấu highlight như bên dưới :

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:label.name == &quot;love&quot;'>
<style type='text/css'>
#HTML3 {display:block;}
</style>
</b:if>
</b:if>

</b:loop>
</b:if>
</span>

- Với love : chính là nhãn của bài viết muốn hiển thị widget
- HTML3 : là ID của widget.

- Code màu đỏ ở trên chính là để loại bỏ các trang có chứa nhãn muốn thực hiện. Ví dụ như trang chủ, trang archive hoặc trang label có các bài viết có nhãn muốn thực hiện, nếu không có lệnh này thì tiện ích vẫn sẽ hiển thị. Do khi bạn xem các trang này thì các nhãn đã được quét, chỉ cần thấy nhãn muốn thực hiện thì tiện ích sẽ hiển thị ngay.

g. Save template.

* Lưu ý :

- Khuyết điểm của thủ thuật này là cho dù tiện ích được ẩn nhưng nó vẫn sẽ được load, chỉ khi bạn tác động trực tiếp vào trong code của widget thì nó mới không load, còn dùng lệnh display:none; thì nó sẽ vẫn load nhưng chỉ không hiển thị mà thôi.
- Điều thứ 2 nữa là khi dùng cách này thì tiện ích sẽ không hiển thị trong phần Bố cục -> Phần tử trang ở Bảng điều khiển, chính vì thế nếu muốn chỉnh sửa nội dung của nó, bạn phải thực hiển điều này ngay trên giao diện của blog.

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

read more...

Hướng dẫn tạo 1 PAGE cho blogspot

[FD's BlOg] - Như các bạn đã biết, muốn tạo thêm 1 page cho blogspot ta chỉ có 1 cách duy nhất là tạo thêm 1 bài viết mới. Và lợi dụng điều này, và áp dụng các thủ thuật cũ đã đăng, hôm nay mình sẽ hướng dẫn 1 cách nhỏ để tạo thêm 1 page cho blogspot của bạn. Với thủ thuật này blog bạn sẽ ngày càng giống 1 weblog hơn.

Các bạn có thể xem thử demo minh họa ở đây : http://www.fandung.com/2009/02/contact-me.html

Mô tả chung thủ thuật : thủ thuật này lợi dụng việc tạo thêm 1 bài viết mới để lấy link liên kết cho trang page mà bạn sẽ tạo. Tức là khi xuất bản bài viết mới, ta không cần quan tâm tới nội dung của bài viết này, có thể bạn không cần soạn nội dung của nó cũng đc, ko sao cả. Khi đã có được link, bây giờ ta sẽ tạo 1 widget HTML/Javascript, và soạn nội dung của page vào đó. Tiếp đến ta dùng thủ thuật ẩn bài viết khi truy cập tới link liên kết này, và thêm 1 thủ thuật nữa là chỉ cho phép widget vừa tạo hiển thị khi truy cập tới link liên kết trên.

Như vậy ở thủ thuật này sẽ có 3 bước :
- Bước 1: tạo 1 trang bài viết để lấy link cho page.
- Bước 2: tạo 1 widget HTML/Javascript, và dán nội dung của trang page sẽ được tạo vào.
- Bước 3: tùy chỉnh việc hiển thị bài viết và widget HTML/Javascript.

☼ Bây giờ ta sẽ đi vào từng bước:
I. Bước 1 : tạo 1 trang bài viết để lấy link cho page.
- Vào phần soạn thảo bài viết mới và tạo 1 trang bài viết mới. với nội dung của bài viết để trống, nhãn cũng được để trống, chỉ duy nhất có phần tiêu đề.
- Mẹo : để link của trang page được đẹp, ta nên đặt tên của tiêu đề bài viết này là không dấu, ví dụ như hình minh họa :

- Ví dụ như với tiêu đề của mình minh họa trên ta sẽ có link liên kết của trang page như thế này :
http://www.fandung.com/2009/02/contact-me.html

- Và thêm 1 mẹo thứ 2 ở bước 1 này là : nên chỉnh sửa lại ngày đăng bài viết, để cho bài viết được nằm ở cuối của danh sách các bài đăng. Ví dụ như blog bạn tạo ngày 20/4/2008 thì ta chỉnh lại ngày đăng cho bài viết nằm trong ngày này chẳng hạn. Với mẹo này sẽ làm việc hiển thị bài viết ở trang chủ trở nên khó hơn.

II. Bước 2 : Tạo 1 widget HTML/Javascript và dán nội dung của trang mà bạn muốn tạo.

- Với việc này, bạn sẽ phải soạn thảo code HTML cho trang page ngay trên widget. Code để tạo nên trang này nhất thiết phải là code HTML, ngoài ra có thể kèm theo các code CSS, code Javascript để trang được tạo sẽ đẹp hơn. Việc này tương tự như các thủ thuật khác.

- Lưu ý : widget này phải nằm ở vị trí bên trên (hoặc dưới) phần "Bài đăng trên blog", tức là nó nằm ở cột Main. Như hình minh họa bên dưới:

- Như vậy đã xong bước 2, tiếp tục sang bước 3.

III. Bước 3 : ẩn bài viết và tùy chỉnh việc hiển thị của widget chứa nội dung của trang page.
- Ở bước 3 này ta sẽ có 2 bước nhỏ phải làm : ẩn bài viết khi truy cập tới link liên kết của trang page, và tùy chỉnh để widget chỉ hiển thị khi bạn truy cập tới link liên kết của trang page.

+ b1 : ẩn bài viết khi truy cập tới link liên kết của trang page.

Với bước này, ta sẽ ẩn hoàn toàn phần bài viết và chỉ cho phép hiển thị widget (và các phần còn lại của blog). Khi đó widget hiển thị chính là trang page mà bạn muốn tạo.
Để thực hiện điều này rất đơn giản, bạn chỉ cần thực hiện các bước như bên dưới :
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 code </head>

<style type="text/css">
<b:if cond='data:blog.url == &quot;http://www.fandung.com/2009/02/contact-me.html&quot;'>
#Blog1 {display:none;}
</b:if>
</style>

- Với link màu xanh sẽ là link liên kết của bài viết mà bạn đã tạo để gán cho trang page.
4. Save template.

+ b2: chỉ cho phép widget chứa nội dung hiển thị khi bạn truy cập tới đúng link liên kết của trang page (ví dụ như trong code mẫu sẽ là link : http://www.fandung.com/2009/02/contact-me.html )

Với bước này, trước tiên bạn phải xác định ID của widget chứa nội dung của trang page. Để biết được ID, thực hiện các bước sau :
1. vào phần tử trang
2. Nhấp chọn chỉnh sửa ở widget chứa nội dung của trang page.
3. Và ta sẽ thấy được ID của nó như bên dưới :

- Trong hình minh họa ta thấy ID của nó là HTML8
- Bây giờ ta sang bước chính là chỉ cho widget này hiển thị khi ta truy cập tới link của trang page. Để làm điều này, các bạn thực hiện các bước như bên dưới :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích.
4. Tìm đoạn code của widget chứa nội dung của trang page (nhấn Ctrl + F và điền ID của widget vào là có thể tìm thấy Code của nó)

Và code của nó tương tự như thế này :

<b:widget id='HTML8' locked='false' title='Form contact' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

5. Thêm đoạn code được đánh dấu highlight như bên dưới :

<b:widget id='HTML8' locked='false' title='Form contact' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == &quot;http://www.fandung.com/2009/02/contact-me.html&quot;'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

- Thay link (code màu đỏ) lại thành link liên kết tương ứng với trang page của bạn.

6. Save template.

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

read more...

PNO - Recent posts : Thêm 1 style mới cho tiện ích Recent posts

Theo yêu cầu của bạn letrannguvu

[FD's BlOg] - Bài viết này mình sẽ lại giới thiệu 1 style khác cho tiện ích recent posts theo yêu cầu của letrannguvu. Đây là 1 style mang phong cách 1 cuốn sách, được mình modify từ trang phunuonline.com.vn. Đây cũng là 1 trong những style khó chịu, vì thế mà mình cũng tốn khá nhiều thời gian để chỉnh sửa cho phù hợp với khung mẫu của blogspot.

Các bạn có thể xem demo ở đây : LIVE DEMO

Hình ảnh minh họa :

Như ở trên mình có nói là thủ thuật này mình có chỉnh sửa đôi chút cho phù hợp với blogspot. Thứ nhất là về khung ảnh mẫu, mình đã chỉnh lại nhỏ hơn, tầm 500px cho vừa với khung bài viết của blogspot. Thứ 2 trong thủ thuật gốc chỉ hiển thị cố định 5 bài viết, ở đây mình có thêm 1 chút code để hiển thị được nhiều hơn.

☼ Để thực hiện, các bạn tạo 1 widget HTML/Javascript và dán toàn bộ code của thủ thuật vào.
- Dưới đây là toàn bộ code của thủ thuật :

<!--code CSS -->

<style type="text/css">
.homeTop,.dd-homeTop{
width:500px;
}
.homeTop .topnews{
height:210px;
background:url('http://i342.photobucket.com/albums/o433/bkprobk/bg-phunu-rc.gif') no-repeat;
margin-left:0px;
padding-left:5px;
}
div.topnews div.topnewsImg{
width:265px!important;
float:left;
padding-top:20px;
}
.topnews div.topnewsImg a{
padding:0px 0px 0px 15px;
display:block;
}
.topnewsImg img{
border:0px;
width:200px;
height:160px;
}
div.topnews div.topnewsCont div{
float:left;
width:215px!important;
}
div.topnews div.topnewsCont{
float:left;
width:215px!important;
padding-top:15px;
}
.topnewsTitle{
color:#fff;
font-size:1px;
padding:10x 0px 7px 0px;
font-weight:bold;
}
.topnews-title{
font-weight:bold;
padding-bottom:5px;
font-family:Arial;
}
div.topnews-title a,div.topnews-title a:link, div.topnews-title a:visited{
color:#457a02;
font-size:17px;
text-decoration:none;
}
div.topnews-title a:hover{
color:#d00;
text-decoration:none;
}
.topnews-des{
color:#000;
height:125px;
overflow:hidden;
font-family:Arial!important;
font-size:13px!important;
font-weight:normal!important;
}
.topnews-des p, .topnews-des strong, .topnews-des b, .topnews-des span{
padding:0px;
margin:0px;
font-weight:normal;
}
.topnews-other{
color:#a2adb0;
padding-top:0px;
padding-right:30px;
float:right;
}
.topnews-pre{
padding-left:5px;
}
.topnews-next{
padding-left:5px;
}
.topnews-other img{
cursor:pointer;
padding:3px 5px;
border:0px;
}
</style>

<!-- Code chính của thủ thuật -->

<div class="homeTop">
<div class="topnews">
<div>
<script type="text/javascript" src="http://fandung.110mb.com/JS-files/PNO-RecentPosts/PNO-Resource.js"></script>

<div id="fd_Div" style="overflow: hidden; position: relative; height: 175px; width: 500px;">
<div id="fd_FrameContainer" style="position: relative; width: 500px; top: 0px; left: 0px;">


<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

fd_frame = new Array();

fd_frame[0] = "fd_frame0";
fd_frame[1] = "fd_frame1";
fd_frame[2] = "fd_frame2";
fd_frame[3] = "fd_frame3";
fd_frame[4] = "fd_frame4";
fd_frame[5] = "fd_frame5";

showRandomImg = true;

fntsize = 12;
acolor = "#555";
cmcolor = "#555";
aBold = true;

text = "no";
showPostDate = false;

summaryPost = 120;
summaryFontsize = 12;
summaryColor = "#000";

numposts = 6;

label = "Love";
home_page = "http://www.fandung.com/";

</script>
<script src="http://fandung.110mb.com/JS-files/PNO-RecentPosts/PNO-recentpost.js" type="text/javascript"></script>

</div>
</div>

<script type="text/javascript">
window["fd"] = new RadRotator('fd',1);
window["fd"].AutoAdvance = 1;
window["fd"].FrameTimeout = 5000;
window["fd"].RotatorMode = 'Slideshow';
window["fd"].NumberOfFrames = 6;
window["fd"].PauseOnMouseOver = 1;
window["fd"].HasTickers = 0;
window["fd"].FrameIdArray = new Array('fd_frame0', 'fd_frame1', 'fd_frame2', 'fd_frame3', 'fd_frame4', 'fd_frame5');
window["fd"].UseRandomSlide = 0;
window["fd"].UseTransition = 0;
window["fd"].Start();
</script>

</div>

<div class="topnews-other">

<span class="topnews-pre"><img src="http://i342.photobucket.com/albums/o433/bkprobk/iconPre.gif" onclick="fd.ShowPrevFrame()"></span>
<span class="topnews-next"><img src="http://i342.photobucket.com/albums/o433/bkprobk/iconNext.gif" onclick="fd.ShowNextFrame()"></span>
</div>

</div>
</div>

- Thay đổi các code màu tím cho phù hợp (phần này khác quen thuộc, nên mình sẽ đi qua).
- Bây giờ tới phần chính của thủ thuật, bây giờ các bạn sẽ chú ý tới các đoạn code màu đỏ. Code này chính là điểm khác biệt so với khác style khác của tiện ích recent Posts. Chúng ta thấy có 4 vùng được tô đỏ, trong đó :

+ numposts = 6; và code window["fd"].NumberOfFrames = 6; : đây là 2 đoạn code điều chỉnh số bài viết sẽ được trình diễn.
+ Mảng :
fd_frame = new Array();

fd_frame[0] = "fd_frame0";
fd_frame[1] = "fd_frame1";
fd_frame[2] = "fd_frame2";
fd_frame[3] = "fd_frame3";
fd_frame[4] = "fd_frame4";
fd_frame[5] = "fd_frame5";
và mảng :
window["fd"].FrameIdArray = new Array('fd_frame0','fd_frame1','fd_frame2','fd_frame3','fd_frame4','fd_frame5');

hai mảng này chính là code để điều chỉnh số frame sẽ được hiển thị. Nếu bạn cho phép hiển thị 10 bài viết mà quên điều chỉnh lại các mảng này, thì số bài viết sẽ hiển thị sẽ không phải là 10.

Việc chỉnh sửa 2 mảng này rất đơn giản, ở trong code mẫu là dùng cho hiển thị 6 bài viết, nếu bạn muốn hiển thị 10 bài thì sửa lại code của 2 mảng như bên dưới :

fd_frame = new Array();

fd_frame[0] = "fd_frame0";
fd_frame[1] = "fd_frame1";
fd_frame[2] = "fd_frame2";
fd_frame[3] = "fd_frame3";
fd_frame[4] = "fd_frame4";
fd_frame[5] = "fd_frame5";
fd_frame[6] = "fd_frame6";
fd_frame[7] = "fd_frame7";
fd_frame[8] = "fd_frame8";
fd_frame[9] = "fd_frame9";

mảng thứ 2
window["fd"].FrameIdArray = new Array('fd_frame0', 'fd_frame1', 'fd_frame2', 'fd_frame3', 'fd_frame4', 'fd_frame5', 'fd_frame6', 'fd_frame7', 'fd_frame8', 'fd_frame9');

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

read more...

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

Theo yêu cầu của 1vn.biz

[FD's BlOg] - Trước kia mình cũng đã giới thiệu việc chèn ảnh của tác giả vào trước mỗi tiêu đề bài viết, và thủ thuật hôm nay cũng dùng 1 cách tương tự.
Thủ thuật này đã được 1 bạn bên 1vn.biz yêu cầu mình từ khá lâu, nay mới trả lời được. Nhân đây mình cũng gửi lời cáo lỗi tới bạn 1vn.biz cũng như những bạn khác đã yêu cầu mình nhưng chưa nhận được phản hồi.

Trước khi đi vào thủ thuật, mình xin lưu ý là thủ thuật này chỉ sử dụng thích hợp cho các bài viết trong blog có 1 nhãn, vì ở đây mình sự dụng việc nhận diện nhãn, khi đúng nhãn đã mặc định thì sẽ hiển thị 1 ảnh tương ứng. Nếu 1 bài viết có nhiều nhãn thì việc hiển thị ảnh này sẽ ko được hợp lý (sẽ xuất hiện nhiều ảnh cùng 1 lúc).

Hình ảnh minh họa kết quả:

☼ 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 mở rộng mẫu tiện ích
4. Chèn đoạn code CSS này vào trước dòng code ]]></b:skin>

.post-icon img {
height:20px; /*có thể tùy chỉnh lại chiều cao này (hoặc xóa nó đi) tùy theo kích thước của ảnh bạn muốn hiển thị */
float:left;
margin-right:8px;
}

5. Tiếp tục tìm đến đoạn code này :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

6. thêm đoạn code được đánh dấu highlight như bên dưới:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == &quot;Label 1&quot;'>
<img src='Link ảnh 1'/>
</b:if>

<b:if cond='data:label.name == &quot;Label 2&quot;'>
<img src='Link ảnh 2'/>
</b:if>

</b:loop>
</b:if>
</div>

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

- Thay tên nhãn và link ảnh icon cho thích hợp.
- Nếu có nhiều nhãn thì các bạn cứ thêm đoạn code tương tự như bên dưới vào trước dòng </b:loop> :

<b:if cond='data:label.name == &quot;Label 3&quot;'>
<img src='Link ảnh 3'/>
</b:if>

<b:if cond='data:label.name == &quot;Label 4&quot;'>
<img src='Link ảnh 4'/>
</b:if>

7. Save template.

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

read more...

Hướng dẫn hiển thị avatar cho comment của Blogger (mở rộng)

[FD's BlOg] - Như chúng ta đã biết Blogger đang chuẩn bị kỉ niệm 10 năm ngày blogger ra đời, chính vì thế mà gần đây blogger liên tục tung ra những tiện ích mới cho blogspot. Mới đây nhất là tiện ích hiển thị ảnh avatar cho comment từ các ảnh profile của các tài khoản từ blogger.

Việc hiển thị ảnh avatar này sẽ chỉ cập nhật cho các blog mới được tạo, các blog đã được tạo từ lâu, và qua chỉnh sửa template nhiều (như blog của mình) thì muốn hiển thị avatar cho comment thì các bạn phải chỉnh sửa đôi chút trong code template.

Ở thủ thuật này, ngoài việc chỉnh sửa code để có thể sự dụng chức năng ảnh avatar thì mình còn hướng dẫn thêm cho các bạn tạo avatar mặc định cho comment không có avatar. Do hiện tại tiện ích mà blogger cung cấp chỉ cho phép hiển thị ảnh avatar của các tài khoản blogger, vì thế những comment từ các tài khoảng khác sẽ không hiển thị được ảnh avatar, và avatar mặc định sẽ lấp đầy chỗ thiếu hụt đó.

Và đây là ảnh minh họa avatar cho comment.

☼ Để hiển thi được avatar cho các comment, các bạn thực hiện 2 bước sau:
1. Tùy chỉnh trong phần cài đặt :
- bước này không quan trọng lắm, vì blogger đã mặc định chế độ hiển thị ảnh avatar cho comment rồi, tuy nhiên chúng ta cũng nên kiểm tra lại.
- vào bảng điều khiển
- vào phần cài đặt
- vào phần nhận xét
- ở phần "Hiển thị các hình hồ sơ trên các nhận xét?" nhấp chọn "Có"
- Lưu cài đặt

Ảnh minh họa :

2. Chỉnh sửa trong code template:

- Ở đây mình sẽ dùng 1 cách rất đơn giản để tạo avatar default cho các comment không có avatar, đó chính là việc sử dụng ảnh nền (background), khi các comment có ảnh avatar, ảnh avatar sẽ đè lên hình nền, còn các comment không có avatar thì sẽ hiển thị ảnh nền, và hình nền hiển thị này chính là ảnh avatar thay thế.

☼ Các bước thực hiện :
a. vào phần bố cục
b. vào chỉnh sửa code HTML
c. Chọn mở rộng mẫu tiện ích
d. chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

.avatar-image-container {
background:url(http://farm3.static.flickr.com/2493/3936605180_5f80a4d847_o.gif); width:35px;
height:35px;
}
.avatar-image-container img { border:none;}

e. Tiếp đến tìm đoạn code sau :

<dl id='comments-block'>

f. và thay thế nó bằng đoạn code bên dưới :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

g. tiếp tục tìm đoạn code như bên dưới :

<a expr:name='data:comment.anchorName'/>

h. và thay thế bằng đoạn code bên dưới :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

i. Save template.

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

read more...

Ẩn phần comment cho 1 bài viết nhất định

[FD's BlOg] - Với thủ thuật đơn giản này ta sẽ ẩn toàn bộ phần comment cho 1 bài viết nhất định nào đó. Tức là sẽ không cho phép hiển thị hay post comment. Thích hợp cho các bạn tạo thêm các trang từ bài viết cho blog. Thủ thuật này cũng là thủ thuật yêu cầu của 1 blogger đã nhờ mình qua yahoo.

Khi bạn muốn tạo 1 trang nào đó cho blog, ta chỉ có thể tạo từ việc soạn thảo thêm 1 bài viết mới. Tức là biến 1 bài viết thành 1 trang cho blog. Ví dụ khi bạn muốn tạo 1 trang nào đó, để cho trang này trông pro hơn, các bạn có thể lược bỏ các phần như : tiêu đề, label, comment, footer của bài viết... nó chung chỉ giữ lại phần nội dung của bài viết, khi đó nội dung của bài viết chính là nội dung của page đó. Ví dụ tạo trang contact, khi lược bỏ hết các phần đó, ta sẽ chỉ còn lại form liên hệ.

Đó là 1 số giới thiệu nhỏ cho việc tạo các trang cho blog. Bây giờ ta sẽ vào phần chính của thủ thuật này.

Hình ảnh minh họa :

Trang đã ẩn phần comment

Trang khác

☼ Để thực hiện các bạn thực hiện các bước quen thuộc bên dưới :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. Thêm đoạn code bên dưới vào sau dòng code ]]></b:skin>

<style type='text/css'>

<b:if cond='data:blog.url == "Link bài viết"'>
#comments {display:none;}
</b:if>

</style>

Nếu muốn ẩn phần comment cho nhiều bài khác nhau thì bạn dùng code như bên dưới :

<style type='text/css'>

<b:if cond='data:blog.url == "Link bài viết 1"'>
<b:if cond='data:blog.url == "Link bài viết 2"'>
#comments {display:none;}
</b:if>
</b:if>

</style>

Đối với các template đã qua convert (chỉnh chỉnh sửa lại), có thể id của phần comment không phải là comments, vì thế nếu code template của bạn nào ko có id này thì hãy xác định lại cho đúng id của phần comment.

4. Save template.

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

read more...

Thủ thuật yêu cầu : 1 style phân trang (Navigation page) khá đẹp mắt cho blogspot

Theo yêu cầu của bạn Trần Tuấn (suckhoe24h.blogspot.com)

[FD's BlOg] - Trước kia mình có giới thiệu cho các bạn 1 thủ thuật tạo thanh phân trang cho blogspot, bài viết này cũng sử dụng cách tương tự để tạo thanh phân trang, nhưng chỉ khác ở giao diện hiển thị mà thôi.

Xem demo ở blog này : blogger-templates-designs.blogspot.com

Do bài viết này dùng thủ thuật tương tự như thủ thuật cũ mà mình đã đăng, vì thế các bạn có thể tham khảo thêm thủ thuật cũ ở đây nếu có gì không hiểu.

Hình ảnh minh họa :

☼ Để đơn giản các bạn hãy tạo 1 widget HTML/javascript (tốt nhất nên tạo widget nằm ở phía dưới phần main trong bố cục) và dán code bên dưới vào :
- Thực hiện với cách chèn tất cả code của thủ thuật vào 1 widget giúp ta dễ dàng tháo gỡ nó khi không còn dùng nữa. Ngoài ra nếu bạn không thích thực hiện theo cách này thì có thể chèn vào code template. Thực hiện với cách này bạn có thể tham khảo ở thủ thuật cũ.

<!--Code CSS-->
<style type="text/css">
.showpageArea {padding: 10px; color:#003366;text-align:left;width:530px;
}
.showpageArea a {
float:left;
text-align:center;
display:block;
margin:0 5px;
color:#333;
}
.showpageArea a:hover {
color:#333;
margin:0 5px;
}
.showpageNum a { background: url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif') no-repeat 0 0;
width:37px;
height:42px;
display:block;
text-align:center;
float:left;
margin:0 5px;
padding-top:6px;
text-decoration:none;
color:#333;
}
.showpageNum a:hover { background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif') no-repeat 0 100%;
color:#FFF;
}
.showpagePoint {background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif') no-repeat 0 100%;
width:37px;
height:42px;
display:block;
float:left;
text-align:center;
margin:0 5px;
padding-top:6px;
font-weight:bold;
color:#FFF;
}
.showpageNum a:link, .showpage a:link {
text-decoration:none;
color:#cc0000;
}
.showpageupPageWord a { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/nextbutton.gif') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#333;
}
.showpageupPageWord a:hover { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/provup.png') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#FFF;
}
.showpagedownPageWord a { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/backbutton.gif') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#333;
}
.showpagedownPageWord a:hover { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/nextup.png') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#FFF;
}

.pagenextprov {
text-align: center;
}
</style>

<!-- code chính -->

<!-- Do chèn code chính vào bài viết nó có tác động, nên gây ra 1 chút rắc rối, vì thế mình đính kèm bằng file text, các bạn download file này về và chèn nó vào ngay sau vị trí này -->

Link file : code-navigation.txt

- 1 chút chia sẻ : nên upload lại các ảnh có trong thủ thuật lên 1 host ảnh khác, để tránh trường hợp nhiều người dùng chung sẽ hết bandwidth. Dạo này photobucket hay gặp trường hợp hết bandwidth.

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

read more...

Code đếm số lượt download

[FD's BlOg] - Lang thang trên mạng 1 hồi mình có tìm thấy 1 trang web hỗ trợ việc đếm số lượt download. Nên cũng post lên giới thiệu cho mọi người. Đây cũng là 1 dạng của bộ đếm số đếm số lượt click. Và thủ thuật này bạn sẽ phải thực hiện thủ công cho từng link download mà bạn muốn hiển thị.

Có thể xem demo ở ngay trên blog của mình.

Đây cũng chính là yêu cầu của 1 bạn mà đã nhờ mình từ lâu, nhưng giờ mình mới giải đáp được.

Hình ảnh minh họa:

Ở hình minh họa trên ta thấy có số lượt đếm là -1, đó là do file đó chưa được download lần nào.

☼ Và đây là code của thủ thuật :

<a href="http://dstats.net/download.php?file=http://yourhost.com/yourfile.rar" target="_blank">yourfile.rar</a> ( đã tải : <script src="http://dstats.net/dstatsjs.php?file=http://yourhost.com/yourfile.rar" type="text/javascript"></script><script type="text/javascript">document.write(dsCounter);</script> lần )

- Thay code màu xanh thành link file của bạn, ví dụ http://www.mediafire.com/?jezhyztiawz
- Code màu cam là tên hiển thị của file download.

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

read more...

Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)

[FD's BlOg] - Đây là 1 thủ thuật nhỏ thích hợp cho các bạn tự chỉnh sửa template cho blog từ những template mà blogger cung cấp sẵn. date-header là phần hiển thị ngày đăng của bài viết ở ngay trên tiêu đề bài viết, trước kia mình có giới thiệu thủ thuật làm ẩn nó đi, tuy nhiên khi nó ẩn đi vẫn để lại 1 khoảng trống nhỏ ở phía trên tiêu đề bài viết. Ở bài này mình sẽ hướng dẫn các bạn loại bỏ nó đi.

Thông thường, ở trang chủ (homepage) thì phần date-header chỉ hiển thị ở ngay trên bài viết mới nhất trong ngày đó, còn trong trang bài viết thì nó luôn hiển thị ở phía trên tiêu đề bài viết.


Trước kia mình có giới thiệu cách ẩn nó là dùng lệnh display:none; để làm ẩn nó, như code bên dưới :

h2.date-header {
font-weight:bold;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#F00;
display: none;

Và ta có kết quả như bên dưới:


Tuy nhiên dùng cách này để làm ẩn nó đi thì sẽ tạo ra 1 khoảng trống nhỏ, các bạn so sánh hình trên với hình bên dưới này sẽ rõ.

Khoảng trống này sẽ làm cho việc hiển thị bài viết ở trang chủ không được đồng nhất. Ví dụ như thủ thuật "Hiển thị bài viết ngoài trang chủ giống Bo-blog (dạng list)" (các bạn có thể xem thủ thuật này ở đây), thủ thuật này mình giới thiệu cách modify lại việc hiển thị các bài viết ở trang chủ, lần trước khi test ở blogtest của mình, mình không thấy được khoảng trống của phần date-header tạo ra, nên thủ thuật chưa hoàn chỉnh (có các khoảng trống giữa các list), vì thế các bạn có thể sử dụng thủ thuật ở bài viết này để khắc phục cho khuyết điểm đó.

☼ Để thực hiện điều này, các bạn chỉ cần thực hiện vài thao tác đơn giản bên dưới:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đến đoạn code của phần date-header , nó sẽ tương tự như bên dưới :

<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>

5. Để loại bỏ khoảng trống do nó gây ra, cách đơn giản là loại bỏ nó đi, có 2 cách loại bỏ, 1 là bạn thêm đoạn code để biến nó thành đoạn text chú thích, 2 là xóa hẳn code của nó đi, ở đây mình sẽ dùng cách 1, cách này an toàn hơn (có thể khôi phục lại được). Để thực hiện các bạn chỉ việc thêm đoạn code màu đỏ vào code của phần date-header như bên dưới:

<!--
<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>
-->

6. Save template.

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

read more...

Pro TabNews mang phong cách của VnExpress

[FD's BlOg] - Bài viết này mình lại giới thiệu cho các bạn 1 TabNews hiển thị các bài viết mới nhất theo từng nhãn theo phong cách của VnExpress. Điểm nổi bật của thủ thuật này là việc hiển thị random các bài viết theo nhãn mỗi khi reload trang hoặc chuyển trang, thêm vào đó thành Header của TabNews sẽ thay đổi tương ứng với Nhãn được hiển thị bài viết, như vậy sẽ dễ dàng hơn cho người đọc nhận biết được nhãn (chuyện mục)mình đang xem.

Xem demo: LIVE DEMO

Ở TabNews sẽ gồm có các nhãn khác nhau có chung điểm nào đó, ví dụ như ta có các nhãn như :"Ảnh vui, Xe độ, Nghe nhạc,..." có chung 1 điểm là Thư Giãn chẳng hạn. Ngòai ra TabNews còn có phần SumPost là title cho các link liên kết

Hình ảnh minh họa:

- Ngoài ra ở phần Header của TabNews sẽ thay đổi theo đúng với nhãn được hiển thị bài viết (xem hình minh họa bên dưới)

Đối với nhãn "Chuyện Lạ"

Đối với nhãn "Thư Giãn"

☼ 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 bên dưới vào trước thẻ đóng </head>

<style type="text/css">
.fl {float:left;}
.fr {float:right;}

.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}
.folder-content {background-color:#ffffff;}
.other-folder {width:100%;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}
.folder, .folder-title, .folder-bottom {width:500px;}
.folder-bottom {background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_vne.gif') repeat-x 0px -73px;}

.folder {margin-bottom:5px;}
.folder-title {height: 21px;}
.folder-active, .subfolder {height: 17px;}
.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x 0px -23px;}


.folder-content {width:478px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}
.folder-bottom {height:5px;}
.folder-topnews {width:298px; padding-right:20px;}
.folder-othernews {width:160px;}
.folder-news {width:478px; padding:0px 11px; margin-bottom:10px;}
.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}
.subfolder {padding: 3px 5px 1px;}

.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}
.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}
.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}
.link-title:visited {color:#004080;}
.link-othernews {text-decoration:none; color:#000000;font:12px arial;}
.link-othernews:visited {color:#004080;}
.link-othernews:hover {text-decoration:underline;}
.folder-content p{margin-top:0px;margin-bottom:4px;}
.folder-content ul {list-style:none;margin:0;padding:0;}

.folder-content li {
padding-left:6px;
background-image:url('http://vnexpress.net/Images/Background/black-square.gif'); background-repeat:no-repeat;
background-position: 0 7px;
}

.other-folder {margin-bottom:5px;}
.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}
.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}
.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

</style>

&lt;script type='text/javascript'&gt;
rdlabels = new Array(3);

//Nhãn thứ 1 : Chuyện Lạ
rdlabels[0] = "\&lt;script\&gt;label = 'Chuyen%20La'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;";

//Nhãn thứ 2 : Chuyện Xe Độ
rdlabels[1] = "\&lt;script\&gt;label = 'Xe'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;";

//Nhãn thứ 3 : Điện Ảnh
rdlabels[2] = "\&lt;script\&gt;label = 'Film'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;";

//Nhãn thứ 4 : Thư Giãn
rdlabels[3] = "\&lt;script\&gt;label = 'Relax'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt;\&lt;/div\&gt;";

index = Math.floor(Math.random() * rdlabels.length);
&lt;/script&gt;

- Thay đổi tên nhãn và link liên kết của nhãn lại cho phù hợp với blog của bạn.

4. Save template.
5. Tạo widget HTML/Javascript rồi dán code bên dưới vào :

<div class="folder">

<div class="folder-title">

<script type='text/javascript'>
document.write(rdlabels[index]);
</script>

<div class="folder-titleright fr"></div>

</div>


<div class="folder-content" id="tdHomeFolder2">

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;
summaryPost = 247;
sumPost = 147;
numposts = 6;
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://fandung.110mb.com/JS-files/Pro-TabNews/VnE-recent.js" type="text/javascript"></script>

</div>

<div class="folder-bottom"></div>

</div>

☼ Cập nhật yêu cầu của bạn 9xhot:

- Thay vì Header của TabNews sẽ thay đổi mỗi khi Load trang theo đúng như bài viết hiển thị thì ở yêu cầu này phần Header sẽ ko thay đổi, và thay vào đó ta sẽ thêm 1 phần gọi là chuyên mục chính (parentMenu), với các Nhãn được hiển thị sẽ là các chuyên mục phụ (subMenu). Với yêu cầu này thì thủ thuật ở trên sẽ trở nên đơn giản hơn 1 chút.

- Xem demo : LIVE DEMO

Hình minh họa:

☼ Các bước thực hiện cũng tương tự như trên:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
.fl {float:left;}
.fr {float:right;}

.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}
.folder-content {background-color:#ffffff;}
.other-folder {width:100%;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}
.folder, .folder-title, .folder-bottom {width:500px;}
.folder-bottom {background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_vne.gif') repeat-x 0px -73px;}

.folder {margin-bottom:5px;}
.folder-title {height: 21px;}
.folder-active, .subfolder {height: 17px;}
.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x 0px -23px;}


.folder-content {width:478px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}
.folder-bottom {height:5px;}
.folder-topnews {width:298px; padding-right:20px;}
.folder-othernews {width:160px;}
.folder-news {width:478px; padding:0px 11px; margin-bottom:10px;}
.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}
.subfolder {padding: 3px 5px 1px;}

.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}
.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}
.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}
.link-title:visited {color:#004080;}
.link-othernews {text-decoration:none; color:#000000;font:12px arial;}
.link-othernews:visited {color:#004080;}
.link-othernews:hover {text-decoration:underline;}
.folder-content p{margin-top:0px;margin-bottom:4px;}
.folder-content ul {list-style:none;margin:0;padding:0;}

.folder-content li {
padding-left:6px;
background-image:url('http://vnexpress.net/Images/Background/black-square.gif'); background-repeat:no-repeat;
background-position: 0 7px;
}

.other-folder {margin-bottom:5px;}
.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}
.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}
.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

</style>

&lt;script type='text/javascript'&gt;
rdlabels = new Array(3);

//Nhãn thứ 1 : Chuyện Lạ
rdlabels[0] = "\&lt;script\&gt;label = 'Chuyen%20La'\;\&lt;/script\&gt;";

//Nhãn thứ 2 : Chuyện Xe Độ
rdlabels[1] = "\&lt;script\&gt;label = 'Xe'\;\&lt;/script\&gt;";

//Nhãn thứ 3 : Điện Ảnh
rdlabels[2] = "\&lt;script\&gt;label = 'Film'\;\&lt;/script\&gt;";

//Nhãn thứ 4 : Thư Giãn
rdlabels[3] = "\&lt;script\&gt;label = 'Relax'\;\&lt;/script\&gt;";

index = Math.floor(Math.random() * rdlabels.length);
&lt;/script&gt;

4. Save template
5. Tạo widget HTML/Javascript rồi dán code bên dưới vào :

<div class="folder">

<div class="folder-title">

<div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="#">Giải Trí</a></div>

<div class="folder-activeright fl"></div>

<div class="subfolder fl">
<a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Relax?max-results=10">Thư Giãn</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10">Chuyện Lạ</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Film?max-results=10">Điện Ảnh</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Xe?max-results=10">Xe Độ</a>
</div>

<div class="folder-titleright fr"></div>

</div>

<div class="folder-content" id="tdHomeFolder2">

<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;
summaryPost = 247;
sumPost = 147;
numposts = 6;
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://fandung.110mb.com/JS-files/Pro-TabNews/VnE-recent.js" type="text/javascript"></script>

</div>

<div class="folder-bottom"></div>

</div>

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

read more...