Tutorial Lengkap Tentang Bagaimana cara untuk dapat Membuat Text Resize pada Blogger

KelasHiro, Karawang - Pada kesempatan kali ini kami akan melakukan sharing informasi untuk kalian para pengguna Blogger. Pada kesempatan ini kami akan menginformasikan terkait dengan Text Resize, Apa itu sebenarnya ? Berikut ini informasinya.
Text resize ialah berupa sebuah tombol yang memiliki fungsi untuk dapat memperbesar dan juga dapat memperkecil huruf pada artikel yang telah kalian posting. Tombol text resize ini biasanya berupa tanda 'A+' untuk memperbesar dan 'A-' untuk dapat memperkecil. Akan tetapi, bisa saja tandanya berbeda-beda pada setiap pengguna website atau blog tertentu.

Ini akan sangat berguna bagi mereka para pengunjung di website kalian, karena ia akan dapat menyesuaikan besar kecilnya huruf dengan kebutuhannya atau disesuaikan dengan lebar dari pada layar penggunanya.

Berikut ini adalah cara untuk dapat membuat text resize, yang perlu kalian lakukan hanya tinggal menyimak saja caranya yang akan di jelaskan sebagai berikut ini, ukurannya pun hanya kecil dan berupa kombinasi diantara CSS dan JavaScript sehingga tidak memberatkan loading blog.

1. Buka dashboard Blogger kamu.
2. Pilih menu Tema > Edit HTML.
3. Tempatkan kode dibawah ini tepat berada di atas </style> atau ]]></b:skin>. Seandainya memang tempilan dari pada text resize kurang menarik, maka kalian akan dapat merubahnya melalui kode CSSnya.
CSS
rfopit{margin-top:10px;text-align:right}
#large{font-size:20px}
#reset{font-size:18px}
#small{font-size:16px}
4. Tempelkan kode berikut diatas </head>.
Javascript
<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>
5. Pastekan sesuai dengan tempat yang kalian inginkan untuk meletakkannya.
HTML
<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>

6. Selesai

Terima kasih kalian telah berkunjung ke website kami, dan mudah - mudahan informasi ini akan dapat bermanfaat untuk kalian semua dalam memperbaiki dan memperindah tampilan website kalian. 

0 Comments