Làm thế nào để thêm “read more” vào bài viết trong Blogger?

[Info Tech] Đây là một thủ thuật khá phổ biến mà rất nhiều người đã hỏi tôi. Thay vì trả lời cho từng người một, tôi quyết định viết hẳn một bài về thủ thuật này.

Với thủ thuật này, bạn chỉ cho hiển thị một phần đầu của bài viết để gây tò mò thay vì hiển thị toàn bộ bài viết trên trang chính của blog. Sau đó, nếu ai muốn đọc phần còn lại của bài viết, họ có thể ấn vào link “read more” để xem bài viết hoàn chỉnh. Thủ thuật này rất hữu dụng đối với những bài viết dài trên một trang. (Lưu ý, ban cần phải để chế độ mở đối với post pages thì mới sử dụng được thủ thuật này.)


Bước 1: Cập nhật mã (code) template của bạn

Đầu tiên bạn cần phải biên tập lai đoạn code sẵn có, vì vậy tôi gợi ý là các bạn nên sao chép lại đoạn code cũ và dán vào notepad hoặc bất kỳ chương trình soạn thảo nào. Ngoài ra, tốt nhất là bạn nên backup template của mình trong trường hợp có vấn đề gì. Còn bây giờ, hãy tìm kiếm (CTRL+F) trong vùng soạn thảo để tìm đoạn code sau: post-header-line-1. Đây là đoạn code mặc định mà Blogger bao gồm nhưng một vài custom template đã lấy ra hoặc sửa đổi, vì vậy bạn có thể gặp rắc rối để tìm ra đoạn code trên. Nếu bạn không thể tìm ra đoạn code trên hãy thử tìm <data:post.body/> xem sao. Template của bạn sẽ chắc chắn có đoạn code này vì đây chính là cụm từ dành cho phần body trong bài post của bạn.

Còn bây giờ, tùy thuộc vào đoạn code mà bạn có thể tìm thấy sẽ quyết định độ dễ khó của bước tiếp theo. Bạn có thể cần phải điều tra trước khi làm để xem xem đoạn code có hoạn động tốt trên template của bạn hay không. Ý là để lấy đoạn code mới dán vào template của bạn trước tag <data:post.body/>. Hãy tiếp tục đọc và hi vọng là lời giải thích dưới đây sẽ minh học rõ ràng để bạn có thể ứng dụng thủ thuật này vào custom template của bạn.

Hãy thêm đoạn code sau dưới tag <div class=’post-header-line-1′/> và <div class=’post-header-line’> nếu bạn có cả hai.

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

Kết quả sẽ trông như thế này:Nếu bạn không có tag mặc định <div class='post-header-line-1'/> thì thay vào đó kết quả của bạn sẽ trông giống kiểu như thế. Đây là cách mà nó sẽ được làm trong custome template của MushBlue Blogger:



Chú ý hai ví dụ mà đoạn code được bôi vàng và tag <data:post.body/> tags là tương tự - phụ thuộc vào template mà bạn dùng.

Bây giờ hãy thêm một đoạn code nữa vào để tạo link “read more” cho blog của bạn. Đoạn code này sẽ được đặt bên dưới tag <data:post.body/> vì vậy hãy sao chép đoạn code sau và dán vào. Bạn có thể thoải mái thay đổi chữ “Read more…” theo ý của mình. Nhưng cẩn thận đừng xóa đi bất kỳ mã nào khác trong khi tiến hành.

<b:if cond='data:blog.pageType != "item"'>

<br /> <a expr:href='data:post.url'>Read more...</a>

</b:if>

</b:if>

Giả sử có hai tag </b:if> trong code trên thì đừng nghĩ là sai. Kết quả sẽ trông như sau:



Đoạn code sẽ giồng nhau dù bạn có dùng template nào đi chăng nữa. Chỉ cần đảm bào là nó được đặt ở dưới tag <data:post.body/> như trong hình là được.

Bây giờ hã xem kết quả cuối cùng như thế nào. Dưới đây là đoạn code đã được cập nhật mà bạn mới tạo xong:



Ok, bạn đã làm xong phần chỉnh sửa code của template. Hãy dán vào Blogger html và lưu lại. Nếu bạn thấy hiện error, tức là bạn đã nhầm lẫn. Lỗi chung nhất chính là xóa nhầm một dấu > hay dấu < trong khi dán vào đoạn code mới. Nếu đã được lưu thành công, thì bạn có thể nhanh chóng chuyển sang bước tiếp theo và thêm một bài bước vào phần format setting.Đối với bước này, bạn cần phải đi tới tìa khoản Blogger chọn Setting sau đó formatting và kéo xuống gần cuối trang. Đó chính là lựa chọn cuối cùng được gọi là “Post Template”. Bạn sẽ dán đoạn code sau vào:

Bước 2: Thêm một lớp Tag vào phần mặc định của template

<span class="fullpost">

</span>



Bước 3: Tạo một post mới.

Giờ chúng ta đã có mọi thứ sẵn sàng, đến lúc phải thử xem nó ra sao. Hi vọng là bạn đã nghĩ ra một cái gì đó để post. Nếu chưa, thì chúng ta hãy tạo một bài viết thử nghiệm rồi ssau đó xóa đi. Khi bạn click vào tag “Posting” bạn sẽ thấy vùng soạn thảo xuất hiện tag <span class=”fullpost”> và </span>. Nếu không, có nghĩa là bạn chưa lưu cẩn thận, hãy quay lại và lưu lại lần nữa. Vì thế kho viết bài mới, bất kỳ thứ gì bạn đặt ở trên tag <span class=”fullpost”> sẽ trở thành đoạn gây sự chú ý. Phần chính của bài viết sẽ nằm giữa tag <span class=”fullpost”> và </span> để link “read more…” có thể hoạt động. hãy nhìn screenshot bên dưới. Đôi khi hình ảnh minh họa rõ ràng hơn lời nói.



Còn bây giờ hãy xuất bản và xem trước bài viết của bạn để xem “read more…” sẽ hoạt động ra sao. Nếu nó không hoạt động vì một lý do nào đó, hãy trở lại và làm lại các bước một lần nữa. Chắc có thể bạn dán nhầm đoạn code. Rất khó để giải quyết vấn đề này vì mỗi template lại có những đặc điểm riêng biệt, vì thế hãy chắc chắn rằng bạn đã kiểm tra hai lân template của mình trước khi nhờ sự giúp đỡ trong phần comment dưới đây. Đây là bài viết với link “read more…” mà tôi đã tạo ra từ những bước trên.



Thông tin thêm

Nếu bạn muốn quay trở lại và cập nhật những post cũ với công cụ “read more…” bạn có thể làm. Chỉ việc quay về và biên tập lại mỗi bài post một cách thủ công. Cần thiết phải dán tag <span class=”fullpost”> và </span> giữa hai phần của bài post. Đối với một số bài viết, bạn không cần dùng link “read more…” bạn chỉ việc xóa 2 tag trên đi là xong. Sau đó bài viết của bạn sẽ được hiển thị toàn bộ như trước kia. Chúc thành công.

Misshaudau