Blogger

Cara Membuat Text Resize di Blogger

0
Please log in or register to do it.

MedianWPCara Membuat Text Resize di Blogger — hai MedianWP lover, kali ini kita akan membahas tentang 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.

  1. Cara Membuat Text Resize di Blogger
  2. Kode CSS Style Text Resize Blogger
  3. Kode Javascript Text Resize Blogger
  4. Pasang Tombol Resize Text Blogger

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.

Kode CSS Style Text Resize Blogger

3. Letakkan kode CSS berikut tepat di atas kode ]]></b:skin> atau diantara <style> dan </style>

Jika tempilan text resize kurang menarik, kamu bisa merubahnya melalui kode CSS ini.

.exthemes_RF{margin-top:10px;text-align:right}
#large{font-size:20px}
#reset{font-size:18px}
#small{font-size:16px}

Kode Javascript Text Resize Blogger

4. Dan jangan lupa untuk menempelkan kode berikut diatas <head> dan </head>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type='text/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>

Pasang Tombol Resize Text Blogger

5. Pasang Tombol Resize Text
Selanjutnya adalah memasang tombol resize text-nya di blog mu, kamu dapat memasang tombolnya dimanapun kamu mau.

Dan berikut ini kode tombol resize text-nya.

<div class='exthemes_RF'>
<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.

Nah sahabat MedianWP Lover itu lah tadi Cara Membuat Text Resize di Blogger versi MedianWP yang dapat Anda jadikan referensi pilihan buat teman teman, semoga Informasi Cara Membuat Text Resize di Blogger ini bermanfaat bagi Anda, Tekan CTRL + D untuk bookmark halaman ini. Silahkan tinggalkan komentar jika ada pertanyaan dan jangan lupa untuk membaca artikel menarik lainnya.

Cara Minify CSS Manual dan Otomatis Blogger
Cara Membuat Table of Content Otomatis di Blogger
Ad Area

Reactions

1
0
0
0
0
0
Already reacted for this post.

Reactions

1

Your email address will not be published. Required fields are marked *