Perbesar Perkecil Ukuran Huruf dengan jQuery Versi 2.0

Labels:
Pada artikel sebelumnya Blogger Tune-Up telah membahas Perbesar Perkecil Ukuran Huruf dengan jQuery Versi 1.0. Pada Versi 2.0 sebenarnya hanya terdapat perbedaan script jQuery yang digunakan, mengenai fungsinya kedua versi ini sama saja. Hal ini sebagai alternatif jika salah satunya tidak dapat bekerja dengan baik, para blogger bisa memilih salah satu diantaranya untuk diterapkan pada blognya. Perbedaan mendasar ada pada perintahnya, jika Versi 1.0 hanya menggunakan fungsi "function click" sedang Versi 2.0 lebih kompleks lagi dengan diperkuat fungsi "switch case". Dari analisis sederhana Versi 2.0 lebih kecil dari "error handle" script dan perubahan ukuran huruf lebih halus dari Versi 1.0.
Perbesar Perkecil Ukuran Huruf dengan jQuery

jQuery Font Resizer 2.0

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:13px;font-family :"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;}
.changefont{padding:0; margin:0;}
.changefont img {border:1px solid #fff;padding:0;height:15px;width:15px;}
.changefont a {text-decoration:none;}
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 $jnoc = jQuery.noConflict();
$jnoc(document).ready(function(){
$jnoc(".changefont a").click(function(){
size = $jnoc(this).attr('rel');
switch(size) {
case 'reset' :
$jnoc(".post-body").css("font-size", "13px");
break;
case 'small' :
px = parseInt($jnoc(".post-body").css("font-size") != null ? $jnoc(".post-body").css("font-size") : "13");
if(px > 8) px--;
$jnoc(".post-body").css("font-size", px+"px");
break;
case 'large' :
px = parseInt($jnoc(".post-body").css("font-size") != null ? $jnoc(".post-body").css("font-size") : "13");
if(px < 24) px++;
$jnoc(".post-body").css("font-size", px+"px");
break;
}
return false;
});
});
//]]>
</script>
Langkah 8
Cari kode dibawah ini:
<data:post.body/>
Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='right' class='changefont'>
<a rel='small' href='#'><img alt='Perkecil' src='http://lh6.ggpht.com/_xcD4JK_dIjU/S-WMoStLo0I/AAAAAAAAEDI/5UWDZLN92sQ/d/tekskec.jpg' title='Smaller'/></a>&#160;
<a rel='reset' href='#'><img alt='Reset' src='http://lh5.ggpht.com/_xcD4JK_dIjU/S-WMohydu6I/AAAAAAAAEDM/roODP05nadQ/d/teksres.jpg' title='Reset'/></a>&#160;
<a rel='large' href='#'><img alt='Perbesar' src='http://lh3.ggpht.com/_xcD4JK_dIjU/S-WMo8AmY2I/AAAAAAAAEDQ/H8Bz6PrwYvc/d/textbes.jpg' title='Larger'/></a>&#160;
<a href='http://modification-blog.blogspot.com/' target='_blank' title="Blogger Tune-Up"><img src='http://lh4.ggpht.com/_xcD4JK_dIjU/S-WMoY89-yI/AAAAAAAAEDE/jfFuTdoOa3s/d/teksicon.gif'/></a>
</div>
</b:if>
Langkah 10
Simpan Template dan preview...

Selamat mencoba dan semoga berhasil. Happy Blogging :)