Widget per cambiare la dimensione dei caratteri del blog.

Quando si apre una pagina con il browser si può aumentare la dimensione dei font pigiando su Ctrl e sul tasto del più (+). Se invece si vuole diminuire la dimensione dei caratteri si va sempre su Ctrl ma sul meno. Per ritornare alle dimensioni originali occorre cliccare su Ctrl+0. Questo per quanto riguarda gli OS Windows. Può essere carino inserire un widget che consenta al lettore di modificare le dimensioni del testo a sua discrezione mediante un cursore.

Si utilizza lo script MooTools che è già stato usato per il suggestivo Menù Accordion presentato qualche settimana fa. Si va su Design > Modifica HTML e si salva il modello completo. Importante non mettere la flag su Espandi modelli widget. Si cerca la riga </head> e, subito sopra si incolla il codice

<!--Dimensioni caratteri Inizio-->
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/mootools2.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, // Dimensione massima del carattere
  range: [8], // Dimensione minima del carattere
  onChange: function(value){
  font.setStyle(&#39;font-size&#39;, value);
  }
  }).set(font.getStyle(&#39;font-size&#39;).toInt());});
  </script>
<noscript><a href='http://goo.gl/oBmmR' target='_blank'><span style='font-size: x-small;'>Font Size Effect</span></a></noscript>
<style type='text/css'>
div.slider {
width: 200px; /* larghezza della barra */
height: 18px; /* altezza della barra */
background: #D1D1D1; /* colore della barra */
}
div.slider div.knob {
background: #1170EE; /* colore del cursore */
width: 16px; /* larghezza del cursore */
height: 18px; /* altezza del cursore */
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>
<!--Dimensioni caratteri Fine - www.ideepercomputeredinternet.com-->

Adesso cercate un blocco di codice simile a questo

<b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Post sul blog' type='Blog'/>
          </b:section>

e inserite prima e dopo le due righe evidenziate di rosso (ripeto che non deve esserci la spunta e espandi modelli widget)

<span id='fontSize'>
          <b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Post sul blog' type='Blog'/>
          </b:section>
         </span>

Salvate il modello. Andate su Design > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate quest'altro codice in Sezioni del sito

<div id="myElement" class="slider">
<div class="knob"></div>
</div>
<p>Sposta il cursore sulla barra per cambiare le dimensioni dei caratteri</p>

Dove la parte colorata di blu può essere modificata a piacimento. Salvate e posizionate con il mouse l'elemento sulla sidebar. Si visualizzerà una barra orizzontale con un cursore che permetterà al visitatore di cambiare le dimensioni dei font

Se nei post ci sono delle immagini, dei video o altri oggetti diversi dal semplice testo, questi resteranno invariati al muoversi del cursore. Si possono operare molte personalizzazioni nelle parti di codice colorate di rosso. Non sto a dilungarmi ulteriormente e mi limito a ricordare che si tratta della

1. Dimensione massima dei caratteri
2. Dimensione minima dei caratteri
3. Larghezza della barra del widget
4. Altezza della barra del widget
5. Colore della barra
6. Colore del cursore
7. Larghezza del cursore
8. Altezza del cursore

Potete visionare online la

• Demo del widget per modificare la dimensione dei font -

Spostate con il mouse il cursore blu per modificare i caratteri. Questo articolo mi è stato ispirato da uno splendido lavoro di Ciudad Blogger.