Code Rút gọn và xem thêm nội dung trên website đơn giản, dễ làm

1303 lượt xem

Với một số nội dung trên website, đôi khi hiển thị ra hết khiến cho giao diện web của bạn trông không được gọn gàng và bắt mắt, chính vì vậy việc làm cách nào để chèn nút xem thêm và thu gọn nội dung là điều rất cần thiết

Trong bài viết này mình sẽ hướng dẫn bạn thực hiện việc thu gọn và xrm thêm nội dung trên website một cách đơn giản, dễ làm

Xem demo như hình bên dưới

rut-gon

Trên website sử dụng theme Flatsome, chúng ta sẽ thực hiện như sau:

1. Chèn script vào Body

Bước 1: vào menu Flatsome

Bước 2: chọn Advanced để vào Flatsome Advanced Options

Bước 3: tại menu Global Settings kéo xuống ở phần Body Scripts – Bottom chèn đoạn code sau đây vào


<script>
    function toggleContent() {
        var hiddenContent = document.getElementById("hiddenContent");
        var showMoreLink = document.getElementById("showMoreLink");

        if (hiddenContent.style.height === "auto") {
            hiddenContent.style.height = "4.5em";
            showMoreLink.innerHTML = "Xem thêm";
        } else {
            hiddenContent.style.height = "auto";
            showMoreLink.innerHTML = "Rút gọn";
        }
    }
</script>


Sau đó bấm Save All Changes

rut-gon

2. Chèn CSS vào theme

Tiếp theo chúng ta sẽ CSS cho button đẹp hơn

Bạn chèn đoạn CSS này với 2 cách chèn trên theme Flatsome

Cách 1: cũng vào menu Flatsome, chọn Advanced để vào Flatsome Advanced Options sau đó chon menu Custom CSS bạn chèn đoạn CSS sau vào sau đó bấm Save All Changes


.hidden-content {
            overflow: hidden;
            line-height: 1.5em;
            height: 4.5em;
        }
.show-more {
    display: block;
    cursor: pointer;
    color: #fbae37;
    text-decoration: underline;
    border-color: #fbae37;
    border: 1px solid #fbae37;
    border-radius: 5px;
    margin: 0 auto;
    max-width: 150px;
    padding: 5px 5px;
    text-align: center;
}
.hidden-content {
    margin-bottom: 10px;
}

Cách 2: bạn vào menu Flatsome sau đó chọn Theme Options, tiếp đến kéo xuống phần CSS bổ sung dán đoạn CSS trên vào và bấm Đăng

Lưu ý: CSS là để làm cho giao diện nút button Xem thêm và Rút gọn trở nên đẹp, vì vậy nếu bạn rành về css có thể tự điều chỉnh màu sắc hay border sao cho đẹp theo ý bạn.

Xem thêm  Chỉnh sửa Footer trong Admin của WordPress

rut-gon

3. Chèn code ở đoạn nội dung cần rút gọn

Tại đoạn nội dung cần rút gọn bạn chèn trên và dưới như sau


<div id="hiddenContent" class="hidden-content">
<p>
Đây là đoạn nội dung mà bạn cần xem thêm và rút gọn
</p>
</div>
        <span id="showMoreLink" class="show-more" onclick="toggleContent()">Xem thêm</span>

Như vậy là xong, lưu ý là đoạn code trên đây mình đang dùng cho theme Flatsome, nên nếu bạn dùng theme khác thì hãy xem xét trước khi thực hiện, ngoài ra với những bạn không rành về code thì nên cân nhắc (mặc dù code này không chèn vào function.php nên không gây ra các vấn đề gì lớn nhưng vẫn có thể sẽ xảy ra lỗi không mong muốn nếu bạn thực hiện sau)

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

Ví dụ minh họa luôn một bức thư tình sau đây cho anh em xem nhé

Gửi em.! Người con gái anh yêu !

Em à !

Anh biết giờ này đây. A có nói gì cũng chẳng thể thay đổi được quyết định của em phải không. Nhưng anh vẫn muốn nói ra tất cả. Nói ra suy nghĩ trong anh. Một lần cuối cùng và mãi mãi.

Trong giây phút này, tâm trí anh rối bời… Thời gian bên em. Anh đã vô tâm, lạnh nhạt với em. Anh thờ ơ, anh bỏ ngoài tai, anh không quan tâm những lời em nói. Anh đã không quan tâm đến cảm giác của em. Để rồi, những ngày qua. Anh đã sống như 1 kẻ vô hồn khi em yêu người khác. Sự ân hận, nuối tiếc muộn màng. Con tim đau như ai bóp ngẹt. Anh không thể làm chủ bản thân mình. Anh điên dại níu kéo em về bên anh. Hành động theo bản năng của một thằng đàn ông đang dần để tuột mất người con gái mà mình đã yêu hơn tất cả. Nhưng dường như, anh càng níu thì lại càng đẩy em ra xa anh nhiều hơn.

