Text resize adalah sebuah tombol yang berfungsi untuk memperbesar dan memperkecil huruf pada artikel blog kamu. Tombol text resize ini biasanya berupa tanda 'A+' untuk memperbesar dan 'A-' untuk memperkecil. Namun, bisa saja tandanya berbeda-beda di setiap website atau blog.

Text resize ini sangat berguna untuk kenyamanan pengunjung blog, karena ia bisa menyesuaikan besar kecilnya huruf dengan kebutuhannya atau disesuaikan dengan lebar layar.

Cara membuat text resize juga sangat mudah, kamu hanya tinggal menyimak cara yang akan saya jelaskan dibawah dan tenang, ukurannya hanya kecil dan berupa kombinasi antara CSS dan JavaScript sehingga tidak memberatkan loading blog.

Cara Membuat Text Resize di Blogger

1. Buka dashboard Blogger kamu.
2. Pilih menu Tema > Edit HTML.
3. Tempel kode berikut diatas </style> atau ]]></b:skin>. Jika tempilan text resize kurang menarik, kamu bisa merubahnya melalui kode CSS ini.
.rfopit{margin-top:10px;text-align:right} #large{font-size:20px} #reset{font-size:18px} #small{font-size:16px}code-box

4. Dan jangan lupa untuk menempelkan kode berikut diatas </head>.
<script type='text/javascript'> $(function(){ $(&#39;input&#39;).click(function(){ var ourText = $(&#39;.post-body&#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 =16; } ourText.animate({fontSize: finalNum + stringEnding},500); }); }); </script>code-box

5. Yang terakhir, tempel kode berikut ditempat yang kamu ingin tombol tersebut berada.
<div class='rfopit'> <input id='large' title='Perbesar' type='button' value='A+'/> <input id='reset' title='Normal' type='button' value='A'/> <input id='small' title='Perkecil' type='button' value='A-'/> </div>code-box
6. Selesai.

Preview/preview/button
DONASI Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.bangopit.id. Terima kasih.

5 Komentar

Peraturan Berkomentar
1. Jangan menggunakan kata-kata kotor dan kasar
2. Jangan menyertakan link dalam berkomentar
3. Jangan membahas keluar topik, jika keluar topik sebaiknya gunakan Contant Form yang disediakan

  1. makasih buat tutorialnya saya coba ya.

    BalasHapus
  2. Keren Weh, demo script dibuatkan blog sendiri. Pakai sub domain pula..

    BalasHapus
    Balasan
    1. Biar pengunjung percaya mas ama tulisan saya dan dulu pernah ada yg komplain gegara ga ada demonya

      Hapus
  3. tutornya ada yang kelewat engga nih bang , ,hhe
    gak work, apa karena template yang saya pakai ya?

    BalasHapus
    Balasan
    1. sepertinya ga semua template work, soalnya kemarin coba di template lain ga bisa bang

      Hapus

Posting Komentar

Peraturan Berkomentar
1. Jangan menggunakan kata-kata kotor dan kasar
2. Jangan menyertakan link dalam berkomentar
3. Jangan membahas keluar topik, jika keluar topik sebaiknya gunakan Contant Form yang disediakan

Lebih baru Lebih lama