Blogger Note

Article :

Membuat Font/Text Resize dengan jQuery

Membuat Font/Text Resize dengan jQueryPada postingan yang lalu,Saya sudah share tentang Trik Facebook yaitu Membuat Teman Tidak Tersedia Lewat Daftar Teman Di Facebook, akan tetapi dalam postingan yang akan saya bahas ini, akan membahas sedikit JQuery,Tepatnya Membuat Font/Text Resize Dengan jQuery,Sobat tahu gak maksudnya? kalau belum tahu saya jelas'sin dech,Membuat Font/Text Resize itu maksudnya memberi fasilitas untuk memperbesar atau memperkecil ukuran text/font,Disini saya mencoba menerapkan "JQuery Tip: Font Resizing With Animation Effects" di "blogger template". Hasilnya effect perubahan ukuran text/font tersebut cukup memuaskan menurut saya,Mungkin jika sobat membuatnya,Sobat bisa merasakan efeknya sendiri (Sebenarnya belum ada demonya sich hehehe...)okey dari pada lama-lama atau gak sabar mendingan langsung aja langkah-langkahnya dibawah ini

  • Login ke Blogger.com
  • Pada dashbor klik Rancangan pada Tab Menu
  • Lalu klik lagi Edit HTML
  • Cari kode <head>
  • Lalu Paste kode dibawah ini dibawah kode <head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- 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.
  • 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>
  • Masukan kode CSS berikut diatas ]]></b:skin>
 #resizeFont{text-align:right; margin-right:10px}
  • Kode yang diberi efek bold dapat diganti untuk menyesuaikan posisi button.
  • Save template, selesai.

7 comments:

26 Juli 2011 00.42

nice info

26 Juli 2011 02.25

to e-news:Terima kasih telah berkunjung dan komennya

26 Juli 2011 03.27

Wah bagus nih treiknya :)

28 Juli 2011 00.29

To Farixsantips:Thanks commentnya sob

18 Agustus 2011 07.28

bagaimana kalau yang mau diberi efek resize lebih dari satu, misalnya text posting dengan text pada sidebar

19 Agustus 2011 00.46

@roomantik:Sorry sob ane kurang tau kalo kayak gitu

8 September 2011 23.24

Terima Kasih Tips Nya !!
Sangat Bermanfaat !!

Vist My Blog : Gamer Mania | The Gamer Community

Posting Komentar