Tạo “Recent Post” với từng Label cho HomePage

Trước đây, VnBlognet cũng mày mò và kết hợp tiện ích “Recent Post” của AnhVo để sắp xếp hiển thị các bài viết theo từng chuyên mục giống các trang tin điện tử như vnexpress.net hoặc trang tin247.com, nhìn cũng tạm được và rất thuận tiện cho người đọc Tuy nhiên do không được pro trong lĩnh vực thiết kế và code nên cách hiển thị nhì hơi cứng.
Sau khi tham khảo các trang thủ thuật đã tìm được một cách tương tự của Fandung. Thủ thuật cũng giống miêu tả ở trên, sẽ tạo các chuyên mục ngoài trang chủ, mỗi chuyên mục tương ứng với 1 nhãn. Bài viết mới nhất của nhãn đó sẽ hiển thị có kèm ảnh thumbnail, các bài viết khác sẽ hiển thị dạng list, có kèm hiệu ứng mô tả bài viết. Nhưng với Fandung, code được sắp xép và viết lại nên hiển thị đạp mắt hơn, chuyên nghiệp hơn.
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HMTL
4. Dán code CSS bên dưới vào trước dòng code ]]></b:skin>

.mota{ position: relative; z-index: 0; text-decoration:none; }

.mota:hover{ background-color: transparent; z-index: 50; }

.mota span{ position: absolute; background-color: #ffffff; padding: 5px; left: -1000px; border: 1px solid #000; visibility: hidden; color: black; text-decoration: none; }

.mota span img{ border-width: 0; padding: 2px; }

.mota:hover span{ padding:5px; visibility: visible; top: 20px; left:50px; width:250px; background:#ccc; text-align: justify; }

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

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

showRandomImg = true;
tablewidth = 245;

cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

imgw = 130;
imgh = 130; imgwidth = 60;

imgheight = 60;
fntsize = 12; fontsize = 18;

fontsizecm = 11;
acolor = "#000";
titlecolor = "#f00";
aBold = true; icon = " » ";

text = "Nhận xét";
showPostDate = true;
poston = "Ngày đăng :";

minisummaryPost= 200;
summaryPost = 350;
summaryFontsize = 12;
summaryColor = "#000"; icon2 = " » ";

numposts = 8;
sobaiviet = 10;

label = "Love";
nhan= "Tình Yêu";

home_page = "http://fandung.blogspot.com/"; </script>

<script src="http://fandung.110mb.com/label-tin247/a-label.js" type="text/javascript"></script>
<script src="http://fandung.110mb.com/label-tin247/b-label.js" type="text/javascript"></script>

Để có thể hiểu rõ và tùy chỉnh code theo ý mình thì các bạn xem hình minh họa bên dưới:

  Một vài thiếu sót của thủ thuật : do mình không rành về việc chỉnh sửa code javascript, nên thủ thuật này không hoàn hảo cho lắm :

Nếu bạn nào có dự định lấy bài viết từ 1 blog khác, cái này rất đơn giản, bạn chỉ việc thay link(code màu xanh) trong code home_page = "http://fandung.blogspot.com/"; thành URL của blog mà bạn muốn lấy bài vết.
Tuy nhiên để chi tiết hơn về vấn đề này, mời bạn tham khảo thêm bài viết: Thủ thuật yêu cầu : Hiển thị bài viết ngoài trang chủ giống như trang tin247.com

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

Ngoài ra, để tránh trường hợp như thời gian vừa qua gặp phải với host Samba, xin gửi bạn đường link để sao lưu 2 file .js sử dụng trong thủ thuật này, phòng trường hợp 110mb.com bị lỗi, các bạn có thể upload nó lên 1 host free nào đó để dùng.

File 1 -  http://fandung.110mb.com/label-tin247/a-label.js download (tại đây)
File 2 -  http://fandung.110mb.com/label-tin247/b-label.js download (tại đây)

Tags: Breakingnews, Khoi tao Blog, Layout