Tạo các tab chuyên mục nổi bật cho blog với việc tích hợp tiện ích "Tự động cập nhật bài viết mới"
Thứ Hai, 1 tháng 6, 2009
[FD's BlOg] - Đây lại là 1 thủ thuật mới do mình phát triển lên từ thủ thuật "Recent Posts" của VWG. Thủ thuật sẽ tạo các tab chuyên mục hot nhất trên blog của bạn với việc cập nhật các bài viết mới nhất. Và trong bài viết này mình sẽ chọn vị trí đặt các tab là ở footer.hoặc có thể xem hình minh họa kết quả bên dưới:
☼ Thủ thuật này sẽ gồm 2 bước:
A. Bước 1: chia footer thành nhiều cột (tương ứng với số tab chuyên mục mà bạn muốn hiển thị)
- Để thực hiện được thủ thuật này bạn hãy tham khảo bài viết này .
- Và nhớ thay đổi độ rộng các cột cho phù hợp với blog của bạn.
- Và đây là hình minh họa kết quả sau khi chia:
B. Bước 2: tạo widget HTML/javascript cho từng cột và dán code của thủ thuật vào. Mỗi cột tương ứng với một chuyên mục (nhãn) mà bạn sẽ lựa chọn để hiển thị.
- Và code của các chuyên mục sẽ tương tự nhau.
- Trước tiên ta sẽ xem hình minh họa bên dưới:
- Để thực hiện, bạn tạo widget HTML/Javascript ở các cột footer mà ta đã chia, rồi dán code bên dưới vào:
<div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#695641;">Tiêu đề của tab Label1</div>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://vietwebguide.googlepages.com/LDP08-06-11-01.png";
imgr[1] = "http://vietwebguide.googlepages.com/LDP08-06-11-02.png";
imgr[2] = "http://vietwebguide.googlepages.com/LDP08-06-11-03.png";
imgr[3] = "http://vietwebguide.googlepages.com/LDP08-06-11-04.png";
imgr[4] = "http://vietwebguide.googlepages.com/LDP08-06-11-05.png";
showRandomImg = true;
tablewidth = 244;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";
imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";
text = "no";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 5;
label = "Label1";
home_page = "http://www.fandung.com/";
</script>
<script src="http://data.fandung.com/js/recent-post-Jquery/recentposts-label_thumb.js" type="text/javascript"></script>
- Chú ý :
+ Thay đổi code màu xanh theo ý bạn.
+ tablewidth = 244; : đây là code độ rộng của tab các bài được hiển thị. Hãy điều chỉnh nó cho phù hợp với độ rộng của các cột footer mà ta đã chia ở bước 1, tốt nhất là 2 giá trị này ta cho bằng nhau.
+ numposts = 5; : đây là số bài viết sẽ được hiển thị.
+ label = "Label1"; : đây là nhãn mà bạn chọn. lưu ý : đối với các nhãn có kí tự khỏang trắng ta phải thay bằng chuỗi %20.
+ home_page = "http://www.fandung.com/"; : sửa lại thành địa chỉ của blog bạn.
+ Và đối với các cột còn lại ta cũng thực hiện tương tự : là chèn code bên trên vào và thay đổi lại nhãn tương ứng là được.
Chúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét