Ẩn / Hiện bài viết khi click vào button

Đâ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 button. 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 :

Trước khi click vào button ( Bài 2 )

Sau khi click vào button ( Bài 2 )

 
* Bây giờ ta đi vào thủ thuật :

1. Vào Thiết kế
2. Vào Chỉnh sửa 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 in đậm 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(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[&#9660;]
<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:

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

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

Phan Dũng