lihat juga

Sunday, May 16, 2010

Tombol memperbesar atau memperkecil ukuran font di blog

Teori ini nanti akan memakai kode Jquery. Tetapi dengan memakai kode Jquery ini, jangan perlu takut Blog anda akan menjadi berat loadingnya, karena saya pernah menulis mengenai Compress Jquery agar tidak memberatkan blog. Anda bisa coba buka nanti.

Caranya kira-kira seperti ini:

1. Sepert biasa anda Proses Login Ke Account Blogger Anda
2. Masuk Ke Edit HTML
3. Kemudian cari kode </head>:
4. Letakkan Kode di bawah ini, diatas kode </head>

<script src='http://sites.google.com/site/amienk2/file-cabinet/ubahfontblogamin.txt' type='text/javascript'/>

5. Kemudian masukkan script di bawah ini, dibawah kode txt diatas. Awas jangan sampe keliru. Di bawah Kode yang diatas



<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('#content-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>

CATATAN :

- #content-wrapper yang ada diatas Dapat anda ubah sesuai dengan keinginan anda, bagian mana yang akan anda atur fontnya. Misal, #sidebar-wrapper, #main-warapper, dlsb.

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

6. Kemudian cari kode  <data:post.body/> lalu letakkan script di bawah ini tepat diatas kode <data:post.body/>

<div id='resizefont'>
<input id='large' type='button' value='Perbesar'/>
<input id='reset' type='button' value='reset'/>
<input id='small' type='button' value='perkecil'/>
</div>

7. Kemudian Cari kode ]]></b:skin> dan Copy kode CSS di bawah, kemudian pastekan di atas kode ]]></b:skin>

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

kode CSS ini dapat anda rubah, untuk menyesuaikan posisi tombol.
8. Simpan Template.

ads

Ditulis Oleh : gdfysx Hari: 3:19 AM Kategori:

0 comments:

Post a Comment

surf