Memasang Widget Untuk Merubah Ukuran Font Pada Blog

Jumpa lagi sob ... begitu sapaan para blogger ketika ku buka blog kesayanganku.... ( jadi mirip cerpen ). gini aja dech, kali ini saya mau ngasih trik buat para blogger untuk bisa memberikan wewenang kepada para pembaca agar bisa merubah ukuran huruf yang ada di postingan kita. mang bisa...?

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :


mau tau kan caranya ...? yukkk langsung aja kita masuk ke cara membuatnya. seperti biasa kalian harus Login dulu ke blog kalian. setelah itu baca artikel dibawah tulisan ini :

1. masuk ke Rancangan / tata Letak
2. Kalian pilih EDIT HTML ( jangan lupa di back up )
3. Sekarang Kalian Cari Kode ]]></b:skin>
4. Copy Css berikut dan paste di atas kode tadi

/* Rubahhuruf By azis lamayuda
*/
#Rubahhuruf{
margin-right:10px;
padding-top:17px;
float:right;
}

5. Sekarang kalian cari kode </head>
6. Copy Script berikut dan paste diatas kode tadi

<script src='http://myscriptforme.googlecode.com/files/AzisFont.txt' type='text/javascript'/>
<!-- Mulai Rubahhuruf -->
<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('#main-wrapper');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'large') {
finalNum *= 1.1;
}
else if (this.id == 'small'){
finalNum /=1.1;
}
else if (this.id == 'reset'){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

Keterangan :
== kode var ourText = $('#main-wrapper'); bisa kalian ganti sesuai keinginan kalian huruf pada bagian mana yang akan dirubah ukurannya, misalnya menjadi Content-wrapper atau yang lainnya.

7. Belum selesai, sabar dulu ya. sekarang kalian cari kode <data:post.body/>, dan copy script berikut lalu simpan diatasnya.

<div id='Rubahhuruf'>
<input id='large' type='button' value='+A'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>
</div>

sebagai tambahan jika kalian ingin menampilkannya di halaman posting saja tinggal kalian sisipkan kode diatas diantara kode berikut :

<b:if cond='data:blog.pageType == "item"'>

</b:if>

jadi bentuknya akan seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<div id='Rubahhuruf'>
<input id='large' type='button' value='+A'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>
</div>
</b:if>

8. simpan dech... Selesai juga akhirnya. ( Lihat hasilnya ).

Ok.. semoga bermanfaat dan jangan lupa untuk membiasakan memberi komentar ya....