MyBB Türkçe Destek Forumu

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 Sağ Ok

Temalar

Kullandığınız Tema Sağ Ok

CSS Oluştur
Nokta

Stil Adı: devaminioku.css
Nokta

İlişkilendirilen: Genel Stil
Nokta

'Kendi içeriğimi yazmak istiyorum' u işaretleyin, aşağıdaki kodları ekleyip kaydedin.

Kod:
.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 Sağ Ok

Şablonlar

Kullandığınız Tema Sağ Ok

Headerinclude Şablonlar Sağ Ok

headerinclude en altına aşağıdaki kodu ekleyip kaydedin.

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 = "Gizle";

      } else {

        readMoreButton.innerHTML = "Devamını Oku";

      }

    }

</script>

3 — Admin KP Sağ Ok

Forum Ayarları Sağ Ok

Mykod Yönetimi Sağ Ok

Yeni Mykod Ekle Sağ Ok

Aşağıdaki gibi ayarları yapıp kaydedin.
Nokta

Mykod Başlığı: Devamını Oku
Nokta

Kısa Bilgi: Uzun mesajları devamını oku şeklinde kısaltmaya yardımcı olur.
Nokta

Düzenli İfade:

Kod:
\[devam\](.*?)\[/devam\]

Yerine Gösterilecek İ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 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.

Örnek Görüntüler [ Göster ]

Aslında kaynak vs gösterirken de aktif olarak işe yarar. Ellerinize sağlık hocam.

Evet, devamını oku’dan farklı durumlarda da revize edilerek kullanılabilir. Rica ederim üstad.

MyPoweR

Arne Saknussemm

MyPoweR