Text Resizer: Click for Resizer
Bismillah Pada artikel sebelumnya saya telah menjelaskan tentang Memasang widget change the font this blog. Pada tutorial kali ini aku akan menjelaskan kepada Teman-teman mengenai menambahkan fasilitas Resize font dengan sentuhan JQuery,yang dimana fungsi dari fasilitas ini ialah memperbesar atau memperkecil ukuran text/font (A +, A -, A) sesuai dengan keinginan kita. Ok silahkan mencoba kawan.
NB : Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.
- Pertama-tama log in dulu ke account blogger anda
- Pada rancangan pilih edit HTML
- Kemudian cari kode ]]></b:skin> ( untuk memudahkan pencarian tekan Ctrl + F pada keyboard)
- Setelah ketemu masukkan kode dibawah ini dan letakkan diatas kode ]]></b:skin>
/* resizeFont*/
#resizeFont{
text-align:right;
margin-right:10px;
}
- Kemudian cari kode </head> setelah itu masukan script jQuery berikut diatasnya :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
NB : Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.
- Masukan kode Javascript berikut dibawah script jQuery tadi:
<!-- begin ResizeFont -->
<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>
- Klik Simpan
- Langkah terakhir Pada Elemen Laman >> Klik Tambah gadget >> Pilih HTML/javascipt
- Setelah itu masukkan kode dibawah ini kedalamnya :
<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>
- Klik Simpan selesai
Semoga Tutorial kali ini bermanfaat.....
4 komentar:
ich,keren demonya gan...
saya suka itu,tapi my blogg sudah terlalu penuh dengan tambahan dan takutnya membuat loading page nya lambat...
thx ya gan...
Di simpan ya bos... tinggal make aja nanti kalau mau pasang :)
Thanks ya bos
thanks udh follow q follow balik :j:
Mantab nie tapi kalo kaya ane yg pake widget wibiya yg tampilan foto nya di blog nga bisa di pake dong, :d:
Posting Komentar
Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya