Pubblicato il 14/06/09 - aggiornato il  | 11 commenti :

Come ingrandire la prima lettera di un articolo in un blog sulla piattaforma blogger.

Se siete stati, come credo, nei siti di qualche edizione online dei quotidiani vi sarete certamente accorti che la grafica è decisamente più sofisticata di quella di un normale blog. Una cosa che può dare un tocco di originalità è la prima lettera dell’articolo più grande delle altre. Ecco un esempio

blog supporto

tratto dal mio blog di supporto. Se volete anche voi inserire questa originale impostazione grafica potete operare in due differenti modi.

Il primo consiste nell’inserire manualmente il codice necessario intorno alla prima lettera del post (nel caso preso in esame una Esse) mentre il secondo, molto più semplice, si basa nell’introduzione dell’apposito stile nel modello.

Primo caso – Cercate quale sia il colore del testo nel vostro blog andando su Layout > Caratteri e colori e copiate il codice esadecimale. Nel caso preso in esame il colore del testo era #333333. Dopo aver scritto l’articolo andate in modalità HTML e inserite il codice seguente intorno alla prima lettera dell’articolo

<span style="float:left;color:#333333;font-size:72px;
line-height:40px;padding-top:2px;font-family: Times, serif, Georgia;">S</span>

Ecco un altro esempio con la lettera D

image

ed ecco cosa si vede passando alla modalità Scrivi e cosa si vedrebbe pubblicando il post

maiuscola

I dati in rosso possono essere personalizzati come si crede e rappresentano rispettivamente

  1. Il colore della prima lettera del testo che può essere scelto anche diverso da tutto il resto
  2. La dimensione in pixel del carattere iniziale, in questo caso 72 ma si può scegliere anche 100
  3. L’altezza del carattere. Ho scelto 40 ma si può adattare quest’altezza come si vuole per ottenere il miglior risultato dal punto di vista estetico

Secondo caso -  Andare su Layout > Modifica HTML e pigiando su F3 trovare questo blocco di codice o uno analogo

body {
  margin-top:0px;
  margin-$endSide:0px;
  margin-bottom:0px;
  margin-$startSide:0px;
  font-size: small;
  background-color: $mainBgColor;
  color: $mainTextColor;
}

Immediatamente sopra inserite il seguente codice

dropcap {
float:left;
color: #333333;
font-size:72px;
line-height:40px;
padding-top:2px;
font-family: Times, serif, Georgia;
}

Come mostrato nello screenshot 

image

Adesso salvate il modello. Come detto nel primo caso i dati in rosso possono essere personalizzati.

Adesso se scriverete un articolo questo sarà pubblicato normalmente come prima di queste modifiche. Nel caso in cui vogliate attivare la Prima Maiuscola Gigantesca, dopo aver scritto il post, dovete entrare in Modalità HTML e racchiudere la prima lettera dell’articolo, in questo caso una S, tra questo semplice codice

<span class="dropcap">S</span>

All’atto della pubblicazione avrete un effetto identico a quello di questo articolo.



11 commenti :

  1. Bella questa Ernesto!!!
    ...anche se devo ammettere che l'ho letta sul libro di HTML (come altre "chicche"), ma, non ho il tempo (anche la voglia...) per poterle sperimentare!!!

    La proverò sicuramente, anche se, già perdo (ormai) più tempo a "confezionare" l'articolo con colori e altre piccole cose (dopotutto sono la mia "firma"...tratto un argomento deprimente, figuriamoci se non dovessi rendere la lettura più piacevole!!!) che non a scriverlo e rileggerlo/correggerlo!!!

    Comunque lo proverò di sicuro!!!

    PS: non è che ci sia un plug-in per WLW che faccia questo in automatico? (o limitando al minimo le operazioni HTML?).

    Ciao, grazie

    RispondiElimina
  2. I plug-in per WLW sono molti e sinceramente non li ho controllati tutti. Può essere che ci sia :-)

    RispondiElimina
  3. Ciao, prima di tutto ti ringrazio di cuore. Ti vorrei chiedere di dare un occhiata al mio blog per controllarlo, ma di sicuro non hai tempo e non oserei pretenderlo. In ogni caso il mio blog è questo:
    http://alltriviumvideos.blogspot.com/
    Veramente grazie di cuore per tutti i consigli geniali e utili!
    Ora ti devo però chiedere una cosa riguardante questo suggerimento. Allora io sono andato su design (equivalente a layout giusto?) poi Modifica HTML e ho schiacciato su F3, ma non viene fuori la finestra che dici tu, ma un'altra piccola finestrella di ricerca in alto a destra.
    Come faccio?
    grazie mille ancora

    RispondiElimina
  4. @corvomichele
    Il tuo blog è carino, in stile dark ma originale. Quando clicchi su F3, nella finestrella che si apre, devi incollare la parte del codice che cerchi nel modello per esempio
    body {
    automaticamente visualizzerai la zona del template in cui è presente. Se ci sono più occorrenze, verranno mostrate e cliccherai su Successivo per visualizzarle tutte.
    Serve per trovare immediatamente quello che si cerca invece di perderci gli occhi ^_^

    RispondiElimina
  5. Caro Ernesto, ho trovato interessante il tuo post relativo all'inserimento della lettera grande di inizio post. La trovo super però ho notato che su altri pc, a prescindere dal browser, la lettera grande risulta storpiata, non definita o più piccola rispetto a come la visualizzo io. Posso fare qualcosa? Ti chiedo anche....come posso centrare il titolo dei post?
    Grazie infinite e complimenti.

    Enzo

    RispondiElimina
  6. @Enzo
    Quello dei browser che visualizzano in modo diverso è purtroppo una costante. Specialmente con IE non si è mai sicuri di nulla.
    Non mi sono mai posto il problema di centrare il titolo del post. Non dovrebbe essere difficile si potrebbe inserire due tag < center > e < /center> nella riga di codice che lo individua ma dipende dal modello.
    Se trovo qualcosa che possa essere generalizzato lo pubblico.
    Ciao

    RispondiElimina
  7. ciao,
    come vedi dalle mille domande che ti pongo,sto utilizzando a man bassa i tuoi consigli per il mio piccolo blog.
    volevo chiederti anche questa parte di codice può essere personalizzata, immagino "font-family: Times, serif, Georgia; ", giusto?
    perchè nel mio blog io uso il verdana e, seppur non conoscendone l'effetto, non vorrei modificare lo stile.
    ps: ti pongo un'altra domanda:
    in alcune commenti ho dimenticato di spuntare l'avviso mail in caso di risposta; come faccio a trovare i post in cui sono intervenuto?
    il "cerca" non mi trova e se clicco sul mio nome nell'apposita label cloud mi apre la mia...identità.

    RispondiElimina
  8. @Davide Morante
    Puoi usare anche altre font family. Per conoscere le risposte puoi abbonarti ai feed RSS dei commenti
    http://www.ideepercomputeredinternet.com/feeds/comments/default
    In genere ad ogni risposta antepongo il nome di chi ha fatto la domanda

    RispondiElimina
  9. ... grandioso!!!
    .....c'è un codice per avere la prima lettera del titolo post di dimensioni diverse e soprattutto di colore diverso?

    Ciao
    CSJ

    RispondiElimina
    Risposte
    1. @ CSJ
      Il codice del titolo del post inizia così
      h3.post-title {
      basta applicare a questo blocco di codice i principi enunciati nell'articolo.

      Elimina
  10. ...ho provato; niente da fare, non funziona!!!

    CSJ

    RispondiElimina

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