Привет друзья! Посетитель часто бывает с не важным зрением. И если у Вас маленький размер шрифта в блоге, то он не будет читать статью. А просто покинет вас или будет изо всех сил щуриться.Так давайте позаботимся о человеке.Для этого есть замечательный виджет для увеличения размера текста. Я Вам хочу представить два варианта виджета: выбирайте на ваш вкус.

Вариант первый - с помощью него читатель блога незамедлительно сможет подобрать нужный ему размер отображаемого текста, исходя из своих предпочтений.Ставиться такой виджет с помощью гаджета HTML/JavaScript на боковую панель. Выглядеть это будет так:

                                                                                                   + + + + +

Теперь посмотрим в действии. Демо. Как установить эту полезную штучку в блог.
                         Виджет для изменения размера текста в статье


Вариант первый простой: в панели управления Вашим блогом следуйте во вкладку "Дизайн" и добавьте в шаблон новый элемент HTML/JavaScript. В открывшееся поле гаджета вставьте этот код:

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span style="font-size: xx-small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span style="font-size: x-small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span style="font-size: small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span style="font-size: large;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span style="font-size: x-large;">+</span></a>

Назовите гаджет так, чтобы разъяснить читателю его предназначение.
Теперь вариант второй посложней:Зайдите в Шаблон -- Изменить HTML. С помощью комбинаций клавиш (Ctrl+F) найдите эту строку </head> в  шаблоне. Перед ней поставьте этот код:

<script type="text/javascript">
var tgs=new Array('div','p','td','pre');
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');
var startSz=2;
function ts(trgt,inc) {
  if (!document.getElementById) return
  var d=document,
  cEl=null,sz=startSz,i,j,cTags;
  sz += inc;
  if (sz &lt; 0) sz=0;
  if (sz &gt; 6) sz=6;
  startSz=sz;
  if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
  cEl.style.fontSize=szs[sz];
  for (i=0 ; i &lt; tgs.length; i++) {
    cTags=cEl.getElementsByTagName(tgs);
    for (j=0; j &lt; cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
  }
}
</script>


Далее с помощью комбинаций клавиш (Ctrl+F) найдите эту строку в шаблоне: <data:post.body/> теперь эту строчку облачите так: <div id="font-a"><data:post.body/></div> .Теперь добавляем элемент + и -.Опять с помощью комбинаций клавиш (Ctrl+F) найдите строку в  шаблоне: если хотите добавить в начало поста <div class='post-body entry-content'>,а если в конце сообщения,то эту строчку: <div class='post-footer'> сразу после  одной из этих строк добавьте код:

<b:if cond='data:blog.pageType == &quot;item&quot;'><table align='right' border='0'>
<tbody>
<tr>
<td style=' border:2px dashed grey; padding:3px;'> <a href='javascript:ts(&apos;font-a&apos;,1)'> <span style='font-size: large;'>A+  </span> </a>
<a href='javascript:ts(&apos;font-a&apos;,-1)'>
<span style='font-size: small;'>  A-</span> </a></td>
</tr>
</tbody>
</table></b:if>

Готово. Виджет для изменения размера текста в статье установлен. Желаю удачи. До новых встреч.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


0 коммент. :

Отправить комментарий