Παρασκευή 4 Φεβρουαρίου 2011

jQuery Powered Text / Font Resize Widget

1. Add jQuery.
You can skip this step if your blog already runs the jQuery Script. If not you can paste this above

</head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

. Add The Resize Widget.

    Blogger Users: Add an HTML/JavaScript Widget on your blog and paste the code, save it

<style>
html {
font-size:13px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}

.post-body {
font-size:13px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}

</style>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('.post-body').css('font-size');
$(".resetFont").click(function(){
$('.post-body').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('.post-body').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('.post-body').css('font-size', newFontSize);
return false;
});
});
</script>
<div id="sidebar-right2"><div id="sidebar1"><ul>
<li><a href="#" class="increaseFont">Increase</a></li>
<li><a href="#" class="decreaseFont">Decrease</a></li>
<li><a href="#" class="resetFont">Reset</a></li>
</ul>
</div></div>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Το σχόλιό σας μετράει !