Chèn “Đọc thêm” cho bài đăng của blog

Posted by Tung Thanh Ly Vietnam on Tuesday, October 14, 2014 with No comments


Như bạn thấy mỗi bài đăng trên blog của tôi đều có phần “Đọc thêm” 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.

 Bước 01: 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 == "item"'> 
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;} 
</b:if>
</style>



Bước 02: 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 (Mở toang các dấu ... và đặt trỏ chuột vào phần chỉnh sửa, bấm Ctrl - F để mở mục Search)




Tìm: <data:post.body/> hoặc 
<p><data:post.body/></p>
 
Sau đó chèn đoạn mã này phía dưới nó. 
<b:if cond='data:blog.pageType != "item"'>
<a expr: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 != "item"'>
<a expr: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 != "item"'>
<span style="font-size:140%;"><a expr: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 != "item"'>
<span style="font-weight:bold;"><a expr: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 <span>…</span>).
 
<b:if cond='data:blog.pageType != "item"'>
<span style="color: rgb(255, 0, 0);"><a expr: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>
(Nguồn: http://www.thuthuatblog.com/2007/08/chn-c-thm-cho-bi-ng-ca-blog.html)