Новое в блоге
Loading...
22 дек. 2011 г.

Новый виджет изменения размера шрифта в статье

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

Как вставить в блог виджет для увеличения шрифта в статье. 

Теперь  идём  Шаблон - Изменить HTML и найдите следующий код: </head> именно до него добавьте следующий код:

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
  <script type='text/javascript'>
  window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
  font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
  steps: 35, // Tamaño máximo de la letra
  range: [8], // El 8 es el tamaño mínimo
  onChange: function(value){
  font.setStyle(&#39;font-size&#39;, value);
  }
  }).set(font.getStyle(&#39;font-size&#39;).toInt());

});
  </script>

<style type='text/css'>
  div.slider {
  width: 97%;
  height: 26px;
  background: url(http://4.bp.blogspot.com/-r0WKMic2VOs/TaJQD3MI26I/AAAAAAAAAxE/od7dEWVqFPw/slider-bg.gif) no-repeat right top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #708B95;
  margin-top:40px;
  }
  div.slider div.knob {
  background: url(http://4.bp.blogspot.com/-0iBbRw58HkM/TaDqwZuIN5I/AAAAAAAAAw8/g9445jD5q5w/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

Теперь перейдём к следующему шагу. Теперь нам нужно добавить код виджета в область сообщений. Попробуйте найти следующий код или схожий с ним:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Далее к этому коду нужно добавить пару строк. Вот так должно быть:
<span id='fontSize'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</span>
Сохраните шаблон. Следующий шаг. Добавляем виджет на боковую панель блога. Панель управления Дизайн нажмите кнопку добавить гаджет Javascript / HTML и в области содержимого, вставить следующий код:
<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://new-school-blogger.blogspot.com/" title="Blogger" target="_blank">Школа</a> |
<a href="http://new-school-blogger.blogspot.com/" title="Blogger  Widget." target="_blank">Get Yours ?</a></p>

Всё. Сохраните гаджет. Всем пока. До новых встреч.
Может Вам нужен виджет облако тегов для Blogger или бегущая строка с последними статьями

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

0 коммент. :

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

 
Footer