Sabtu, 25 Agustus 2012

Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize

Seperti Apa Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize) Ini?

Masih dengan teknik jquery yang sama seperti trik dan cara memperlebar widget pada posting yang lalu.

Yup,membuat Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize).
Contoh sebelum di eksekusi akan tampil seperti ini:


cara membuat tombol otomatis memperbesar dan memperkecil huruf blogger
1

mengatur besar kecil huruf text posting blogger
2

resize font blogger jquery
3

Nah,untuk contoh fisiknya,sobat lihat aja di SINI

Gimana sob? tertarik,yuk intip cara membuatnya.

Langkah dan Cara Membuat Tombol Memperbesar / Memperkecil Huruf Blogger

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)


button resize font jquery.
(1)


memperkecil memperbesar ukuran huruf blog.
(2)


trik cara membuat tombol besar kecil resize huruf posting blogger.
(3)


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#main&#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>

**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Setelah itu simpan template sobat.Untuk langkah terakhir ikuti berikut gan:

Pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


cara membuat besar kecil huruf
(5)


how to create a jquery rezise font?
(6)


Setelah itu pilih HTML/Javascript (gb6) dan letakkan kode berikut:


<div id='resizeFont'>
<input id='large' type='button' value='Perbesar Huruf'/>
<input id='reset' type='button' value='Ukuran Normal'/>
<input id='small' type='button' value='Perkecil Huruf'/>
</div>

Simpan Templates dan lihat hasilnya.

Untuk kode yang berwarna biru,sobat sesuaikan dengan attribut yang sobat inginkan,misal sobat ingin mengatur mengubah huruf dengan tombol ini pada bagian #main-wrapper atau #content-wrapper maka ganti kode berwarna biru tersebut dengan tag tersebut.

Tidak ada komentar:

Posting Komentar