Kullanıcılar Yazılarınızı Büyültüp Küçültebilsin

article-zoomin-zoomoutİçerisinde uzun yazılar barındıran bir web sayfanız mı var? Kullanıcı deneyimine önem mi veriyorsunuz? Öyleyse makalelerinizin üstüne büyültme ~ küçültme işlemi ekleyerek ziyaretçilerinize kolaylık sağlayabilirsiniz. Özellikle haber sitelerinde görmeye alıştığımız bu kolaylık saniyeler içerisinde hazırlanabilmekte.

Bu makalemizde uzun yazılar içeren makalelere boyutlandırma seçeneği eklemeyi öğreneceğiz.

ÖRNEĞİ GÖRÜNTÜLE

Bu yüzden büyültme ~ küçültme fonksiyonunu sadece makalelerinize vermenizde fayda var.

Yazıları büyültme ~ küçültme seçeneği nasıl hazırlanır?

Makalelerinizi saran konteynıra bir ID tanımlayarak işleme başlayabilirsiniz.

<article id="makale">
<h1>Örnek Makale</h1>
<p>Bu bir makaledir.</p>
</article>

Şimdi de herhangi bir yere büyütme küçültme seçeneklerini koyalım. Aşağıdaki kodları makale içerisine koymanızı önermeyiz.

<a onclick="boyutlandir(-1)">- Küçült</a>
<a onclick="boyutlandir(1)">+ Büyüt</a>

Sayfanın en altına da aşağıdaki JavaScript kodlarını ekleyerek işlemi tamamlayabilirsiniz.


var c = document.getElementById("content");
function boyutlandir(multiplier) { if (c.style.fontSize == "") { c.style.fontSize = "1.0em"; }
c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + "em"; }

Makalelere zoom-in & zoom-out eklemek neden önemli?

Kullanıcı dostu tasarımlar üretmek, web sayfanızı ziyaret eden kişilerin navigasyonunu ve bilgiye erişme hızını arttırmakla başlar. Görme sıkıntısı yaşayan veya büyük bir monitörden web sayfanızı görüntüleyen kullanıcılar eğer varsa tarayıcılarının büyütme özelliği ile sitenize daha yakından bakabilir. Ancak bu durumda sadece istenilen bölge değil, tüm site büyür. Bu da istenmeyen bir görüntü kirliliğine sebep olur.

Şimdilik bu kadar.

İyi çalışmalar.



  • mehmet

    Merhaba…
    ID tanıma ve javascript kodunu metin editöre ekledim.Örnek yazıyı da görsel editörde ekledim.Buton kodlarını da makalenin başına yapıştırdım.Ama butonlar çalışmadı.Buton kodlarını single.php de denedim.Yine olmadı.İşlemde yanlış nerede anlayamadım.Çözüm için açıklama yaparsanız memnun olurum
    İyi çalışmalar

    • JavaScript kodlarınız sayfanın en altında olmalı. ‘den hemen önce.

  • mehmet

    Merhaba..

    Geri dönüş için teşekkür ederim.Ancak, etiketi header.php de yok.Footer.php yi ve başka sayfaları da denedim ama butonları çalıştıramadım.

    İyi çalışmalar

  • Nurettin Uslu

    var c = document.getElementById(“makale”);

    olacak gibi…

    Paylaşım için teşekkürler…