Cara Membuat Resize Font / Text jQuery di Blogger

Resize Font merupakan suatu fasilitas yang dapat digunakan untuk mengubah ukuran huruf dengan menggunakan j-query. anda bisa melihat contohnya di blog ini dengan melihat ke bagian kanan atas pada postingan ini.. jika anda tertarik ikuti langkah pembuatannya di bawah ini :

Langkah Pembuatan :

• Sign In ke Blogger Anda
• Masuk ke menu Design lalu Edit HTML
• Masukan script jQuery berikut diatas kode </head>

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

Catatan : Jika anda sudah memasang script j-query ini di template anda, maka abaikan step di atas.

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

1. #content-wrapper diatas dapat ganti, sesuai bagian yang akan anda berikan effect resize font.  

2. finalNum *= 1.1; , finalNum /=1.1; , finalNum =13; , stringEnding},500 , angka-angka tersebut dapat anda rubah, sesuai selera anda.

• Langkah Selanjutnya, Masukan kode HTML berikut, masalah penempatan, bisa anda 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>  

Catatan : Tulisan yang berwarna merah bisa anda ganti sesuai dengan keinginan anda

• Masukan kode CSS dibawah ini diatas kode ]]></b:skin>

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

Catatan : kode css diatas bisa anda rubah sesuai keinginan

• Save Template And View Blog
• Selesai