Metni yeniden boyutlandırma, görünüşte engelli olan müşterilerin, içeriğin kabulünü ve kullanışlılığını sürdürürken yardımcı yenilik olmadan içeriğin boyutunu genişletmesine olanak tanır. Metni yeniden boyutlandırma tekniğinin verilmesi, web içeriğinin WCAG 2.0 AA Kılavuz 1.4.4'ü karşılamasını sağlayacaktır. Kural 1.4.4, metnin ilk boyutun %200'üne kadar yeniden boyutlandırılabilmesini beklemektedir. Bu kural, bu yeniden boyutlandırmanın verilmesi için özel bir teknik göstermez ve "en iyi" bir yaklaşım belirlenmez.
Nasıl Eklenir?
Yani blogger’a Metin Yeniden Boyutlandırıcı Özelliği eklemek için aşağıdaki süreci tam olarak takip etmeniz gerekiyor.
Öncelikle aşağıda vermiş olduğumuz CSS kodlarını </head> kodunun üzerine gelecek şekilde ekleyin.
<style>
/* Text Resizer */
.Tresizerts{position:fixed;right:25px;bottom:150px;background:#ffffff;box-shadow:0 0 5px #000000;border-radius:5px;box-sizing:border-box;z-index:1;transition:all .3s linear}
.darkMode .Tresizerts{background:#121212;color:#ffffff;box-shadow:0 0 5px #ffffff}
#Ifont,#Dfont{font-size:18px;padding:10px;box-sizing:border-box;background:#ffffff;color:#000000}
.darkMode #Ifont,.darkMode #Dfont{background:#121212;color:#ffffff;border-color:#ffffff}
#Ifont{border-radius:5px 5px 0 0;border-bottom:.5px solid #000000}
#Dfont{border-top:.5px solid #000000} #Dfont{border-radius:0 0 5px 5px}
#Ifont:hover,#Dfont:hover{background:linear-gradient(to right,#f81894,#0000ff);color:#ffffff}
</style>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
Şimdi aşağıda ki kodları etkinleştirmek için </body> kodunu bularak üzerine gelecek şekilde ekliyoruz.
<<b:if cond='data:view.isPost'>
<div class='Tresizerts'>
<div id='Ifont'>A+</div>
<div id='Dfont'>A-</div>
</div>
</b:if>
<script>/*<![CDATA[*/
$("").ready(function(){$("#Ifont").click(function(){curSize=parseInt($(".postBody").css("font-size"))+1,curSize<=20&&$(".postBody").css("font-size",curSize)}),$("#Dfont").click(function(){curSize=parseInt($(".postBody").css("font-size"))-1,curSize>=10&&$(".postBody").css("font-size",curSize)})});
/*]]>*/</script> Bütün işlemler bu kadar herkese kolay gelsin. © Serkan Kod Editörü