Học Thiết Kế Website Online Miễn Phí

Tổng hợp kiến thức, tài liệu để bạn học thiết kế website online miễn phí. hướng dẫn học thiết kế website từ đơn giản đến nâng cao một cách hoàn thiện nhất

Liên Kết : Chuyển Nhà Thanh Hóa | Thiết Kế Website | Học Lái Xe OTo Tại Thanh Hóa |Chuyển Hà Hà Nội |

Code ẩn hiện một phần nội dung bài viết trên blog

Share Button

Code ẩn hiện một phần nội dung bài viết trên blog

Code giúp chúng ta ẩn một phần nội dung trên bài viết của blog, Khi khách hàng muốn xem có thể click để hiện ra hoặc là ẩn đi nếu muốn.


Giới Thiệu :

    Làm gọn nội dung trên bài viết blog của bạn. Ẩn đi những thứ không cần thiết và khi khách hàng muốn biết về thông tin đó thì có thể click để hiện ra khi có nhu cầu.

   Ví dụ như phần mô tả của một ứng dụng, Phần lời bài hát của một website nhạc hoặc là phần tóm tắt phim của một website xem phim online nào đấy.

   Tôi có ý tưởng hay lắm. Bạn có thể làm một website chuyên bên học tập và giải các câu đố. Phần ẩn đi là phần đáp án. Khi khách truy cập giải được rồi hoặc muốn xem kết quả thì có thể click để hiện ra.

Ví dụ :

Nội dung văn bản, hình ảnh, HTML/javascript nào đó

 

 

 

 Code ẩn hiện một phần nội dung bài viết trên blog

<div>
<div>
<input type="button" value="Xem Thêm Tại Đây" style="width:250px; font-size:11px; margin:0px; padding:4px; border="1"" 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 Đi'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }">
</div>
<div>
<div style="display: none; border:#4F4F4F 1px solid; padding: 4px; background:# ">

Nội dung văn bản, hình ảnh, HTML/javascript nào đó

</div>
</div>
</div>

Bạn có thể thay đổi nội dung mầu đỏ

width:250px = chiều rộng của khung xem thêm tại đây bạn có thể thay 250 = số khác nhỏ khoặc lớn hơn

Hướng dẫn sử dụng code :

Code áp dụng được cho cả blogger, wordpress, website khác…..

khi viết bài bạn chuyển sang chế độ soạn thảo văn bản hoặc là HMLT để chèn code.

Chú ý vô cùng quan trọng

Khi đã chuyển sang văn bản/HMTL để dán code thì không được chuyển lại Viết / Trực Quan. Vì điều này sẽ khiến code bị lỗi ngay lập tức.

Mẹo sử dụng : Bạn cứ soạn thảo như bình thường . Khi xong nội dung thì chuyển sang HMTL / Văn Bản để dán code vào. Sau khi chỉnh sữa nội dung xong thì lưu và đăng luôn. Không cần chuyển lại sang chế độ Viết / Trực quan.

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

Code ẩn hiện một phần nội dung bài viết trên blog

Share Button

1 Comment

Add a Comment
  1. có plugin nào tự động rút gọn nội dung bài viết kiểu như Youtube rút gọn mô tả video thì hay

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Học Thiết Kế Website Online Miễn Phí © 2017 Frontier Theme