Hướng dẫn rút ngắn tiêu đề bài viết cho tiện ích Recent posts

[FD's BlOg] - Mỗi bài viết sẽ có các tiêu đề dài ngắn khác nhau, vì thế việc hiển thị chúng trong các tiện ích "Recent posts" sẽ không được đồng bộ với nhau, nhất là với những vùng hiển thị hạn hẹp. Vì thế bài viết này mình sẽ hướng dẫn cho các bạn rút ngắn tiêu đề lại, tương tự như ta rút ngắn phần summaryPost.

Bài viết này lấy ý từ bạn Tài (roboonline.blogspot.com). Với thủ thuật này các tiêu đề của bài viết trong tiện ích "Recent posts" sẽ có độ dài tương đối bằng nhau.

Có thể ứng dụng thủ thuật này cho tiện ích "Tabnews giống trang news.zing.vn" mà mình đã giới thiệu với mọi người. Khi áp dụng thủ thuật này, khi ta rê chuột vào ảnh thì phần hiển thị tiêu đề sẽ tương đối đồng bộ với nhau hơn, và sẽ không còn gặp trường hợp phần hiển thị tiêu đề tràn ra khỏi khung ảnh vì tiêu đề quá dài.

Ngoài ra có thể ứng dụng nó cho các tiện ích "Recent posts" khác mà mình đã giới thiệu.

Hình ảnh minh họa mình đã thực hiện :

Hình 1 là lúc chưa rút ngắn tiêu đề, hình 2 là đã rút ngắn tiêu đề.

☼ Sau đây là các bước thực hiện:
- Ở mỗi thủ thuật recent post mà mình giới thiệu đều có 1 đoạn code Javascript và 1 link file javascript. Ta sẽ chỉnh sửa ở trong 2 phần này.
- Đầu tiên, với file Javascript (viết tắt : JS), các bạn hãy download file JS của thủ thuật về, rồi dùng Notepad mở nó lên và ta bắt đầu chỉnh sửa.
- Mở file JS lên, và tìm đoạn code tương tự bên dưới (thường nó nằm ở cuối đoạn):
(lưu ý là tìm đoạn tương tự, do mỗi tiện ích Recent posts khác nhau sẽ có những đoạn code khác nhau)

var trtd = '<img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a>';

document.write(trtd);

- Thay đoạn code '+posttitle+' thành đoạn code '+removeHtmlTag(posttitle,sumtitle)+'... , như bên dưới:

var trtd = '<img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+removeHtmlTag(posttitle,sumtitle)+'...</a>';

document.write(trtd);

- Khi thay đổi như vậy, thì code aBold = true; ko còn tác dụng cho tiêu đề bài viết, tức là phần tiêu đề sẽ không còn được in đậm. Vì vậy hãy thêm thẻ <b> vào để làm đậm tiêu đề (như bên dưới)

var trtd = '<img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;"><b>'+removeHtmlTag(posttitle,sumtitle)+'...</b></a>';

document.write(trtd);

- Việc thêm dấu 3 chấm chỉ là để trang trí, bạn có thể không dùng nó.
- Save file JS lại.
- Upload lại nó host của bạn.

☼ Tiếp tục bước kế tiếp là thêm 1 đoạn code nhỏ vào code JS của thủ thuật
- Thêm đoạn code màu đỏ vào như bên dưới:

sumtitle = 23;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";

- Đoạn code màu đỏ này chính là code điều chỉnh số kí tự sẽ hiển thị ở phần tiêu đề.

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