Text resize adalah sebuah tombol yang berfungsi untuk memperbesar dan memperkecil huruf pada artikel blog kamu. Tombol text resize ini biasanya berupa tanda 'A+' untuk memperbesar dan 'A-' untuk memperkecil. Namun, bisa saja tandanya berbeda-beda di setiap website atau blog.Text resize ini sangat berguna untuk kenyamanan pengunjung blog, karena ia bisa menyesuaikan besar kecilnya huruf dengan kebutuhannya atau disesuaikan dengan lebar layar.
Cara membuat text resize juga sangat mudah, kamu hanya tinggal menyimak cara yang akan saya jelaskan dibawah dan tenang, ukurannya hanya kecil dan berupa kombinasi antara CSS dan JavaScript sehingga tidak memberatkan loading blog.
Cara Membuat Text Resize di Blogger
1. Buka dashboard Blogger kamu.2. Pilih menu Tema > Edit HTML.
3. Tempel kode berikut diatas </style> atau ]]></b:skin>. Jika tempilan text resize kurang menarik, kamu bisa merubahnya melalui kode CSS ini.
.rfopit{margin-top:10px;text-align:right}
#large{font-size:20px}
#reset{font-size:18px}
#small{font-size:16px}4. Dan jangan lupa untuk menempelkan kode berikut diatas </head>.
<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('.post-body');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'large') {
finalNum *= 1.1;
}
else if (this.id == 'small'){
finalNum /=1.1;
}
else if (this.id == 'reset'){
finalNum =16;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>5. Yang terakhir, tempel kode berikut ditempat yang kamu ingin tombol tersebut berada.
<div class='rfopit'>
<input id='large' title='Perbesar' type='button' value='A+'/>
<input id='reset' title='Normal' type='button' value='A'/>
<input id='small' title='Perkecil' type='button' value='A-'/>
</div>6. Selesai.
