ẩn hiện bài viết khi click vào buttom

Đây là một ứng dụng từ thủ thuật "Ẩn hiện widget" mà mình đã đăng. Tương tự như thủ thuật đối với widget, mặc định ta sẽ cho bài ẩn đi, và sẽ được hiển thị khi ta click vào buttom. Và ở thủ thuật này mình chỉ làm ẩn phần body của bài viết mà thôi.

Hình minh họa:

☼ Bây giờ ta đi vào thủ thuật:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đoạn code như bên dưới:

<b:if cond='data:post.title'>

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

</b:if>

5. Thêm đoạn code màu đỏ vào như bên dưới:

<b:if cond='data:post.title'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[▼]
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>

</b:if>

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

</b:if>

6. Tiếp tục xuống dưới tìm đoạn code sau:

<data:post.body/>

7. Vào thay thế nó bằng code bên dưới :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<data:post.body/>

<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>

<b:else/>
<data:post.body/>
</b:if>

- Lưu ý: đối với các blog có tiện ích "Readmore..." thì các bạn di chuyển code của nó vào sau dòng code <data:post.body/> , giống như bên dưới:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<data:post.body/>
{Code của thủ thuật readmore}
<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>

<b:else/>
<data:post.body/>
{Code của thủ thuật readmore}
</b:if>

Code của thủ thuật readmore có dạng như bên dưới:

8. Save template.

- Lưu ý: thủ thuật này mình chỉ cho phép hiển thị ở trang chủ, nếu các bạn muốn hiển thị thủ thuật này ở tất cả các trang (trừ bài viết) thì các bạn thay đổi code như bên dưới:

Đổi dòng code này:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
thành:
<b:if cond='data:blog.pageType != "item"'>

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