Perbesar Perkecil Ukuran Huruf dengan jQuery Versi 1.0

Tidak semua pengunjung blog kita memiliki kemampuan membaca yang sama dengan ukuran huruf yang kita tetapkan. Ukuran huruf tertentu bisa saja cocok untuk sebagian pengunjung tetapi ada juga yang merasa ukuran huruf yang dibacanya kurang cocok, terlalu besar atau terlalu kecil. Bagaimana supaya pengunjung blog kita merasa nyaman dengan ukuran huruf pada artikel kita? Mungkin dengan memberikan keleluasaan kepada pengunjung untuk menentukan ukuran huruf yang sesuai akan memudahkan dan membuat nyaman pengunjung untuk berlama-lama membaca artikel-artikel yang kita buat pada blog. Tutorial kali ini kita akan membuat widget/gadget perbesar perkecil huruf dengan jQuery. Tak ada salahnya fasilitas ini menjadi fasilitas wajib untuk blog anda.

Demo Perbesar Perkecil Ukuran Huruf

Perbesar Perkecil Ukuran Huruf dengan jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>

Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:

.post-body {font-size:12px; font-family : Verdana, Arial, Helvetica, sans-serif;}
.ubahfont img{border:1px solid #fff;padding:0;}

Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var $jno = jQuery.noConflict();
$jno(document).ready(function() {
var d=$jno('.post-body').css('font-size');
$jno(".resetFont").click(function(){
$jno('.post-body').css('font-size',d)
});
$jno(".perbesarFont").click(function(){
var a=$jno('.post-body').css('font-size');
var b=parseFloat(a,10);
var c=b*1.2;
$jno('.post-body').css('font-size',c);
return false
});
$jno(".perkecilFont").click(function(){
var a=$jno('.post-body').css('font-size');
var b=parseFloat(a,10);
var c=b*0.8;
$jno('.post-body').css('font-size',c);
return false
})});
//]]>
</script>

Langkah 8
Cari kode dibawah ini:

<data:post.body/>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='right' class='ubahfont'>
<a class='perkecilFont' href='#'><img alt='Perkecil' height='15' src='http://lh6.ggpht.com/_xcD4JK_dIjU/S-WMoStLo0I/AAAAAAAAEDI/5UWDZLN92sQ/d/tekskec.jpg' title='Smaller' width='15'/></a>&#160;
<a class='resetFont' href='#'><img alt='Reset' height='15' src='http://lh5.ggpht.com/_xcD4JK_dIjU/S-WMohydu6I/AAAAAAAAEDM/roODP05nadQ/d/teksres.jpg' title='Reset' width='15'/></a>&#160;
<a class='perbesarFont' href='#'><img alt='Perbesar' height='15' src='http://lh3.ggpht.com/_xcD4JK_dIjU/S-WMo8AmY2I/AAAAAAAAEDQ/H8Bz6PrwYvc/d/textbes.jpg' width='15'/></a>&#160;
<a href='http://modification-blog.blogspot.com/' target='_blank'><img height='15' src='http://lh4.ggpht.com/_xcD4JK_dIjU/S-WMoY89-yI/AAAAAAAAEDE/jfFuTdoOa3s/d/teksicon.gif' width='15'/></a>
</div>
</b:if>

Langkah 10
Simpan Template dan preview...

Download jQuery Font Resizer 1.0

Selamat mencoba dan semoga berhasil. Happy Blogging :)