Cara Mudah Membuat Text Resizer Di Blogger

Cara Mudah Membuat Text Resizer Di Blogger - Text Resizer adalah ukuran teks, dengan menagatur ukuran teks memiliki manfaat karena kebutuhan pembaca berbeda-beda, Text Resizer dapat juga dipasang pada Blog. Elemen pada Text Resizer berfungsi untuk membesar dan kecilkan huruf pada postingan artikel dan  bisa dirubah sesuai keinginan pembaca.

Untuk membuat Text Resizer menggunakan fungsi Javascript dan CSS, ukuran pada kode tersebut sangatlah kecil jadi tidak memberatkan pada loading Blog. Untuk dapat menyesuaikan ukuran huruf minimum dan maksimum, anda hanya cukup klik tombol pada element tersebut.
Tombol pada Text Resizer dapat difungsikan pada bagian tertentu contohnya pada bagian postingan artikel bahkan untuk seluruh halaman. Sebagai contoh anda bisa melihatnya dipojok kanan atas postingan, bagi anda yang tertarik untuk memasang Text Resizer pada Blog berikut ini langkah-langkahnya :

Cara Mudah Membuat Text Resizer Di Blogger

Silahkan anda masuk keeditor Template, kemudaian anda cari kode ]]></b:skin> dan letakkan kode dibawah ini sebelumnya :

button {
    padding: 3px 10px;
    float: right;
    cursor:pointer;
    margin:0 4px;
    }
.text-resizer { }

Langakah selanjutnya anda cari kode </head> kemudian anda terapkan kode dibwah ini diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Note :
Jika pada Template anda suda memiliki kode diatas anda bisa melawti langkah tersebut

Masih pada bagian kode </head>, selanjutnya anda letakkan juga kode dibawah ini diatsnya atau dibawah kode diatas

<script type="text/javascript">
  $('').ready(function() {
  $('#incfont').click(function(){  
        curSize= parseInt($('.post-body').css('font-size')) + 2;
  if(curSize =22)
        $('.post-body').css('font-size', curSize);
        });
  $('#decfont').click(function(){  
        curSize= parseInt($('.post-body').css('font-size')) - 2;
  if(curSize>=12)
        $('.post-body').css('font-size', curSize);
        });
 });
</script>

Note :
kode curSize =22 dan curSize =12 adalah ukuran tulisan.

Selanjutnya pemasangan kode HTML, untuk pemasangan kode tersebut anda cari kode <div class="main-wrapper">, jika anda ingin memasangnya didalam postingan anda cari kode <div class="post-body entry-content">

<b:if cond='data:blog.pageType == "item"'>
<button class="text-resizer" id="incfont"><b>A+</b></button>
<button class="text-resizer" id="decfont"><b>A-</b></button>
</b:if>

Kemudian langkah terakhir anda save Tempalte.

Demikian Cara Mudah Membuat Text Resizer Di Blogger, semoga bermanfaat!

Share this post