Ubah Saiz Teks Dengan Butang Reset
Klik demo
Langkah pemasangan:
Login ke blogger dashboard-->Klik Design-->Edit HTML
Cari kod </head>
Pastekan kod dibawah ini diatas kod tadi
*buang kod jquery warna oren didalam ini jika template korang dah ada
Cari kod:
<div class='post-header-line-1'/>
Pastekan kod ini dibawah kod tadi
Buang kedua-dua kod warna kuning jika nak teks resizer kelihatan di laman utama dan kekalkan jika mahu di laman pos.
Cari kod <data:post.body/>
Dan gantikan dengan kod <span><data:post.body/></span>
Save template korang.Dah selesai.
Langkah pemasangan:
Login ke blogger dashboard-->Klik Design-->Edit HTML
Cari kod </head>
Pastekan kod dibawah ini diatas kod tadi
*buang kod jquery warna oren didalam ini jika template korang dah ada
<!-- Start Text re size gadget-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array('span','.section2');
section = section.join(',');
// Reset Font Size
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
});
</script>
<!-- End Text re size gadget-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array('span','.section2');
section = section.join(',');
// Reset Font Size
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
});
</script>
<!-- End Text re size gadget-->
Cari kod:
<div class='post-header-line-1'/>
Pastekan kod ini dibawah kod tadi
<!-- Start Text re size gadget -->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZBQHVWLQlkzwepMunRGnYkF2Hh9DJDf2q2S9YPDRO2NwWusawqt8S4j4nbf9Cj8234V9S2gH5G-arHQrs7udqtZMrwsYVRIKhyphenhyphensCWHmqK_Z1ReEAdXHQNYpPSLmZJi8WgOYEdte2EC8/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmIUNcQPZO-5_XjGr0xcMGTte7MRjdmvR9cqsCZ7eV99P5Qu9xyl9LEQaEgq0qp4bfH26npDKG03tJXYV9LG6OTxA3POK2rKir1nmmIHIaZBk9RKOyWqnMxjpZk6PLmHfhOW-QCzI_WM/s1600/bigger-font+-+Copy.png'/></a>
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi84Gm_bFWDXBL7KRHq698WVFxsuktn3R-azcbjkALf1yv7ZvC0z1QwDABdZ4j1g8EzTJjCvDxUwIR6aUZT99P-scJGsV2-NXrKrN-XwjT0AumlAcaEwkgyz5U7_CSU3O0tGRXv5PMg35A/s1600/smaller-font.png' style='cursor: hand;'/></a>
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMyOnbcnDsfCLvUW9A1gpufKoo-de-bbL2USSicC1eEALkViyHw1djsWAwAENokmTLfSpKSK14fV_68TEXq1pIrFcCPCiovFkweGli6hntf6VLNnWIbQ3yEkE25GyeAVECr-cbenaUfk/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size gadget-->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZBQHVWLQlkzwepMunRGnYkF2Hh9DJDf2q2S9YPDRO2NwWusawqt8S4j4nbf9Cj8234V9S2gH5G-arHQrs7udqtZMrwsYVRIKhyphenhyphensCWHmqK_Z1ReEAdXHQNYpPSLmZJi8WgOYEdte2EC8/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmIUNcQPZO-5_XjGr0xcMGTte7MRjdmvR9cqsCZ7eV99P5Qu9xyl9LEQaEgq0qp4bfH26npDKG03tJXYV9LG6OTxA3POK2rKir1nmmIHIaZBk9RKOyWqnMxjpZk6PLmHfhOW-QCzI_WM/s1600/bigger-font+-+Copy.png'/></a>
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi84Gm_bFWDXBL7KRHq698WVFxsuktn3R-azcbjkALf1yv7ZvC0z1QwDABdZ4j1g8EzTJjCvDxUwIR6aUZT99P-scJGsV2-NXrKrN-XwjT0AumlAcaEwkgyz5U7_CSU3O0tGRXv5PMg35A/s1600/smaller-font.png' style='cursor: hand;'/></a>
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMyOnbcnDsfCLvUW9A1gpufKoo-de-bbL2USSicC1eEALkViyHw1djsWAwAENokmTLfSpKSK14fV_68TEXq1pIrFcCPCiovFkweGli6hntf6VLNnWIbQ3yEkE25GyeAVECr-cbenaUfk/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size gadget-->
Buang kedua-dua kod warna kuning jika nak teks resizer kelihatan di laman utama dan kekalkan jika mahu di laman pos.
Cari kod <data:post.body/>
Dan gantikan dengan kod <span><data:post.body/></span>
Save template korang.Dah selesai.
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.