[Tips] - Ẩn hiện một phần nội dung bài viết blogspot

Ẩn hiện một phần nội dung bài viết hay còn gọi là spoiler để ẩn hoặc hiện một phần nội dung bài viết là điều thường xuyên, không còn tình trạng đôi khi google index thay thế một đoạn code làm description cho blogspot của bạn làm bài viết của bạn tụt hạng ghê gớm.

Ẩn hiện một phần nội dung bài viết blogspot
DEMO

Trong bài viết này mình sẽ hướng dẫn các bạn cách để đưa tính năng spoiler vào trong cả blogger và wordpress.
Có hai cách để thêm spoiler vào blogger và wordrepss cực đơn giản mà không dùng đến bất cứ plugin nào.

1. Thêm spoiler vào blogger – wordpress bằng html.

Cách này cực kỳ đơn giản. Khi bạn đang soạn thảo bài viết chỉ cần bạn chuyển chế độ soạn thảo bài viết sang html và dán đoạn code dưới đây vào:

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Title of Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Hiện'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Hiện" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Chèn bất cứ thứ gì mà bạn muốn nó ẩn ở đây kể cả hình ảnh, video bla bla
</div>
</div>
</div>

2. Thêm Spoiler vào Blogger – WordPress bằng CSS + HTML

Đối với Blogger các bạn đăng nhập vào khu quản lý, tìm đến Mẫu –> Chỉnh sửa HTML tìm đến thẻ ]]></b:skin> thêm vào bên trên:

.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Hiện"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Ẩn"] + .spoiler {padding:5px;}

Và khi viết bài bạn chuyển chế độ soạn thảo là HTML thêm đoạn code sau vào trong bài viết:<div>

<input class="spoilerbutton" type="button" value="Hiện" onclick="this.value=this.value=='Hiện'?'Ẩn':'Hiện';"><div class="spoiler"><div>
Nội dung mà bạn muốn ẩn
</div></div></div

Đối với WordPress bạn chỉ cần thêm đoạn code CSS phía trên vào cuối cùng của file CSS sau đó khi viết bài cũng làm tương tự như đã làm với Blogger

Thay phần: Nội dung mà bạn muốn ẩn bằng hoặc chữ Ẩn, Hiện bằng những gì mà bạn muốn.

Trên đây là hai cách dễ nhất để thêm spoiler vào blogspot và wordpress để ẩn đi một phần nội dung bài viết. Phương pháp này được áp dụng cho các bài viết dài hoặc nhiều hình ảnh giúp người đọc đỡ phần scroll trang.

Nguồn : http://www.tohaitrieu.net/