Resize Font atau teks Dengan Jquery

Text Resizer: Click for Resizer

Bismillah Pada artikel sebelumnya saya telah menjelaskan tentang Memasang widget change the font this blog. Pada tutorial kali ini aku akan menjelaskan kepada Teman-teman mengenai menambahkan fasilitas Resize font dengan sentuhan JQuery,yang dimana fungsi dari fasilitas ini ialah memperbesar atau memperkecil ukuran text/font (A +, A -, A) sesuai dengan keinginan kita. Ok silahkan mencoba kawan.

• Pertama-tama log in dulu ke account blogger anda

• Pada rancangan pilih edit HTML

• Kemudian cari kode ]]></b:skin> ( untuk memudahkan pencarian tekan Ctrl + F pada keyboard)

• Setelah ketemu masukkan kode dibawah ini dan letakkan diatas kode ]]></b:skin>

/* resizeFont*/
#resizeFont{
text-align:right;
margin-right:10px;
}

• Kemudian cari kode </head> setelah itu masukan script jQuery berikut diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

NB : Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.

• Masukan kode Javascript berikut dibawah script jQuery tadi:

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

• Klik Simpan

• Langkah terakhir Pada Elemen Laman >> Klik Tambah gadget >> Pilih HTML/javascipt

• Setelah itu masukkan kode dibawah ini kedalamnya :

<div id="resizeFont">
<input id="large" type="button" value="A+" />
<input id="reset" type="button" value="A" />
<input id="small" type="button" value="A-" /></div>

• Klik Simpan selesai

Semoga Tutorial kali ini bermanfaat.....

Artikel Terkait:

jQuery

• Cara Memindahkan Gambar Dengan jQuery
• Chatbox Bergaya Panel Slide Vertikal dengan jQuery
• Cara Membuat Effect Page Peel Dengan jQuery
• Membuat Slider Zinmag Primus
• Membuat Daftar Isi Blog Dengan Efek jQuery Accordion
• Membuat Sliding Login/Register Form Panel di Blogspot Dengan jQuery
• Membuat Info Panel Slide Vertikal dengan jQuery
• Membuat Back To Top Dengan Sentuhan jQuery
• Membuat Recent Post Dengan Animasi jQuery
• Memasang Efek jQuery Image Zoom
• Membuat Slider Content Dengan Animasi jQuery

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Resize Font atau teks Dengan Jquery
Dalam Kategori : jQuery
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.