Iklan 300 x 250

Random Post

Recent Post

 

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:

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

4 komentar:

sibutiz mengatakan... Reply Comment

ich,keren demonya gan...
saya suka itu,tapi my blogg sudah terlalu penuh dengan tambahan dan takutnya membuat loading page nya lambat...
thx ya gan...

Hellen mengatakan... Reply Comment

Di simpan ya bos... tinggal make aja nanti kalau mau pasang :)
Thanks ya bos

thanks udh follow q follow balik :j:

Mantab nie tapi kalo kaya ane yg pake widget wibiya yg tampilan foto nya di blog nga bisa di pake dong, :d:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky