share all free for you

Advertiser Here

Cara Membuat Font/Text Resize dengan jQuery

Resize Font/Text jQuery
Anda dapat menambah fasilitas di template blog atau web untuk memperbesar atau memperkecil ukuran text/font (A +, A -, A),
Disini, saya mencoba menerapkan "jQuery Tip: Font Resizing With Animation Effects" di "blogger template". Hasilnya effect perubahan ukuran text/font tersebut cukup memuaskan, sangat halus. Jika anda tertarik untuk menerapkan di blogger template.

Penerapan Resize Font/Text dengan Jquery di Blogger Template

1. Masukan script jQuery berikut diatas </head>:

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

:: Catatan:
Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

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

:: Catatan:
- "#content-wrapper" diatas dapat ganti, sesuai bagian yang akan anda berikan effect resize font.
- "finalNum *= 1.1;", "finalNum /=1.1;", "finalNum =13;", "stringEnding},500", angka-angka tersebut dapat anda rubah, sesuai selera anda.

3. Masukan kode HTML berikut, masalah penempatan sesuaikan dengan karakter template anda.

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

4. Masukan kode CSS berikut diatas ]]></b:skin>
template blog).


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

:: kode CSS ini dapat anda rubah, untuk menyesuaikan posisi button.

5. Save template, selesai.

jangan lupa mampir ke kotak comment ya...

Title : Cara Membuat Font/Text Resize dengan jQuery
URL : http://blogcunayz.blogspot.com/2011/07/cara-membuat-fonttext-resize-dengan.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Membuat Font/Text Resize dengan jQuery sebagai Sumbernya.

Sudah ada [ 3 komentar ] bagaimana pendapat Anda,,?

  1. pertamax ~!!! wah keren bisa memperbesar text biar jelas

    ReplyDelete
  2. @ Farixsantips : hahaha selamat untuk pertamaxnya,ane gak inget share postingan ini kapan wkwkwk =)) =))

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah