√ Cara Membuat Text Resize di Blogger - BangOpit ID

Cara Membuat Text Resize di Blogger

Cara Membuat Text Resize di Blogger


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}

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>

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>

6. Selesai.

DEMO


Sekian dan Terima Kasih telah membaca artikel saya tentang Cara Membuat Text Resize di Blogger. Sampai Jumpa!
Buka Komentar
Tutup Komentar

Belum ada Komentar untuk "Cara Membuat Text Resize di Blogger"

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

Iklan atas artikel

Iklan tengah artikel 1

Iklan tengah artikel 2

Iklan bawah artikel