Code thu gọn nội dung HTML đơn giản bằng CSS – jQuery là một phương pháp giúp tối ưu hóa mã nguồn HTML bằng cách sử dụng CSS và jQuery để viết mã ngắn gọn hơn, dễ đọc và dễ bảo trì. Thay vì sử dụng nhiều đoạn mã HTML để tạo hiệu ứng hoặc thao tác trên giao diện, ta có thể sử dụng CSS để áp dụng các hiệu ứng và jQuery để thao tác trên các phần tử HTML một cách linh hoạt và tiện lợi. Điều này giúp cho mã nguồn trở nên sáng sủa hơn và giảm thiểu thời gian viết mã cũng như tối ưu hóa hiệu suất của trang web.
Học viết Code thu gọn nội dung html 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 SEO xin hướng dẫn cách rút gọn nội dung phù hợp với mọi dạng code.
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é
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.
