Скрипт для увеличения шрифтов на сайте (в блоге)

В Joomla, в дефолтовых шаблонах (и не только), в хедеры был классный виджет с кнопками в виде плюса и минуса, которыми регулировался размер шрифта в блоге. Эта функция встречается и в других CMS, включая Wordpress.
Blogger здесь - не исключение, и хотя в блогспотовских шаблонах я ни разу не встречал таких кнопок приближения/удаления, но их можно сделать самостоятельно, используя возможности библиотеки jQuery.

Скрипт из-за специфики блоггеровского шаблона работает не совсем правильно.
По замыслу разработчика он "воздействует на определённый тег (в демо это тег p), поэтому для корректной его работы текст должен быть строго "под тегом", например, под тем же тегом p или тегом a, если вы хотите для прикола увеличивать только ссылки.
Насколько это юзабельно, судить не берусь :).

По традиции простенькое демо (скрипт увеличивает и уменьшает следующий (серо-розовый) абзац текста ↓):

В установке на Blogger нет ничего не обычного, а стиль такого самопального виджета настраивается по вкусу при помощи Css.
Функции браузера (кнопки на клаве + и -) этот "виджет" дублирует лишь отчасти, поскольку формат шрифта после перезагрузки страницы возвращается в исходное состояние.

Установка.
Изначально в блоге должна находиться, ввиде ссылки, захостенная библиотека jQuery.

Потом основной скрипт, который можно вставить тоже перед </head> (альтернатива: вставить в html виджет, а ещё лучше - сохранить в .js файл и оставить ссылку в шаблоне, что предупредит его замусоривание служебными элементами):

<script type='text/javascript'>
 $(function(){
  $('input').click(function(){
   var ourText = $('p');
   var currFontSize = ourText.css('fontSize');
   var finalNum = parseFloat(currFontSize, 10);
   var stringEnding = currFontSize.slice(-2);
   if(this.id == 'large') {
    finalNum *= 1.2;
   }
   else if (this.id == 'small'){
    finalNum /=1.2;
   }
   ourText.animate({fontSize: finalNum + stringEnding},600);
  });
 });
 </script>

Где:
var ourText = $('a') - параметр с тегом, котрый будет обрабатывать данный скрипт.

Плюс html коды обеих кнопок (один идёт за другим):

<input type='button' value='+' id='large' /><input type='button' value='‒' id='small' />

В область value можно вписать любой текст.
За кнопку увеличения отвечает id large.
За уменьшение - id small.
Атрибут input - button, кнопка. Чтобы вставить изображение, используйте img, либо пробуйте через css.
Весь код с input'ами копируется в html/lavascript виджет Blogger'а.

Осталось придумать стили, которыми разукрасим два невзрачных символа (стили целесообразно хранить в ccss области шаблона):

<style>
input[type='button'] {border:none; float:left; cursor: pointer;}
#large {color:red;text-shadow: gray 1px 1px 2px; font-size:25px;}
#small {color:blue; text-shadow: black 1px 1px 2px; font-size:25px;}
</style>

Где:
-- input[type='button'] - стиль для обеих кнопок (обрабатывается весь тег input; чтобы появилась вместо стрелки курсора рука я использовал опцию cursor: pointer))
-- large - обрабатывается id кнопки увеличения (цвет, тень и размер текста)
-- small - обрабатывается id кнопки уменьшения (цвет, тень и размер текста)

Источник.

Другой интересный скрипт для Blogger, регулирующий текст на странице, описан в этой статье, но он работает на mootools, что чревато некоторыми костылями.