Pubblicato il 08/11/09 - aggiornato il  | 5 commenti :

Come modificare le dimensioni del testo nei widget (o gadget) di Blogger.

 Se si digita del testo in un articolo con l'editor di Blogger o con Windows Live Writer si può scegliere la dimensione del carattere in modo molto semplice. La scelta sarà più raffinata in WLW visto che si possono selezionare i pixel del font mentre sarà più all'ingrosso con l'Editor anche aggiornato di Blogger visto che si può scegliere solo tra le opzioni Più piccolo, Piccolo, Normale, Grande, Più Grande.

Quando si deve inserire del testo nella sidebar possiamo andare su Aggiungi un gadget > Testo o Aggiungi un gadget > HTML/Javascript. In entrambi i casi non si possono scegliere le dimensioni dei caratteri

editor-testo

ma si può inserire il grassetto, il corsivo, colorare il testo, inserire un link o una citazione. Sostanzialmente i due tipi di gadget Testo e HTML/Javascripit sono uno soltanto visto che, cliccando rispettivamente su Modifica HTML o Formato RFT, si può passare da uno all'altro.

Per inserire dimensioni diverse in uno stesso widget possiamo utilizzare il seguente codice

<p style="font-size:80%;">Testo da immettere di piccola dimensione</p>
<p style="font-size:130%;">Testo da immettere di grande dimensione</p>

Nel primo caso si avrà un rimpicciolimento del carattere, mentre nel secondo un ingrandimento. Le due percentuali 80% e 130% sono puramente indicative e possono essere sostituite da altre che riteniamo più idonee.

Nel caso in cui oltre al testo avessimo inserito anche del grassetto, del corsivo e dei link, per modificare la dimensione di una parte del testo occorre passare alla Modalità HTML cliccando in alto a destra della finestra Sezioni del sito ed inserire l'espressione font-size:xx%; dopo style=" nella parte del testo che vogliamo ridimensionare. Ecco un esempio su come potrebbe essere un widget di testo con diverse dimensioni di caratteri

gadget_testo

Ogni porzione di testo è contrassegnata dal tag iniziale che può essere <p> se si tratta di un paragrafo o <span> se invece non si salta nessuna riga. Nel momento in cui si inseriscono grassetto o corsivo viene a generarsi automaticamente l'attributo style. Per modificare le dimensioni delle singole parti di un testo è sufficiente inserire la percentuale di grandezza del font rispetto a quello di default come mostrato nello screenshot. Per concludere faccio un esempio pratico perché ovviamente questo metodo vale anche per gli articoli e non solo per le sidebar. Il codice 

<p style="font-size:80%;">Testo di piccole dimensioni</p>
<p style="font-size:100%;">Testo di medie dimensioni</p>
<p style="font-size:130%;">Testo di grandi dimensioni</p>

se incollato in Modalità HTML diventa

Testo di piccole dimensioni

Testo di medie dimensioni

Testo di grandi dimensioni



5 commenti :

  1. Scusami questo commento fuori luogo, ma devo dirlo altrimenti sto male. :) dopo un paio di prove nello scegliere la "Navbar"(barra navigazione) per il mio blog per le foto e slider, ho appena inserito una che da priore l´alevo sempre tralasciata,perché é griggio scuro, a me il grigio non piace. Ho provato tutto, quella che Poteva passare meglio era la nera ( visto che la base del mio blog é nera) quindi stavo ritornando sulla nera e lasciavo quella.Visto che io sono cocciutissima e non mi fermo mai finché non ottengo i risultati che cerco, ho cliccato lo stesso sulla griggia scura, mi son detto, " tanto la levo subito" ma non é stato cosí, ho avuto la grandissima sorpresa che proprio questa era qualla giusta, meglio non poteva essere. chi avesse il blog con lo sfondo scuro gli e la consiglio. Se vuoi dare un occhiatina clicca qui Grazie Parsifal. ora mi occupo del tuo attuale Post:)
    Un salutone
    Rosa

    RispondiElimina
  2. @Un Tocco di Rosa
    Grazie a te per la simpatica segnalazione e Buona Domenica

    RispondiElimina
  3. questo qui era quello che intendevo come barra di testo ma io vorrei creare una scritta centrata e con carattere altezza specifici. mi puoi aiutare in questo?

    RispondiElimina
    Risposte
    1. @# Prova con questo codice

      <div style="text-align:center; font-size:32px; color:#003366; font-weight:bold; font-family:Trebuchet;">TESTO DA VISUALIZZARE</div>

      dove puoi modificare i parametri della dimensione, del colore e del tipo di caratteri come vuoi.

      Elimina
    2. @# Per vedere come viene incolla il codice qui
      http://htmledit.squarefree.com/

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy