Cara Mudah Membuat Text Resizer Di Blog

Pertama silakan kalian login di akun blog kalian dan masuk ke dashboard blog kalian pilih edit tema dan pilih yang mode html

Silakan kalian cari kode </style> atau ]]></b:skin>

Dan copy  code css dibawah ini dan pastekan tepat diatas salah satu dari kode diatas

button { padding: 3px 15px; float: right; cursor:pointer; margin:0 5px; } .text-resizer { }

Jika sudah kalian cari lagi kode </head>Dan pastekan kode dibawah ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Note : jika template kalian sudah dipasang kode diatas kalian bisa melewati nya

Selanjutnya nya masih dibagian </head> sekarang kalian copy kode dibawah ini dan pastekan kodenya tepat  diatas kode </head>

<script type="text/javascript"> $('').ready(function() { $('#incfont').click(function(){ curSize= parseInt($('.post-body').css('font-size')) + 2; if(curSize<=22) $('.post-body').css('font-size', curSize); }); $('#decfont').click(function(){ curSize= parseInt($('.post-body').css('font-size')) - 2; if(curSize>=12) $('.post-body').css('font-size', curSize); }); }); </script>

Terakhir silakan kalian copy kode html ini dimana saja sesuai kelingan anda

<b:if cond='data:blog.pageType == "item"'> <button class="text-resizer" id="incfont"><b>A+</b></button> <button class="text-resizer" id="decfont"><b>A-</b></button> </b:if>

Style 2

Jika tidak cocok dengan model style pertama kalian bisa coba style kedua.

Yuk simak tutorialnya copy kode css dibawah ini dan pastekan tepat diatas ]]></b:skin> atau </style>

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

Kemudian pastekan code dibawah ini tepat 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>

Kemudian silakan kalian tempelkan kode html ini sesuai keinginan anda

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

Done silakan pilih style Resize nya yang sesuai template anda.