Cara Membuat Tombol Teks Resizer di Blogger

Published by Anonymous Saturday, October 26, 2019

Teks Resizer

Bloger.id - Hello sobat blogger artikel kali akan membahas seputar Text Resizer, Teks Resizer adalah salah satu fitur yang mungkin bisa anda tambahkan di theme anda tujuannya adalah membuat pengunjung anda nyanan dengan fitur tersebut.

Teks Resizer merupakan fitur yang memungkinkan pengunjung anda memperkecil atau memperbesar tulisan atau teks di artikel anda dengan satu klik saja. Jadi apakah ini penting atau tidak. Tergantung topik yang anda bahas di situs blog anda.

Tombol teks resizer umumnya bisa berbentuk "A+" atau "A-". (A+) Adalah perbesar dan (A-) adalah perkecil. Lalu bagaimana cara membuat teks reziser di blogger atau blogspot, simak lengkap tutorial dibawah ini.

Cara Membuat Teks Resizer di Blog

• Buka dashboard blogger.com
• Selanjutnya klik theme, untuk jaga - jaga jika gagal atau script dibawah tidak support di template anda, saya sarankan backup terlebih dahulu template anda.
• Selanjutnya klik edit HTML.
• Selanjutnya cari kode (</head>), gunakan CTRL + F >> lalu copy dan paste script dibawah ini dan letakkan tepat di atas tag penutup (</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>

• Berikutnya copy dan paste script dibawah tepat di atas Tag penutup </style> atau ]]></b:skin>.

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

• Dan terakhir anda bisa meletakkan tombol Teks Resizer dibawah ini. Di header, melayang, atau sebagainya.

<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>

• Terakhir klik simpan.

Demikian tutorial yang bisa saya sampaikan, anda bisa mencobanya langsung di template anda.