Увеличить уменьшить размер шрифта текста

Google-Translate to English

Браузеры позволяют изменять масштаб страницы, нажав на клавиши CTRL + или CTRL -. Для возврата в исходное состояние — CTRL 0 (ноль).

Уменьшить на клавиатуре размер текста

Скрипт "увеличить — уменьшить текст"

Пример,

Здесь я буду делать акцент на Blogger, но данный скрипт, увеличивающий уменьшающий размер шрифта текста на странице, можно с успехом применить и на других ресурсах. Пользователи blogspot переходят в "Шаблон" - кнопка "Изменить HTML" (подробнее про процесс изменения шаблона).

Добавляем скрипт

Перед </body> пишем:

<script>
//<![CDATA[
var tgs=new Array('div','p','td','pre'); // теги, в которых текст будет расти/уменьшаться
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large'); // размер можно писать в процентах new Array('70%','80%','90%','100%','110%','120%','130%')
var startSz=3;
function ts(trgt,inc) {
  cEl=null,sz=startSz;
  sz += inc;
  if (sz < 0) sz=0;
  if (sz > 6) sz=6;
  startSz=sz;
  cEl=document.querySelectorAll(trgt);
  for (var c=0; c < cEl.length; c++) {
    cEl[c].style.fontSize=szs[sz];
    for (i=0 ; i < tgs.length; i++) {
      cTags=cEl[c].getElementsByTagName(tgs[i]);
      for (j=0; j < cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
    }
  }
}
//]]>
</script>

Вставляем элементы, нажав на которые будет изменяться текст

В то место, где мы хотим увидеть кнопки пишем:

<button onclick="ts('.entry-content',-1);">А-</button>
<button onclick="ts('.entry-content',1);">А+</button>

<!-- .entry-contentселектор, в рамках которого будет происходить изменение. Если его заменить на body, то преобразование будет осуществляться по всей странице. -->

В Blogger самым простым вариантом будет создать гаджет HTML/JavaScript, куда внести код кнопок. Или перед <data:post.body/> в шаблоне.

в f t
наверх ↑

20 комментариев:

совесть
http://myrussiammm.blogspot.com/

Наташа, все сделал как написано, но буквы почемуто не появились.
Наверное нужно было убрать дату ?
NMitra
Поскольку вы не используете внутренние страницы, а всю инфо выводите на Главную, изменения будут происходить только для первого сообщения. Или для всей страницы, включая гаджеты (код из последнего пункта):

<h2 class='date-header'>&lt;a href=&quot;javascript:ts(&#39;body&#39;,1)&quot; style=&quot;font-size: x-large;&quot; title=&quot;Увеличить шрифт&quot;&gt;А&lt;/a&gt;
&lt;a href=&quot;javascript:ts(&#39;body&#39;,-1)&quot; title=&quot;Уменьшить шрифт&quot;&gt;А&lt;/a&gt;&lt;/b:if&gt;<span style='float: right;'><data:post.dateHeader/></span></h2>
Starkkk
Не нашел где было бы уместно задать этот вопрос.
Можно ли как нибудь упорядочить по алфавиту ссылки в сообщении, то есть сообщение и будет состоять только из одних ссылок
NMitra
Ссылки на сторонние ресурсы? Или так - http://shpargalkablog.ru/2011/03/soderzhanie-bloga-na-blogger.html
Al
На сторонние
NMitra
За линкопомойку не примут? См - http://shpargalkablog.ru/2011/02/filtry.html
Starkkk
Не важно, возможно ли это сделать?
NMitra
Да, с помощью скрипта. Опишу позже.
NMitra
http://shpargalkablog.ru/2011/07/uporyadochet-tablitsu-po-alfavitu.html
Анонимный
Спасибо! Работает! http://nyukers.blogspot.com/
Самое интересное что отсутствие такой функции на блоге мне читатель поставил в "-". Оказывется его не устраивает масштаб ВСЕГО, хочет зумить только страницу.)
NMitra
Вот и пригодился скриптик :)
Marina
Еще раз здравствуйте Наташа!
Опять незадача:) Скажите пожалуйста, как увеличить межстрочное расстояние в основном сообщении в Blogger? Да наверно вообще как увеличить это расстояние? Что нужно в шаблоне добавить? Гугл ответ не дал.
Строчки очень близко к друг другу.Не могу никак сделать, наверно что-то недопонимаю.
Marina
Но все оказалась проще чем может показаться:)))
И ведь не один раз это встречала line-height: 1.5;
NMitra
Верно)
Паша
А у вас нет статьи где поменять размер шрифта сообщений. Чтобы не пользователь менял а я поставил покрупнее.
NMitra
http://shpargalkablog.ru/2010/09/sdelat-otstup-dlya-abzatsa-blogger.html свойство font-size

Возможно в дизайнере шаблонов тоже что-то есть.
Евгения
Мне кажется или скрипт не работает? Даже в Вашем примере.
NMitra
Скрипт работает. Просто при смене шаблона я ещё не успела подкорректировать статью. Сегодня немного изменила код, в результате чего процесс добавления его стал проще.
Евгения
Ага, ясно. Спасибо!
Евгения
Я хочу запихать эти кнопки в строку меню в html-гаджет перед поиском
Проблема в том, что если я просто вставлю код с кнопками перед div, то строка поиска как бы переносится на вторую строчку. Как правильно вставить? Поискала в интернетах, предлагают варианты display: inline, span, style="float: left". Но не могу допетрить, куда и что втыкать))

Код гаджета на картинке: http://s58.radikal.ru/i160/1307/a5/d25f444129dc.jpg

И ещё: были ведь не кнопки, а просто буквы. Или они уже не работают? Просто хотела буковки вставить белые.
.