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.

sebelum itu saran gue lu backup dulu template XML lu biar nanti kalau gagal atau kenapa - kenapa lu punya backupan.

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>

kalau belum terpasang, pasang kode diatas sebelum tanda </body> cari aja syntax nya dengan mengklik Ctrl + F agar lebih mudah.

2. Pasang Syle Tombol Text Resizer

Biar tombol text resizernya makin keren cari kode </style> atau ]]></b:skin> lalu tempelkan kode dibawah ini sebelum kode </style> atau ]]></b:skin> :

.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}

lu bisa memodifikasi tampilan dengan mengedit kode CSS tersebut sesuka hati lu.

3. Pasang Script Logika Jquery text resizernya

agar text resizernya dapat berfungsi dengan baik kita harus memasang script logika jquerynya pasang script dibawah ini tepat sebelum kode </body> :

<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>

dapat kita pahami dari logika kode tersebut bahwa varibel var ourText memnentukan text yang di class mana yang akan terpengaruh oleh text resizer dan disitu kita menargetkan class .post-body, karen itu apabila class di template lu berbeda lu harus menyesuaikannya sesuai dengan template yang lu pakai agar text resizer berjalan sesuai kemauan.

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

setelah lu memasang style dan logika fitur text resizer ini tinggal lu pasang script untuk memunculkan tombol text reesizer di setiap postingan, caranya ialah masuk ke edit post di Blogger lalu kita bealih ke mode edit HTML setelah itu pasang script dibawah ini sesuai di tempat yang lu 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>

dan voila text resizer pun jadi dan blog lu jadi makin keren sekian tutorial dari gue gue harap bermanfaat, terimakasih sudah berkunjung, apaila ada kendala atau error jangan segan segan untuk menyampaikannya di kolom komentar.