Xem thêm  Cách đổi tiêu đề form bình luận từ H3 thành văn bản thuần

Là Anh đã không biết quý trọng những gì mình có. Để rồi, khi mất em. Anh mới biết đối với cuộc sống của anh, em quan trọng biết nhường nào. Mỗi bước anh đi đều có bóng dáng em. Hình bóng em vẫn theo anh trong từng giấc ngủ. Anh đã chẳng thể nào làm chủ bản thân mình. Anh gục ngã.

Trước đây. Chính em đã mang đến cho anh biết bao hạnh phúc. Chính em đã đến bên anh những lúc anh buồn. Em là người nắm tay anh trong những ngày tăm tối nhất. Cho anh thêm yêu cuộc sống này hơn. Và rồi, khi yêu em. Có những lần nước mắt em rơi vì anh mà anh không hề biết. Và rồi chính anh buông đôi tay em ra. Để một người khác không phải anh đã đến bên em. Mang cho em một tình yêu mơí. Quằn quại trong cơn đau. Tự dày vò trong nỗi ân hận muộn màng. Từ sâu trong lòng mình. Anh vẫn mong em về bên anh. Từ sâu thẳm trái tim này. Nỗi nhớ em dâng lên. Hơn bao giờ hết.

rut-gon

Mình đã từng hứa với nhau sẽ không bao giờ buông đôi tay đối phương ra dù cho có chuyện gì mà. Vậy mà anh lại là người buông tay. Anh sai rồi. Sai thật rồi em à. Anh cũng chẳng thể hiểu nổi bản thân mình. Đã buông tay em rồi. Sao giờ lại đang làm tất cả để níu lấy bàn tay em. Em có biết không, trong cơn say, người con gái duy nhất anh nhớ đến vẫn là em. Người con gái anh gọi tên là em. Người con gái mà đến bây giờ anh mới nhận ra quan trọng với anh thế nào. Chẳng thể nào thiếu được . Nhưng chẳng kịp nữa rồi, tình yêu kia em đã trao trọn cho một người khác.

Xem thêm  Thêm thẻ H1 vào cấu trúc trang chủ website của bạn đơn giản

Anh chỉ còn biết cầu chúc em hạnh phúc vậy thôi. Mất em rồi, anh như người mất linh hồn. Anh chẳng còn biết mình cần gì nữa…

Anh lại lang thang trên những con đường mình đi qua, thân thuộc đến lạ thường. Bước chân trĩu lại, Anh đưa đôi bàn tay ra, như đã từng. Nhưng chẳng còn bàn tay em ở đấy. Khóe mắt cay. Anh khóc, Giọt nước mắt ân hận cho sự nuối tiếc muộn màng.

Anh cũng đã yêu. Giống như em, đã từng coi em là tất cả. Đã yêu em bằng cả trái tim mình, Đã từng nghĩ sẽ chẳng điều gì có thể chia xa, vậy mà điều gì đã làm anh thay đổi. Điều gì đã khiến anh buông đôi tay em ra một cách quá dễ dàng như thế. Anh vẫn luôn tìm câu trả lời cho câu hỏi chính mình đặt ra. Anh tự dằn vặt mình trong những đêm không ngủ. Anh miên man, mơ hồ. Rồi sẽ đi về đâu khi trước mắt anh chỉ là một màu tối…

Em à. Anh sẽ chờ em. Anh sẽ âm thầm chờ em như vậy nhé. Sau này dù cho em có chuyện gì. Hay em không hạnh phúc. Hãy về lại bên anh. Anh vẫn đứng đây, vẫn âm thầm yêu và chờ đợi em.

Xin cho thời gian một lần quay trở lại. Để tôi có thể nắm chặt bàn tay kia thêm lần nữa.

Xin người ấy hãy buông đôi tay, để người con gái ấy về lại bên tôi…

Xem thêm

Ghi chú: Mình thành lập website cá nhân này nhằm thỏa mãn đam mê viết lách, bao gồm những bài blog mình tự viết và cả những nội dung sưu tầm. Nếu bạn yêu thích hãy cùng kết nối với mình qua Zalo: 0949.339.222 hoặc Facebook: Trịnh Bảo. Cảm ơn bạn đã ghé thăm!