MyBB Devamını Oku MyCode

MyBB forumunuzda konularınıza, yorumlarınıza Devamını Oku şeklinde bir buton ekleyebilirsiniz, yazınız böylece açılır kapanır hale gelecektir. Nasıl yapacağımızı sırayla yazıyorum, takip edebilirsiniz.

1 — Admin KP - Temalar - Kullandığınız Tema - CSS Oluştur
Stil Adı: devaminioku.css
İlişkilendirilen: Genel Stil
'Kendi içeriğimi yazmak istiyorum' u işaretleyin, aşağıdaki kodları ekleyip kaydedin.

.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}
.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:700}
.readmore-button{margin-right:10px}

CSS kodlarıyla kendinize göre oynama yapabilirsiniz. Örneğin max-height:150px kısmını isteğinize göre ayarlayabilirsiniz. Böylece ne kadar yükseklikte Devamını Oku özelliği devreye gireceğini kendiniz belirleyebilirsiniz. Konunun en altındaki örnek görüntüler 150px olarak ayarlı halidir.

2 — Admin KP - Şablonlar - Kullandığınız Tema - Headerinclude Şablonlar - headerinclude en altına aşağıdaki kodu ekleyip kaydedin.

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

3 — Admin KP - Forum Ayarları - Mykod Yönetimi - Yeni Mykod Ekle - Aşağıdaki gibi ayarları yapıp kaydedin.
Mykod Başlığı: Devamını Oku
Kısa Bilgi: Uzun mesajları devamını oku şeklinde kısaltmaya yardımcı olur.
Düzenli İfade:

[devam](.*?)[/devam]

Yerine Gösterilecek İfade:

<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 Edilsin Mi?: Evet

4 — Devamını Oku özelliği eklemek istediğimiz paragrafın başına [devam] sonuna [/devam] şeklinde kodlarımızı eklememiz yeterli.

Ellerinize sağlık hocam, destek siteniz içinde başarılar diliyorum.

Teşekkür ederim.