Yazıları Büyültme ve Küçültme Kodu

Yazıları Büyültme ve Küçültme HTML Kodu

Bazı sitelerin yazı boyutları kullandığımız ekrana yada bizim okuma alışkanlıklarına uymayabiliyor. Basit bir kod eklentisi ile site veya bloğumuza yazı karakterlerinin px ölçülerini kullanıcıların ayarlamasına olanak veren bir eklenti ile daha işlevsel duruma getirebiliriz.

Yazıları Büyültme ve Küçültme Kodu 1

Kod tema renklerine ve sitillerine duyarlıdır.

<a href="javascript:ts('body',1)"><input type="button" value="+ BÜYÜLT +" /></a><a href="javascript:ts('body',-1)"><input type="button" value="- Küçült -" /> <script type="text/javascript"> var tgs = new Array( 'div','td','tr'); var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' ); var startSz = 2; function ts( trgt,inc ) { if (!document.getElementById) return var d = document,cEl = null,sz = startSz,i,j,cTags; sz += inc; if ( sz < 0 ) sz = 0; if ( sz > 6 ) sz = 6; startSz = sz; if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ]; cEl.style.fontSize = szs[ sz ]; for ( i = 0 ; i < tgs.length ; i++ ) { cTags = cEl.getElementsByTagName( tgs[ i ] ); for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ]; } } </script><a href="javascript:ts('body',-1)">

Yazıları Büyültme ve Küçültme Kodu 2

Görselleri (A+ A-) değiştirerek kullanabilirsiniz.

<script type="text/javascript"> function resizeText(multiplier) { if (document.body.style.fontSize == "") { document.body.style.fontSize = "1.0em"; } document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em"; } </script> <img id="plustext" alt="Increase text size" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRylKo2Z0Ye8KWv6QCtHlsnTzKsAKoJobOGAizuKYGTBbHvBb1eTh-wldk1RndC-SjCxbyEWAB-_d2-l_XwmLBk4EPaYP70guB-YYgsZwNI4n3OYQUc7A6c_iftOhGieBYlD3odeTKHdQ2/s24/A%252B.png" onclick="resizeText(1)" /> <img id="minustext" alt="Decrease text size" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8HDxNDpfzMftC_yD3vOLcfY2mofSwyrdqHchUQr8jEwMaPdcH-M7ZiFWcRu_GvF3kS96G4vj9IY4W9nh5x2NLifVDArptkMYMJEzTGzOtdxWr_042fvFeeUgKWQ-1AnjM5EN9jiASlnUV/s24/A-.png" onclick="resizeText(-1)" />

Kodlar açık, isterseniz CSS kullanarak özelleştirebilirsiniz.

HTML / JAVASCRİPT EKLEMEK

Widget (gadget) olarak eklemek için :

Blogger > Düzen > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

Sayfa içinde kullanmak için :

Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

* Canlı Demo için :

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Kod editörünü kullanabilirsiniz.