"Tạo nút readmore (Đọc tiếp) cho blogger"

(Traidatmui.com) – Có rất nhiều blog đã viết về thủ thuật tạo nút readmore (đọc thêm) cho blogger, tuy nhiên thời gian qua mình vẫn nhận thấy còn nhiều bạn chưa biết đến cách thực hiện thủ thuật này. Vì lý do đó hôm nay mình xin chia sẽ cách làm nút readmore cho blogger để các bạn tham khảo. Với thủ thuật này thì bài viết của bạn sẽ chỉ hiển thị tóm tắt một đoạn nội dung trong bài viết, và bài viết của bạn sẽ hiển thị đầy đủ khi bạn click vào nút readmore này hoặc tiêu đề bài viết.

Hình ảnh minh họa
1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (design) và chọn chỉnh sửa HTML
3. Thêm đoạn code bên dưới vào trước thẻ </head>
<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

4. Bạn hãy chèn đoạn css bên dưới vào trước thẻ ]]></b:skin>
.readmore {
float:right;
margin:1px 10px 5px 0px;

padding:3px;}
.readmore a{
color:#fff;
padding:3px 5px 3px 5px;
background:#0000ff;
}
.readmore a:hover{
color:#0000ff;
background:#ddd;}

5. Tiếp theo tìm đến đoạn mã như bên dưới
<data:post.body/>

6. Sau đó chèn code sau vào bên dưới code vừa tìm được ở trên
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div></b:if>

Nếu bạn muốn thay nút readmore băng hình ảnh thì bạn chỉ việc thay đoạn text trong code (Đọc tiếp...) thành đoạn mã sau
<img src="http://lh6.ggpht.com/_BTztXRwC9ik/TH-JDtM8uWI/AAAAAAAADL4/NlNmxVwdeXQ/Untitled-1.gif" />

Bạn chỉ việc thay link ảnh trên (dòng màu cam) thành link ảnh mà bạn muốn hiển thị.
7. Sau khi hoàn tất công việc trên bạn save template lại.
8. Bây giờ để sử dụng tính năng này thì trong khi đăng bài thì bạn hãy chèn thêm code vào nội dung bài đăng như sau
Phần nội dung sẽ hiển
<span class="fullpost">
Phần nội dung ẩn đi
</span>

Phần màu xanh đậm chính là đoạn nội dung hiển thị dạng tóm tắt bài đăng của bạn, còn phần màu đỏ đậm là phần còn lại của nội dung bài viết. Phần này sẽ được ẩn đi và hiển thị đầy đủ khi click vào nút readmore.

Để không quên đoạn mã trên bạn hãy làm thêm bước này. Bây giờ bạn chọn phần cài đặt (Settings), vào phần định dạng (Formatting), sau đó bạn cuộn chuột xuống tìm đến phần mẫu bài đăng (Post Template)và dán vào khung đó đoạn mã sau và save lại
Phần nội dung sẽ hiển
<span class="fullpost">
Phần nội dung ẩn đi
</span>

Bây giờ mỗi khi bạn đăng bài thì bạn sẽ thấy dòng mã đó hiển thị trong khung soạn thảo của bạn.

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

Xem khác cùng chủ đề

5 nhận xét | Viết lời bình

11/01/2010 05:40:00 CH Trả lời

code realmore này tuy ko auto, nhưng khi ta muốn đọc bài viết nào dấy thì chỉ cần click realmore là đọc dc luôn,đỡ phải load page:X

Nặc danh
5/21/2011 08:11:00 SA Trả lời

Nếu muốn làm như thế ở Blog Wordpress thì thực hiện như thế nào vậy?

9/01/2011 08:31:00 SA Trả lời

sao khong cho dinh dang luu o mau lun di, lam the nay bat tien

Admin
9/01/2011 08:44:00 SA Trả lời

Thật ra đây là cách làm hơi thủ công, trong Blogger cũng đã có tính năng này chỉ cần click thôi. Tuy nhiên bạn cũng có thể sử dụng thủ thuật hoàn toàn tự động như bài viết này sẽ tiện hơn

4/18/2016 04:02:00 SA Trả lời

Ad giúp mình với.Mình làm như hướng đẫn nhưng đoạn nhưng từ"readmore" ko hiện trên trang và thay link bằng ảnh động cũng không thấy lun.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang