Görme sorunu olanlar için yazıyı büyütme kodu FontSizer

14Okunma
2 yorum

Görme Evet arkadaşlar bu gün sizlere makale yazarlarının en çok ihtiyaç duydukları ve sitesinde okunası uzun yazılar barındıran kişiler tarafından kullanmasını şiddetle tavsiye ettiğim bir uygulamadan bahsedeceğim. Ara sıra can sıkıntısı olduğu zamanlarda  espirili bir şekilde yazılar yayınlayan blog sitelerini okumakla geçiririm vaktimi. Gözler iyice şiş ve sulanmayana kadar da can sıkıntısının gelmemesi hep işin kötü tarafı olmuştur.

Dün yine gözler iyice sulandıktan sonra can sıkıntısı tuttu birden bire ve rastgele bir kaç tane makale okumak isterken yazıların küçüklüğü (o anki göz durumuna bağlı olarak küçük)  dolayısıyla sağda solda yazı büyütme araçlarını arayıp durdum ve bulamayınca da mecburen sayfayı kapatmak zorunda kaldım. Alexa toolbar kuruluydu ve sitede geçirdiğim her saniye siteye fazladan değer kazandıracaktı Alexa gözünde. Font büyütme uygulaması olmadığı için kısa süre sonra çıkış yapmak zorunda kaldım siteden.

Ben kendimi sadece sitede az bir süre geçirmiş bir ziyaretçi olarak gösterdim. Eminim ben gibi veya gözlerinin durumu gerçekten iyi olmayan bir çok ziyaretçi geliyordur sitenize. Hem bu tür kayıpları önlemek amaçlı hem de ziyaretçilerinize kolaylık olması için jQuery FontSizer gibi eklentileri sitenizde kullanmanızda fayda var diye düşünüyorum.

Kullanımı oldukça kolaydır ve sitenize eklediğiniz andan itibaren yazılarınızın en üstüne eksi ve artı butonları eklenir. Artıya basınca büyütür ve eksiye basınca da küçültür yazılarınızı.

Kullanım : 

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js doysa adresleri : 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fontSizer.js"></script>

JavaScript : 

<script type="text/javascript">
	$(document).ready(function() {			
		$('ul#controls a').fontSizer();
	});
</script>

Stil kodları : 

body, html {
	margin:0;
	padding:0;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
}
.clear-both { clear:both; }
#wrap {
	width:500px;
	height:auto;
	margin:0 auto;	
}
h1 { text-align:center; }
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div id="control-wrap"></div>
<div class="fs-text">
Yazı buraya eklenecek
</div>

Varsayılan parametre ayarları:

var defaults = {
  maxSize: 18,
  minSize: 10,
  increment: 2,
  baseSize: parseInt ($'body')).css('font-size')),
  controlWrapID: 'control-wrap',
  controls: true,
  autoClass: true,
  textContainerClass: 'fs-text'
  elements: 'h1, h2, h3, h4, p, a, ul',
  controlPlusID: 'fs-plus',
  controlMinusID: 'fs-minus'
};

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-09-29 tarihinde yayınlandı,Toplam 2240 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(2 yorum)
Yükleniyor...
incehesap Yorumcu LV.1
2014-08-13 13:42:14 回 Yanıtla

Font dışında, stillerine de karar verebiliyorlar mı

    Ali Blogger
    2014-08-15 00:43:26 回 Yanıtla

    @incehesap Bunun amacı sadece yazıları büyütüp küçültmek. Yazı font ve stillerini css kullanarak değiştirebilmeniz mümkündür.