Cara Membuat Tombol Memperbesar atau Memperkecil Ukuran Font di Postingan Blog

Selamat siang Sobat... :) Tutorial kali ini kita akan membahas Bagaimana Cara Membuat Tombol Memperbesar atau Memperkecil Ukuran Font di Postingan Blog. Untuk mempersingkat perjalanan mari kita
ikuti langkah berikut:

1. Masuk ke akun Blogger
2. Pilih Template, Edit HTML dan jangan lupa centang Expand Template Widget
3.Cari kode </head>. Gunakan Cntr+F atau F3 untuk memudahkan pencarian
4. Copas kode di bawah ini dan letakkan di atas kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#main&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

Hapus kode yang berwarna kuning kalau widget blog Sobat yang lain tidak berfungsi.


5.  Untuk membuat tombol itu di bawah postingan blog, cari kode <data:post.body/>
  Kalau  blog Sobat menggunakan Read more biasanya ada 2 atau 3
  <data:post.body/>
6.  Letakkan kode script di bawah ini tepat di bawah kode <data:post.body/> yang nomor 2


<table><tr><td><strong>Pilih ukuran font:</strong></td>
<td><div id='resizeFont'>
<input id='large' type='button' value='Perbesar Huruf'/>
<input id='reset' type='button' value='Ukuran Normal'/>
<input id='small' type='button' value='Perkecil Huruf'/>
</div></td></tr></table>

7. Simpan template
Script by: Pelajaran-Blog

Related Posts:

Tweet