Loading post navigation ...
 
 

Pro page

12
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[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.


Enter your mail address:

12

Ác Quỷ

Hihi haha zui wá zui wá =))

Bởi thế mới có câu: "tạo thủ thuật là một nghệ nhân, áp dụng thủ thuật mới là... ngệ sĩ". Ka ka ka :D

Thanks FD rất nhìu, trang chủ của roboonline giờ đẹp lên rất nhiều rùi :)

Thanks thanks :-^

Hihi haha zdui zdui zdui...

fandung

ko ngờ nó làm Tài dzui dữ vậy :)

mmovn

thanks a, rất hữu ích

9xhot

Khi view source nhiều trang em thấy có những cái này:

meta name="MSSmartTagsPreventParsing" content="true"..
link rel="alternate"...
link rel="EditURI"...
link rel="service.post"...
meta content='blogger' name='generator'..
link rel="EditURI" type="application/rsd+xml" title="RSD"...
meta name="robots" content="INDEX,FOLLOW"

Anh giải thích mấy cái đó cho em với, nó có tác dụng SEO không vậy?

fandung

@9xhot : có tác dụng SEO chứ em.

Viet-offer.com

Thủ thuật hay lắm anh Dũng.:))

Tiếng Khmer Online

Thấy có đến 2 cái +posttitle+ thì thay cái nào đây ạ?

fandung

@Trai miền Tây : mình có hướng dẫn trên đó mà nó nằm trong đoạn code var trtd = ...

Với các tiện ích Recent posts thông thường thì chỉ có 1 đoạn này thôi.

Còn 1 số thủ thuật của mình thì có thể có trên 2 đoạn code như vậy. Nếu bạn muốn rút gọn tiêu đề của phần nào thì áp dụng cho code đó.

Blog4vn

cái này có rút ngắn được cho tiêu đề của bài viết chính trong trang chủ được không FD ?

vnthutinh

Bạn có thể chỉnh sử rồi up lên host để mọi người dùng được không, thực sự mình chỉnh nhưng không biết up thế nào. Cảm ơn bạn

Sim 9x

cảm ơn bạn. bài viết khá Thế giới Sim VIP http://simvip.co.cc

tueman84

nói ó fiel js nhhung có đâu, sao down được đây Dũng



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home