Виджет увеличить/уменьшить размер шрифта и подчеркивание ссылок в блоге



Как изменить шрифт: увеличить или уменьшить, Как подчеркнуть ссылки блога с использованием CSS стилей


Здравствуйте дорогие блоггеры. Сегодня небольшой пост об изменении размера шрифта, и как красиво выделить ссылки блога, то есть подчеркнуть. Все Вы прекрасно знаете, что информацию Ваших блогов читает разная аудитория. Есть люди с проблемами зрения, да и на разных устройствах и браузерах блоги наши отображаются по разному.


Как установить в блог виджет изменить шрифт блога
Поэтому разрешите предложить виджет изменения размера шрифта. Виджет неплохо вписывается в дизайн блога, выглядит как поиск, а читателям несомненно доставит массу удовольствия читать информацию на страницах Вашего блога.

Код вставляете добавить гаджет-Html/JavaScript-вставить-сохранить в удобном для читателей месте макета блога. Работу виджета можно посмотреть в тестовом блоге справа. Там же кстати посмотрите и подчеркивание ссылок (подведите курсор к любой ссылке, хотя бы в меню, увидите точечное подчеркивание), информация об этом ниже.

<script>
function go1(){
if (document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize
=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value
}
}

function go2(){
if (document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily
=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value
}
}
</script>
<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option selected value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option selected value="Trebuchet Ms"//>Trebuchet Ms
<option value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option selected value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
<option value="18px"/>18
</select></form>


И для тех, кто хочет в своем блоге украсить ссылки, в данном случае я имею ввиду подчеркивание, скопируйте CSS для ссылок.

Далее идем в шаблон-изменить шаблон, делаем резервную копию шаблона, находим строку <b:skin>...</b:skin>, кто еще не знает, где искать, читайте мой пост как быстро и красиво оформить текст блога. Нажимаем на стрелку слева, тихонечко опускаемся вниз и выше строки ]]></b:skin> вставляем CSS для ссылок.

a:hover {
color:#f00;
border-bottom: 2px dotted #ff9900;
}

Настраиваете выделенное синим: цвет заголовка; красным: толщину линии (2 px), цвет линии и форму линии: dotted (точечная), dashed (пунктирная), solid (простая линия), double (двойная), ridge (выпуклая) и.т.д как границы рамок. У меня на сегодня все.

Пишите, делитесь с друзьями и знакомыми в социальных сетях. Всего Вам доброго. Почитайте информацию виджеты для изменения фона и ссылок в блоге.


Автор статьи ✎ Olga Protasova Выпуск ✹ 5/28/2014 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Здравствуйте Ольга! Проверил у себя не работаeт CSS ссылок. Облако тегов - тоже у вас устаревшая информация, не один не работает и flash и просто. Вообще многие виджеты, скрипты нужно проверять, далеко не все подходят под тот или иной шаблон, да еще и не все браузеры показывают. Изменение шрифта подошло, спасибо. Успехов Вам!

    ОтветитьУдалить
    Ответы
    1. Максим, CSS для ссылок изменила, попробуйте. У меня работает в тестовых. А за нерабочие скрипты виджетов я знаю. Не успеваю обновлять информацию. Во многих статьях уже пишу, что скрипт нерабочий. Последнее время очень много скриптов полетело.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *