<![CDATA[Cộng Đồng MyBB Việt Nam - MyCodes]]> https://congdong.mybb.vn/ Wed, 06 May 2026 09:25:43 +0000 MyBB <![CDATA[MyCode Read More]]> https://congdong.mybb.vn/Thread-share-mycode-read-more Mon, 11 Dec 2023 22:38:48 +0000 JLP423]]> https://congdong.mybb.vn/Thread-share-mycode-read-more theo gợi ý của anh , Joey viết cái MyCode này để giúp bài viết diễn đàn của chúng ta không bị quá dài. Mặc dù là myBB có plugins như là hide hoặc spoiler, nhưng mấy plugin đó ẩn hết tất cả thông tin trong code. MyCode này hoạt động gần giống như là excerpt của Wordpress. Tạm thời thì Joey share MyCode, nhưng sau này nếu có nhiều yêu cầu thì Joey có thể sẽ chuyển nó thành plugin đơn giản với vài basic settings

Demo: https://mybb.vn/Thread-test-test-more-ta...180#pid180

Bắt tay nào:

1. Thêm đoạn CSS này vào global.css:
 
Code: 
/*Read More CSS*/

    .readmore {
      border: 1px solid #214f7e;
      background-color: #fdf6e3;
      transition: max-height 0.5s ease;
      overflow: hidden;
      max-height: 150px;
      width: 90%;
      margin: 10px auto;
      padding: 15px;
      border-left: 4px solid #214f7e;
      position: relative;
    }

    .readmore.expanded {
      max-height: 1000px; /* Set height to auto for expanded state */
    }

    .readmore-button-container {
    position: relative;
    color: #214f7e;
    border-bottom: 1px solid #214f7e;
    padding-bottom: 3px;
    margin: 0 0 10px 0;
    font-style: normal;
    font-weight: bold;
    }

    .readmore-button {
      margin-right: 10px;
    }
/*End Read More CSS */

2. Thêm đoạn code này vào headerinclude template:
 
Code: 
<script>
    function toggleReadMore(button) {
      var content = button.closest('.readmore');
      content.classList.toggle('expanded');
      var readMoreButton = content.querySelector('.readmore-button');

      if (content.classList.contains('expanded')) {
        readMoreButton.innerHTML = "Read Less";
      } else {
        readMoreButton.innerHTML = "Read More";
      }
    }
  </script>

3. Thêm MyCode:
Regular expression:
 
Code: 
\[more\](.*?)\[/more\]

Replacement:
 
Code: 
<div class="readmore">
    <div class="readmore-button-container">
      <button class="readmore-button" onclick="toggleReadMore(this)">Read More</button>
    </div>
    <p>$1</p>
  </div>

4. Cách sử dụng:
Code: 
[more] Nội dung dài đăng đẳng của bạn ở đây [/more]
]]> theo gợi ý của anh , Joey viết cái MyCode này để giúp bài viết diễn đàn của chúng ta không bị quá dài. Mặc dù là myBB có plugins như là hide hoặc spoiler, nhưng mấy plugin đó ẩn hết tất cả thông tin trong code. MyCode này hoạt động gần giống như là excerpt của Wordpress. Tạm thời thì Joey share MyCode, nhưng sau này nếu có nhiều yêu cầu thì Joey có thể sẽ chuyển nó thành plugin đơn giản với vài basic settings

Demo: https://mybb.vn/Thread-test-test-more-ta...180#pid180

Bắt tay nào:

1. Thêm đoạn CSS này vào global.css:
 
Code: 
/*Read More CSS*/

    .readmore {
      border: 1px solid #214f7e;
      background-color: #fdf6e3;
      transition: max-height 0.5s ease;
      overflow: hidden;
      max-height: 150px;
      width: 90%;
      margin: 10px auto;
      padding: 15px;
      border-left: 4px solid #214f7e;
      position: relative;
    }

    .readmore.expanded {
      max-height: 1000px; /* Set height to auto for expanded state */
    }

    .readmore-button-container {
    position: relative;
    color: #214f7e;
    border-bottom: 1px solid #214f7e;
    padding-bottom: 3px;
    margin: 0 0 10px 0;
    font-style: normal;
    font-weight: bold;
    }

    .readmore-button {
      margin-right: 10px;
    }
/*End Read More CSS */

2. Thêm đoạn code này vào headerinclude template:
 
Code: 
<script>
    function toggleReadMore(button) {
      var content = button.closest('.readmore');
      content.classList.toggle('expanded');
      var readMoreButton = content.querySelector('.readmore-button');

      if (content.classList.contains('expanded')) {
        readMoreButton.innerHTML = "Read Less";
      } else {
        readMoreButton.innerHTML = "Read More";
      }
    }
  </script>

3. Thêm MyCode:
Regular expression:
 
Code: 
\[more\](.*?)\[/more\]

Replacement:
 
Code: 
<div class="readmore">
    <div class="readmore-button-container">
      <button class="readmore-button" onclick="toggleReadMore(this)">Read More</button>
    </div>
    <p>$1</p>
  </div>

4. Cách sử dụng:
Code: 
[more] Nội dung dài đăng đẳng của bạn ở đây [/more]
]]>