Code rút gọn nội dung bài viết và mô tả bằng CSS – jQuery

Code rút gọn nội dung bài viết và mô tả bằng CSS – jQuery, Code rút gọn nội dung PHP, Thu gọn nội dung HTML, Plugin rút gọn bài viết trên WordPress,….

Phía trên là các câu hỏi đang được truy tìm nhiều nhất từ những bạn thích tự code cho web cá nhân mình. Bài viết có độ dài lớn muốn thu gọn nội dung bài viết để cho người đọc dễ nhìn mà không ảnh hưởng tới seo nội dung bài viết. Trong bài viết này, Toancr xin hướng dẫn cách rút gọn nội dung phù hợp với mọi dạng code.

Code rút gọn nội dung bài viết và mô tả bằng CSS - jQuery, Code rút gọn nội dung PHP, Thu gọn nội dung HTML, Plugin rút gọn bài viết trên WordPress

Hướng dẫn rút gọn bài viết bằng các dòng code đơn giản

Bước 1: Chuẩn nội dung HTML

<h2 style="background: rgb(32 30 30 / 2%); padding: .875rem;text-transform: capitalize;">Hướng dẫn bảo quản giày HADU</h2>
    <p style="font-size: 17px;">Nàng ơi, hãy chăm sóc những đôi giày của mình như chăm sóc những người thân yêu luôn đi bên cuộc đời mỗi người, để chúng luôn là người bạn đồng hành đáng tin cậy trên mọi nẻo đường và giúp chúng ta tỏa sáng ở mọi lúc, mọi nơi nhé!</p>

<div id="content" style="display: none;">{{mota[1]}}</div>

<div class="an-hien" style="text-align: center;margin: 20px 0 20px 0;">
    <input type="button" class="button" style="color: black;" id="btn1" value="Thu Gọn"/>
    <input type="button" class="button" style="color: black;" id="btn2" value="Xem thêm"/>
</div>

Giải thích: Phần id=’content’ là phần nội dung mà Tòn muốn rút gọn nó đi. Vì làm trên nền tảng Haravan nên hàm có dạng là {{mota[1]}}

Bước 2: Thêm dòng Js

<script language="javascript">
  document.getElementById("btn1").onclick = function () {
    document.getElementById("content").style.display = 'none';
  };

  document.getElementById("btn2").onclick = function () {
    document.getElementById("content").style.display = 'block';
  };
</script>

Giải thích: Đoạn js trên bạn có thể cho dưới nội dung hoặc chân footer đều được nhé

Xem mẫu kết quả tại: Sandal Dew quai ngang

Mẫu kết quả được Tòn code trên website nền tảng Haravan. Ngoài ra, code rút gọn nội dung PHP này còn sử dụng nhiều dạng mã nguồn bạn nhé. Việc thu gọn nội dung html hiện nay đang có rất nhiều website đang dùng, vì nó dễ nhìn cho người dùng và điều nay sẽ giữ chân được người tại website của bạn lâu hơn.

Xem thêm: Cách tạo FAQ Schema không dùng plugin

Thông tin liên hệ Toancr

Hi vọng, qua bài viết này sẽ giúp ích cho các bạn trong quá trình làm việc. Ngoài ra, nếu bạn có nhu cầu thiết kế website thì hãy liên theo những thông tin dưới đây để gặp Toàn nhé.

  • Điện thoại: 0935.961.044 – Zalo: 0346.260.994
  • Email: info@camranhmedia.com | dungtoan96@gmail.com
  • Website: toancr.com | camranhmedia.com
  • Fanpage: fb.com/camranhmedia
  • Twitter: https://twitter.com/dungtoan96
  • Youtube: https://www.youtube.com/channel/UCa9jBqvG9SYKg-I1q30ehQA

1 bình luận về “Code rút gọn nội dung bài viết và mô tả bằng CSS – jQuery”

Bình luận

BÀI VIẾT LIÊN QUAN

THÔNG TIN THÊM

Quảng cáo

Nhận Mã Giảm Giá Hosting

Quảng cáo