Hiển thị bài viết ngoài trang chủ giống template Revolution City

[FD's BlOg] - Thủ thuật này mình sẽ giới thiệu cho các bạn cách trang trí cho trang chủ của blogspot. Thủ thuật sẽ hiển thị các bài mới theo nhiều nhãn khác nhau ở trang chủ, với bố trí thành các ô , với mỗi ô tương ứng với 1 nhãn khác nhau.

Tham khảo thủ thuật từ template Revolution City
Cập nhật : Fix lỗi trên IE6 (15/8/2009)

Khác với bản DEMO mà mình đã giới thiệu trước, ở thủ thuật hoàn thiện này mình chỉ dùng 1 file JS thay vì 4 file JS như đã giới thiệu trước cho các bạn xem.

Xem DEMO template gốc : Revolution City

Còn đây là bản mình đã test : LIVE DEMO

Hình ảnh minh họa:

Hình ảnh đã test

Hình ảnh từ template Revolution City

Để thực hiển thủ thuật này, các bạn sẽ thực hiện 2 bước như bên dưới :
1. Đầu tiên sẽ là bước "Ẩn bài viết ở trang chủ" :
- Có thể tham khảo thủ thuật này ở đây

2. Sau khi đã ẩn bài viết ở trang chủ, các bạn hãy tạo 1 widget HTML/Javascript ở phần Main và dán tất cả code ở bên dưới vào :

<style type="text/css">
.featured {
background: #FFFFFF;
float: left;
width: 250px;
margin: 0px 10px 20px 0px;
padding: 10px 10px 10px 10px;
border: 1px dotted #94B1DF;

}

.featured img {
border: none;
margin: 0px 10px 0px 0px;
float: left;
width:70px;
height:70px; 
}

#content {
width: 600px;
margin: 0px auto 0px;
padding: 10px 0px 0px 0px;
line-height: 18px;
}

#content h3 {
background: #FFFFFF url(http://farm3.static.flickr.com/2656/3807676662_397525ba0b_o.gif);
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin: 0px 0px 10px 0px;
padding: 7px 0px 5px 0px;
}

.botline {
border-bottom: 1px dotted rgb(148, 177, 223);
padding: 0px 0px 10px;
margin-bottom: 10px;
clear: both;
}
</style>

<div id="content">

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

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

showRandomImg = true;

aBold = true;

summaryPost = 70; // số kí tự tối đa cho phép hiển thị ở phần summary post
summaryTitle = 25; // số kí tự tối đa cho phép hiển thị ở tiêu đề bài viết

numposts = 3; // số bài viết đc hiển thị
home_page = "http://fandung.blogspot.com/";

label1 = "Love";
tLabel1 = "Tinh yeu";
Title1 = "Love";

label2 = "Film";
tLabel2 = "Phim truyen";
Title2 = "Film";

label3 = "Thu%20Thuat%20Blog";
tLabel3 = "Thu Thuat Blog";
Title3 = "Blog Tips";

label4 = "Xe";
tLabel4 = "Xe";
Title4 = "Xe Do";

</script>

<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-final.js" type="text/javascript"></script>
</div>

☼ Bây giờ sẽ là 1 hướng dẫn nho nhỏ cho các bạn thực hiện:

- Ở thủ thuật này ta sẽ có 4 ô cho phép hiển thị bài viết mới nhất cho mỗi nhãn, với độ rộng của mỗi ô là 250px, cộng thêm các khoảng căn lề và đường viền thì độ rộng tổng cộng của 1 ô sẽ là 250px + 2*10px + 10px + 2*1px = 283px, như hình bên dưới

- Như vậy muốn cho hiển thị được như trong demo, độ rộng của phần main của bạn tối thiểu phải là 566px. tốt nhất cứ thay đổi độ rộng của class featured (thay đổi giá trị 250px) để việc hiển thị được hợp lý nhất.

- ở mỗi ô sẽ là 1 nhãn, tương ứng với 1 ô sẽ có 3 giá trị sau :
+ label1 = "Love"; : đây là tên của nhãn mà bạn muốn hiển thị vào ô nội dung này. (tên này phải chính xác với nhãn đó)
+ tLabel1 = "Tinh yeu"; : tên hiển thị của link liên kết ở cuối mỗi ô nội dung (có thể thay đổi tùy thích)
+ Title1 = "Love"; : tiêu đề của ô nội dung này.

- Để việc hiển thị được hợp lý. tức là các ô có cùng kích thước, thì mình đã dùng thủ thuật rút ngắn tiêu đề, để các tiêu đề có cùng độ dài, tránh trường hợp tiêu đề của các bài dài ngắn khác nhau sẽ dẫn đến các ô có độ dài khác nhau, như thế trông ko được đẹp cho lắm.

- Còn về phần kích thước của ảnh thumbnail, các bạn có thể tùy chỉnh trongcode CSS của class featured img.

Fix lỗi hiển thị không tốt trên IE6

- Do việc dùng 1 file JS nên thủ thuật không hiển thị được trên IE6, để khắc phục lỗi này, mình tạm thời trở lại bản ban đầu, tức mỗi ô nội dung sẽ dùng 1 file JS. Như thế ta sẽ có 4 file JS
- Để khắc phục điều này, các bạn chỉ cần thay đoạn code bên dưới :

<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-final.js" type="text/javascript"></script>
</div>

thành code bên dưới :

<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-1.js" type="text/javascript"></script>
</div>
<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-2.js" type="text/javascript"></script>
</div>
<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-3.js" type="text/javascript"></script>
</div>
<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-4.js" type="text/javascript"></script>
</div>

- Do mình không có thời gian nên tạm thời chỉ có thể fix lại như vậy, sau này sẽ có cách khắc phục tốt hơn.
Chúc các bạn thành công.