Chèn "Read More" hoặc "Đọc Thêm"

Như bạn thấy mỗi bài đăng trên blog của tôi đều có phần “Read More...” và click vào phần này thì bài viết đầy đủ mới hiển thị ra. Nội dung phía trên tóm tắt bài viết. Sử dụng thủ thuật này giúp blog bạn chuyên nghiệp và trông giống một website hơn. Sau đây là 2 cách để các bạn làm điều đó:

Cách 1: Nếu bạn sài template NEO
Vì ở template NEO nó đã hổ trợ cho bạn sẵn tính năng này rồi, nên bạn chỉ việc sài nó thôi. Cách sài như sao:
Mõi lần bạn gửi bài, bạn hãy chép đoạn code sau đây vào khung edit bài viết.
Ở phần "Type Your Sumary Here" bạn đánh phần nội dung được hiển thị
"Type Rest of the post here" bạn đánh phần còn lại của nội dung được gửi.

Type your summary here <span id="fullpost"> Type rest of the post here </span>

Sau đó bạn chỉ việc gửi đi, và bài viết của bạn sẽ hiển thị giống như bài viết này của mình, khi bấm vào read more nó sẽ hiển thị phần nội dung còn lại của entry và nếu bấm vào Collapse thì nội dung sẽ được tóm gọn lại.

Để cho dể dàng và đở mất công các bạn phải copy đoạn code đó mõi lần gửi bài. Các bạn có thể để mặc định trong khung edit entry của mình đoạn code đó. Có nghĩa là cứ mõi lần vào edit bài viết thì nó sẽ tự động gán đoạn code trên vào.
Thì bạn làm như sau:

Đầu tiên bạn vô bảng điều khiển của blog bạn >>> rồi vào Settings(cài đặt) >>> Tiếp đến vào Formatting(định dạng) >>> rồi bạn kéo xuống cuối trang, ở phần Post Template(Định Dạng Bài Gửi) >>>> Bạn copy đoạn code ở trên vào khung này >>> sau đó Save lại.

Thì kể từ bây giờ cứ mõi khi bạn vào mục edit entry thì đoạn code sẽ có sẵn ở đó cho bạn nhập nội dung vào.

Cách 2: Cách này dùng cho những template bình thường của d2vn( admin Thủ Thuật Blog) viết.
Nguồn bài viết: here


BƯỚC 1: SAO LƯU TEMPLATE VÀ CHÈN CSS

Sau khi đăng nhập vào blogger.com, click trên Template (Mẫu) -> Edit HTML (Chỉnh sửa HTML) thực hiện sao lưu template vào máy tính của bạn.

Sao lưu xong, kéo thanh trượt tìm tag (Có thể bấm Ctrl + F để tìm) và chèn vào phía trên nó đoạn mã dưới và lưu lại.

<style> <b:if cond="'data:blog.pageType"> span.fullpost {display:inline;} <b:else/> span.fullpost {display:none;} </b:if> </style>

BƯỚC 2: CHÈN LIÊN KẾT “ĐỌC THÊM”

Tiếp tục hãy click Expand Widgets Template và kéo thanh trượt để tìm tag

<data:post.body/>

(Có thể bấm đồng thời Ctrl + F để tìm). Sau đó chèn đoạn mã này phía dưới nó.

<b:if cond="'data:blog.pageType"> <a href="'data:post.url'">Đọc thêm!</a> </b:if>

BƯỚC 3: TÙY BIẾN “ĐỌC THÊM”

Nếu bạn dùng đoạn mã trên, khi click vào “Đọc thêm!” bài đăng này sẽ được load về trình duyệt và thay thế trang trước đó. Bạn muốn bài đăng được mở ở một cửa sổ mới hãy chèn đoạn mã này.

<b:if cond="'data:blog.pageType"> <a href="'data:post.url'" target="'_blank'">Đọc thêm!</a> </b:if>

Trường hợp bạn muốn chữ “Đọc thêm” lớn hơn hay nhỏ hơn so với các chữ khác của bài hãy chèn đoạn mã dưới. Thay đổi phần trăm để được nhỏ hơn.

<b:if cond="'data:blog.pageType"> <span><a href="'data:post.url'" target="'_blank'">Đọc thêm!</a></span> </b:if>

Trường hợp bạn muốn chữ “Đọc thêm” in đậm hãy chèn đoạn mã dưới.

<b:if cond="'data:blog.pageType"> <span style="font-weight:bold;"><a href="'data:post.url'" target="'_blank'">Đọc thêm!</a></span> </b:if>

Trường hợp bạn muốn chữ “Đọc thêm” có màu hãy chèn đoạn mã dưới (ví dụ ở đây là màu đỏ, bạn có thể lấy màu khác: Từ cửa sổ đăng bài Compose, gõ vài ký tự và chọn màu, click Edit Html để lấy mã, chữ có màu sẽ nằm giữa …).

<b:if cond="'data:blog.pageType"> <span style="color: rgb(255, 0, 0);"><a href="'data:post.url'" target="'_blank'">Đọc thêm!</a></span> </b:if>

Bạn có thể sử dụng kết hợp cả ba.

BƯỚC 4: THAY ĐỔI CÁCH ĐĂNG BÀI

Ở cửa sổ đăng bài, thay vì chọn Compose, hãy chọn Edit Html và cấu trúc bài đăng của bạn như bên dưới.

Phần tóm tắt hay đầu bài đăng <span class="fullpost"> Phần còn lại </span>

Xem hình:

Bài đăng phải nằm trong cấu trúc này. Nếu bạn cảm thấy khó nhớ đoạn code thì hãy vào Settings (Cài đặt) -> Formatting (Định dạng), kéo thanh trượt và tìm Post Template (Mẫu đăng bài), dán đoạn mã vào box kế bên và click Save Settings (Lưu cài đặt) để lưu lại. Mỗi lần đăng bài, đoạn mã này được chèn trước và bạn chỉ việc làm các thao tác để đăng bài.

Chúc thành công.