BBCode Devamını Oku MyCode

Forumunuzda konu içeriği uzunsa ve kısaltmak istiyorsanız wordpressteki gibi devamını oku mycode ile bunu yapabilirsiniz. Ayrıca spoiler vermek istersenizde kullanabilirsiniz

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

Admin KP Temalar ve Şablonlar Kullandığını Temayı açın ve global.css'de en alta ekleyin

Kod:

/*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: none /* 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 */

Kaydedin.

Admin KP Temalar ve Şablonlar Şablonlar Kullandığnız Tema Şablonları headerinclude şablonlarını açın ve ekleyin

Kod:

  <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 = "Kısalt";
      } else {
        readMoreButton.innerHTML = "Devamını Oku";
      }
    }
  </script>

Kaydedin.

Admin KP Forum Ayarları MyCode Ekle Yeni MyCode Ekle

İsim: Devamını oku
Açıklama: Seçilen yazıyı kısaltır ve devamını oku butonu ekler.
Basit İfade:

Kod:

\[more\](.*?)\[/more\]

Düzenlenmiş İfade

Kod:

  <div class="readmore">
    <div class="readmore-button-container">
      <button class="readmore-button" onclick="toggleReadMore(this)">Devamını Oku</button>
    </div>
    <p>$1</p>
  </div>

Aktif mi? Evet seçip kaydedin.


Kullanımı:

Kod:

[more]Kısaltmak istenilen yazının tamamı[/more]

Önizleme:

Ek Dosyalar

Ekran Görüntüleri
       

Cevapla