Thư viện

Trải nghiệm

Thứ Năm, tháng 12 18, 2014

[Tips] - Nút button Open/Close mở đóng & ẩn hiện nội dung cho Blogspot Blogger

Hướng dẫn thủ thuật blog tạo Nút button Open/Close mở đóng & ẩn hiện nội dung cho Blogspot Blogger tại Terocket, nút ẩn hiện cho nội dung blogspot!

Chia sẻ:
[Tips] - Nút button Open/Close mở đóng & ẩn hiện nội dung cho Blogspot Blogger
Khi người dùng muốn xem nội dung, họ sẽ click vào Nút Open/Close để xem, không xem thì nó ẩn lại!

Có nhiều bạn thắc mắc và hỏi Terocket rằng làm sao để ẩn nội dung và hiện nội dung khi cần thiết. Có nghĩa là, khi bạn đọc xem một nội dung, nhưng ban quản trị chưa muốn hiển thị ngay hoặc để rút ngắn nội dung cho gọn, và lúc nào bạn đọc muốn xem thì click vào xem, không muốn xem nữa thì click vào ẩn đi....thì hôm nay Terocket đáp ứng yêu cầu đó của các bạn, và ra thủ thuật [Tips] - Nút button Open/Close mở đóng & ẩn hiện nội dung cho Blogspot Blogger này. 

Live Demo

Trước đây Terocket đã có hướng dẫn một thủ thuật cũng khá giống với thủ thuật này, đó là khi người dùng vào website, muốn xem nội dung, họ phải like hoặc + nội dung mới xem được, đã có rất nhiều blog và website đã thực hiện thủ thuật này. Để thực hiện bạn vào bài viết: Hiện nội dung được ẩn khi like mạng xã hội cho blogspot nhé!

Với thủ thuật blog [Tips] - Nút button Open/Close mở đóng & ẩn hiện nội dung cho Blogspot Blogger này, thì việc thực hiện nó vô cùng đơn giản, được tích hợp bởi một đoạn code ngắn, sau đó chèn vào HTML của nội dung thế là xong. Điểm lợi thế của thủ thuật blog này đó là nó ngắn, dễ dàng, không sử dụng nhiều Javascript, tốc độ nhanh, bằng CSS chuẩn SEO, tương thích mọi trình duyệt...rất tuyệt vời...Giờ thì cùng Terocket thực hiện thủ thuật [Tips] - Nút button Open/Close mở đóng & ẩn hiện nội dung cho Blogspot Blogger này nha.

Các bạn chỉ cần chèn đoạn mã code sau vào HTML nội dung, nơi các bạn muốn nó hiển thị

Ví dụ bạn muốn chèn nó vào bài viết của Blogspot Blogger, các bạn chỉ cần vào phần Bài đăng mới -> Qua phần HTML -> Chèn đoạn Code tương ứng vào là xong!

<div id="spoiler" style="display: none;">
Nội dung của bạn ở đây, có thể chèn mã HTML vào trong này nhé!
</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button>

Vậy là đã xong thủ thuật rồi, điều các bạn cần đó là thay đoạn chữ Màu Xanh trên đoạn code ở trên thành nội dung bạn muốn hiển thị hoặc ẩn nhé! Chúc thành công với thủ thuật blog [Tips] - Nút button Open/Close mở đóng & ẩn hiện nội dung cho Blogspot Blogger này.

Nếu bạn nào đã thực hiện được thủ thuật blog này rồi, hãy share và giới thiệu đến bạn bè ở dưới comment, nếu ai chưa hiểu hoặc chưa làm được, hãy gửi comment hỏi đáp sau, Terocket sẽ giải đáp các bạn!
Trứng Vịt - Terocket

11 nhận xét:

  1. Anh cho em hỏi muốn thay đổi kích thước ô ẩn hiện và tô màu cho nội dung ẩn thì làm thế nào vậy anh.

    Trả lờiXóa
  2. Cho mình hỏi một bài viết mà mình muốn dùng nhiều đoạn ẩn hiện cho nội dung thì làm như nào

    Trả lờiXóa
  3. Cho mình hỏi: nếu trong một bài đăng mình tạo 3 nút giống vậy, sau đó cứ nhấp vào nút nào thì hiển thị nội dung trong nút đó, đồng thời ẩn nội dung trong 2 nút còn lại thì làm thế nào?
    xin cảm ơn ad

    Trả lờiXóa
    Trả lời
    1. Mỗi cái bạn để 1 tên id khác nhau.
      Ví dụ
      Nút 1 thì id="spoiler"
      Nút 2 thì id="spoiler 2"

      Xóa
    2. sao mình làm theo mà nó cứ hiện hết ra là sao vậy admin. mong admin chỉ giúp mình. cám ơn ad :)

      Xóa
  4. SEO thì tuyệt cú mèo. Cám ơn ad đã chia sẻ với mọi người nha.
    ------------------------------------
    Truyền hình số HD - Xem tivi hơn 50 kênh miễn phí thuê bao tháng.
    Chuyên phân phối: Dau thu DVB T2 chính hãng VTV, VTC, LTP...
    Đầu thu nhiều người quan tâm: Dau thu DVB T2 VTC T201

    Trả lờiXóa
  5. Blog của mình thiết kế có được không? Các bạn cho ý kiến nhé: http://vietnamesebillionaire.blogspot.com/. Cảm ơn các bạn nhiều nhé!

    Trả lờiXóa
  6. Hi bạn, nếu mình muốn dùng nút này ở ngay trên trang chủ. Nội dung bài viết chỉ hiện 1 phần, ấn nút nó sẽ hiện nốt phần còn lại ngay trên trang chủ thì làm như nào bạn ? Rất mong nhận được sự hỗ trợ từ bạn, chúc bạn ngày mới tốt lành !

    Trả lờiXóa
  7. Được Thành lập vào tháng 2 năm 2000 cho đến công ty dịch vụ chuyển nhà Taxi Tải 24H với hơn 16 năm kinh nghiệm phát triển và phục vụ hàng ngàn khách hàng mỗi năm về dịch vụ chuyển nhà trọn gói, Dịch vụ chuyển nhà công ty Taxi Tải 24h đã khẳng định được vị thế, chất lượng là đơn vị cung cấp dịch vụ chuyển dọn nhà trọn gói uy tín, chuyên nghiệp hàng đầu tại việt nam.

    Trả lờiXóa
  8. Cho mình hỏi: Mình muốn tạo 2 nút radio button, khi kích vào nút 1 thì hiển thị nội dung 1, khi kích vào nút 2 thì đóng nội dung 1 và hiển thị nội dung 2 thì làm như thế nào. giúp mình vs. thank kiu

    Trả lờiXóa