Tạo "Read More" cho mỗi bài viết trên blogspot

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Blogger mặc định hiển thị 20 bài mỗi trong mỗi trang label. Nếu như mỗi bài viết của bạn không quá dài, thì hiển thị 20 bài viết trên một trang người xem cũng có thể xem được. Ngược lại, nếu bài viết quá dài, việc hiện đầy đủ các bài viết như vậy sẽ làm cho người ta khó đọc, phải kéo lên kéo xuống thanh trượt, rất... mệt người. Bạn có thấy trang của tôi không, mỗi bài viết chỉ hiện lên một phần và có chữ Read More để mở xem toàn bộ bài viết. Chèn Read More giúp cho blog của bạn nhìn trực quan hơn, pro hơn và hạn chế việc kéo thanh trượt của khách, sẽ làm cho họ dễ chịu hơn.

Hiện tại có 2 cách để chèn Read More, giống nhau ở chỗ là sẽ hiện một phần bài viết rồi click vào read more để xem toàn bài, khác nhau ở chỗ là một cái sẽ mở một trang mới còn một cái không mở trang mới.

1. Read More dạng một:

Cách này ưu điểm là sẽ hiện chỉ bài viết đó cho nên nếu bài quá dài cũng không làm người đọc lẫn lộn. Nhược điểm: tải về lần nữa bài viết đó, do đó mất thời gian một chút.

Cách làm:

* Bước 1:
- Vào Templates bấm chọn Edit HTML, chọn Download Full Template để backup template.
- Stick vào ô Expand Widget Templates.

* Bước 2:
- Chèn đoạn mã sau trên dòng </head> và dưới dòng ]]></b:skin>

CODE 1:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
.rmlink {
display:none;
font-weight:bold;
float:right;
}
<b:else/>
span.fullpost {display:none;}
.rmlink {
display:inline;
font-weight:bold;
float:right;
}
</b:if>
</style>

- Bấm Ctrl+F và gõ vào

data:post.body

trong hộp tìm kiếm của trình duyệt để tìm trong template dòng

<data:post.body/>

.
- Chèn đoạn CODE 2 này ngay sau (hoặc ngay bên dưới) dòng <data:post.body/>.

CODE 2:

<span class='rmlink'><a expr:href='data:post.url'>->Read More...</a></span>

Ví dụ:

- Save Template lại.

* Bước 3:
- Vào Setting -> Formatting
- Trong Post Template bạn copy & paste đoạn mã sau vào:

CODE 3:

Phần miêu tả

<span class="fullpost">

Phần mở rộng

</span>

- Save Setting lại. Thế là xong rồi đó. Kể từ bây giờ, khi bạn viết 1 bài mới, bạn nhớ mở chế độ xem mã HTML. Phần miêu tả ngắn gọn của bạn sẽ hiện lên, còn phần mở rộng đầy đủ của bài viết bạn hãy soạn nó trong hai thẻ như trên. Phần mở rộng sẽ ẩn cho đến khi người xem click vào chữ Read More.

2. Read More dạng hai:

Ưu điểm của nó là mở bài viết đầy đủ nhanh, không cần phải tải lại lần nữa bài viết; có thể mở đóng topic 1 cách linh hoạt. Nhược điểm: Các phần miêu tả của bài viết khác vẫn hiện cùng 1 trang với bài viết đang xem và như vậy làm cho người xem dễ lẫn lộn. Bạn có thể preview ở trang http://1cent-millionaire.blogspot.com và hãy thử lick vào các dấu (+/-) xem thử hiểu thêm.

Cái kiểu Read More này còn có tên là Peek - A - Boo. Tôi tham khảo ở hackosphere.blogspot.com.

Cách làm:

* Bước 1: giống bước 1 của mục 1.

* Bước 2:
- Chèn đoạn mã sau trên dòng </head> và dưới dòng ]]></b:skin>

CODE 4:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

- Bạn dùng bộ tìm kiếm của trình duyệt để tìm đến dòng <b:includable id='post' var='post'>. Từ đó hãy chỉnh sửa code cho thật chính xác như đoạn CODE 5 dưới đây. Chỉnh sửa ở đây là các bạn hãy thêm các đoạn mã màu đỏ vào.

CODE 5:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>

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

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

<b:else/>

<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

- Save Template lại.

* Bước 3: Giống bước 3 mục 1.

Chúc các bạn thành công ;) !!!

Theo http://vietwebguide.blogspot.com.