Здравствуйте, дорогие мои читатели и гости блога. У меня сегодня для вас ещё один вариант версии сайта для слабовидящих. Тема остаётся актуальной для блогов с определённой тематикой. И чтобы не повторяться, попрошу вас перейти по этой ссылке, где об этом более подробно написано. И также были предложены 2 способа установки такой версии в блоге.
Преимущества гаджета, который хочу предложить вам сейчас - выбор фона страницы, размер и цвет шрифта. Код совершенно простой, без сторонних ссылок. Устанавливается в блоге в гаджет HTML/JavaScript и прекрасно вписывается в дизайн. Посмотрите рабочий вариант такой версии для слабовидящих на тестовом блоге и заодно поиграйтесь с ней.
Вот сам код.
Никаких пояснений, думаю, здесь не нужно. Разве что захотите поменять пояснительный текст на свой. Я отметила эти строчки синим цветом. Вот и всё.
Пост сегодня коротенький и надеюсь, что окажется для кого-то полезным. Желаю вам хорошего настроения и отдыха. Спасибо, что читаете мои шпаргалки. До встречи.

Преимущества гаджета, который хочу предложить вам сейчас - выбор фона страницы, размер и цвет шрифта. Код совершенно простой, без сторонних ссылок. Устанавливается в блоге в гаджет HTML/JavaScript и прекрасно вписывается в дизайн. Посмотрите рабочий вариант такой версии для слабовидящих на тестовом блоге и заодно поиграйтесь с ней.
Вот сам код.
<style>
#styleSwitcher {
border:none;
margin:0 0;
padding:0 0;
width:98%;
text-align:left;
font:normal 11px Tahoma,Arial,Sans-Serif;
border-collapse:collapse;
}
#styleSwitcher th,
#styleSwitcher td {
vertical-align:middle;
border:none !important;
padding:2px 10px;
}
#styleSwitcher th.title {
background-color:#ccc;
padding:5px 10px;
margin:0 0 10px;
text-transform:uppercase;
font-size:12px;
font-family:Arial,Sans-Serif;
}
#styleSwitcher select,
#styleSwitcher input[type="text"] {
width:130px;
border:2px solid #bbb;
background-color:#333;
padding:2px;
font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
color:#999;
display:block;
margin:0 0 0;
height:24px;
}
#styleSwitcher select option {
color:white;
padding:5px 10px;
cursor:pointer;
}
#styleSwitcher button {
font:normal 11px Tahoma,Arial,Sans-Serif;
padding:3px 5px;
cursor:pointer;
}
#styleSwitcher #bgColorer {
overflow:hidden;
margin:10px 0 10px;
}
#styleSwitcher #bgColorer span {
display:block;
float:left;
width:20px;
height:20px;
border:1px solid black;
margin:0 5px 0 0;
cursor:pointer;
}
#styleSwitcher input[type="text"] {
width:118px !important;
padding:4px !important;
height:auto !important;
}
</style>
<table border="0" id="styleSwitcher">
<tr><th class="title" colspan="2">настройте шаблон на свой вкус</th></tr>
<tr>
<td colspan="2">
<div id="bgColorer">
<span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span>
</div>
</td>
</tr>
<tr><th>Подберите нужный шрифт</th>
<td>
<select onchange="fontSwitch(this.value);">
<option selected />--
<option value="'Book Antiqua',Serif" />Book Antiqua
<option value="'Times New Roman',Serif" />Times New Roman
<option value="Georgia,Serif" />Georgia
<option value="Arial,Sans-Serif" />Arial
<option value="Tahoma,Verdana,Arial,Sans-Serif" />Tahoma
<option value="'Trebuchet MS',Arial,Sans-Serif" />Trebuchet
<option value="Verdana,Arial,Sans-Serif" />Verdana
<option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
<option value="'Comic Sans MS',Serif" />Comic Sans
</select>
</td>
</tr>
<tr><th>Выберите цвет шрифта</th>
<td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
</tr>
<tr><th>Размер шрифта</th>
<td><input type="text" id="Размер шрифта" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
</tr>
<tr><th></th>
<td><button onclick="resetStyle();">Вернуться в обычный режим</button></td>
</tr>
</table>
#styleSwitcher {
border:none;
margin:0 0;
padding:0 0;
width:98%;
text-align:left;
font:normal 11px Tahoma,Arial,Sans-Serif;
border-collapse:collapse;
}
#styleSwitcher th,
#styleSwitcher td {
vertical-align:middle;
border:none !important;
padding:2px 10px;
}
#styleSwitcher th.title {
background-color:#ccc;
padding:5px 10px;
margin:0 0 10px;
text-transform:uppercase;
font-size:12px;
font-family:Arial,Sans-Serif;
}
#styleSwitcher select,
#styleSwitcher input[type="text"] {
width:130px;
border:2px solid #bbb;
background-color:#333;
padding:2px;
font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
color:#999;
display:block;
margin:0 0 0;
height:24px;
}
#styleSwitcher select option {
color:white;
padding:5px 10px;
cursor:pointer;
}
#styleSwitcher button {
font:normal 11px Tahoma,Arial,Sans-Serif;
padding:3px 5px;
cursor:pointer;
}
#styleSwitcher #bgColorer {
overflow:hidden;
margin:10px 0 10px;
}
#styleSwitcher #bgColorer span {
display:block;
float:left;
width:20px;
height:20px;
border:1px solid black;
margin:0 5px 0 0;
cursor:pointer;
}
#styleSwitcher input[type="text"] {
width:118px !important;
padding:4px !important;
height:auto !important;
}
</style>
<table border="0" id="styleSwitcher">
<tr><th class="title" colspan="2">настройте шаблон на свой вкус</th></tr>
<tr>
<td colspan="2">
<div id="bgColorer">
<span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span>
</div>
</td>
</tr>
<tr><th>Подберите нужный шрифт</th>
<td>
<select onchange="fontSwitch(this.value);">
<option selected />--
<option value="'Book Antiqua',Serif" />Book Antiqua
<option value="'Times New Roman',Serif" />Times New Roman
<option value="Georgia,Serif" />Georgia
<option value="Arial,Sans-Serif" />Arial
<option value="Tahoma,Verdana,Arial,Sans-Serif" />Tahoma
<option value="'Trebuchet MS',Arial,Sans-Serif" />Trebuchet
<option value="Verdana,Arial,Sans-Serif" />Verdana
<option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
<option value="'Comic Sans MS',Serif" />Comic Sans
</select>
</td>
</tr>
<tr><th>Выберите цвет шрифта</th>
<td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
</tr>
<tr><th>Размер шрифта</th>
<td><input type="text" id="Размер шрифта" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
</tr>
<tr><th></th>
<td><button onclick="resetStyle();">Вернуться в обычный режим</button></td>
</tr>
</table>
Никаких пояснений, думаю, здесь не нужно. Разве что захотите поменять пояснительный текст на свой. Я отметила эти строчки синим цветом. Вот и всё.
Пост сегодня коротенький и надеюсь, что окажется для кого-то полезным. Желаю вам хорошего настроения и отдыха. Спасибо, что читаете мои шпаргалки. До встречи.
здесь можно оформить подписку на новые шпаргалки
Виктория! У нас на всех школьных сайтах стоит версия для слабовидящих. Я подписана на блог "Доступное чтение". Это библиотека для слабовидящих. Дала им ссылку на ваш блог. Не знаю, смотрели они или нет.
ОтветитьУдалитьИрина, спасибо конечно. Дело в том, что таких вариантов очень много. Солидные сайты даже покупают специальные скрипты, где намного больше функций. С описанием картинок и прочего. Но , когда ко мне в первый раз обратилась одна из читательниц, её было достаточно того, что я предложила.Конечно же сайты с ориентацией на слабовидящих нужно заказыват спец. варианты. В принципе даже голосовая подойдёт.
ОтветитьУдалитьВиктория, установила в блоге гаджет, но, к сожалению он ничего не меняет в блоге. Не знаю, в чём проблема?
ОтветитьУдалитьЕлена Викторовна Минеева, не знаю в чём причина. Проверяла у себя на тестовых блогах работает вполне корректно. Код этот совершенно простой.Сбегала к Вам в блог не увидела его.
ОтветитьУдалитьЕлена у Вас много флэш и гиф установлено на главной. Тоже могут быть причиной для других гаджетов. Попробуйте создать новый тестовый блог по подобию рабочего и на нём тренироваться. Я всем это советую.