Cara Membuat Text Resizer di Blogger

Assalamualaikum kawan - kawan,

Jumpa lagi bersama gue Aliif Arief di blog pribadi gue yaitu Aliif.space, sering kali orang kesulitan dalam membaca Text atau tulisan katena ukuran fontnya yang terlalu kecil dan karena al tersebut bisa saja kita kehilangan beberapa pengunjung Blog oleh karena itu kali ini gue akan memberikan sebuah tutorial cara membuat fitur text resizer di blog kalian khusunya para pengguna platform Blogger kali ini kita akan membuatnya menggunakan logika dari Jquery.

Buat lu yang kepo gimana sih demo dari fitur ini, kalo lu kepo lu bisa coba aja fitur text resizer di blog ini nah seperti itulah text resizer yang akan kita buat dalam tutorial kali ini, yaudah langsung aja kita ke tutorialnya :

langsung ke dashboard Blogger lu abis itu ke themes terus klik edit themes.

1. Pastikan di Tempale Blogger lu sudah terpasang script CDN Jquery 

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

2. Pasang Syle Tombol Text Resizer

.traliif{margin-top:10px;text-align:right}
#tlarge{font-size:20px;border: 2px solid #00ab6b;cursor: pointer;background-color: white;color: #00ab6b}
#treset{font-size:18px;border: 2px solid #00ab6b;cursor: pointer;background-color: white;color: #00ab6b}
#tsmall{font-size:16px;border: 2px solid #00ab6b;cursor: pointer;background-color: white;color: #00ab6b}

3. Pasang Script Logika Jquery text resizernya

<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 == 'tlarge') {
finalNum *= 1.1;
}
else if (this.id == 'tsmall'){
finalNum /=1.1;
}
else if (this.id == 'treset'){
finalNum =16;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

4. Pasang Tombol text resizer di setiap postingan yang kita mau

<div class="traliif">
<input id="tlarge" title="Perbesar" type="button" value="A+" />
<input id="treset" title="Normal" type="button" value="A" />
<input id="tsmall" title="Perkecil" type="button" value="A-" />
</div>