Langkah dan Cara Membuat Tombol Memperbesar / Memperkecil Huruf Blogger

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

(1)

(2)

(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 merah,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 dan klik Add Gadget kemudian pilih HTML/Javascript.

Setelah itu pilih HTML/Javascript 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.

Post by Doel Piero.