Pubblicato il 13/04/11e aggiornato il

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

cursore dimensione caratteri

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

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





8 commenti :

  1. Ma è fantastico! Lo provo subito. Ormai aspetto ogni giorno dei nuovi articoli sul tuo sito :D

    RispondiElimina
  2. Lo cercavo da troppo tempo un widget di questo tipo!

    Grazie parsifal!

    RispondiElimina
  3. Caro Ernesto, bellissimo widget. Sono riuscito a inserirlo ma non dà segni di vita.

    RispondiElimina
  4. Ciao, proprio quello che cercavo, domani lo provo. Grazie

    RispondiElimina
  5. Il widget non sempre è compatibile con gli script del modello

    RispondiElimina
  6. Anche a me non da segni di vita, appare ma il cursore non si muove. Pazienza. Ciao

    RispondiElimina
  7. Ciao, ovviamente non pretendo un'aiuto in questi giorni di festa ma volevo dirti che questo widget è fantastico. L'ho inserito nel mio blog ma poi ho dovuto eliminarlo perchè con firefox è tutto ok mentre se lo apro con IE visualizzo i post nella home page con il font massimo che abbiamo inserito (35 mi sembra). Credo che tu abbia fatto i dovuti controlli ma volevo fartelo notare. C'è soluzione o è la solita rottura di IE?

    RispondiElimina
  8. @***KlArte*** Lo script MooTools con Internet Explorer ha dei grossi problemi da sempre che lo sviluppatore non è mai riuscito a risolvere :(

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.