BLOG PENNA CALAMAIO®

Come realizzare un box per le citazioni all'interno dei nostri post.

bbiamo visto nel post precedente come inserire un capolettera all'interno del nostro testo, in modo che la prima lettera del post sia evidenziata con un carattere diverso ed eventualmente con uno sfondo, ma comunque si estenda in altezza su diverse righe del post. Vediamo ora di aggiungere una ulteriore personalizzazione ai nostri post, per le ipotesi in cui dobbiamo fare una citazione, oppure per quando  vogliamo  evidenziare una frase all'interno del testo. Mi riferisco al cd. "quote" che compare ad es. di default nei blog di blogger. Non avendo accesso al foglio di stile dei nostri template, noi, a differenza dei blogger di altre piattaforme, non possiamo rendere automatico nè l'inserimento del capolettera nè la formattazione specifica per le citazioni. Dovremo di volta in volta agire manualmente inserendo il relativo codice nell'editor del post. E' comunque possibile ottenere nei nostri post lo stesso effetto dei blog di Blogger. Vediamo cosa possiamo ottenere e poi andremo ad esaminare le modifiche da apportare al codice e come inserirlo nei nostri post.

Poniamo il caso che questa sia una citazione. L'ho inserita in un box con il bordo colorato e tratteggiato. Trattandosi di una citazione è buona norma che il carattere sia formattato in corsivo e che il testo sia racchiuso tra virgolette. Le virgolette sono delle semplici immagini, che vi darò il modo di salvare insegnandovi anche a modificarne il colore per adattarle al vostro blog. Il testo potete formattarlo a vostro piacimento tramite l'editor, cambiando dimensioni e colore ed eventualmente inserendo il grassetto.

 Possiamo modificare ovviamente il colore del bordo ma soprattutto possiamo applicare al bordo un diverso stile assegnando degli attributi al tag border-style.

Se infatti per il primo box io ho utilizzato all'interno del codice l'attributo "dashed" che identifica il bordo tratteggiato,  in questo secondo esempio ho utilizzato l'attributo  "solid" per ottenere un bordo con la linea continua.

Gli stili da attribuire al tag border sono infatti diversi. Li qualifico e ve ne mostro il terzo lasciando  a voi il compito di testare anche gli altri, fermo restando che alcuni di essi non sono compatibili con tutti i browser e quindi potreste non riuscire a visualizzarli.

dashed è l'attributo che identifica  il bordo tratteggiato,
solid è l'attributo che identifica il bordo a linea continua,
dotted è l'attributo che identifica il bordo a puntini,
double è l'attributo che identifica un bordo a linea doppia,
seguono poi degli attributi per bordi tridimensionali, ovvero: groove, ridge, inset, outset.

Vi mostro allora l'effetto grafico del box destinato alle citazioni se applico al tag border-style l'attributo dotted. Potete notare che il bordo del box non è più costituito da una linea continua bensì da una sequenza di puntini.

Come fare per riprodurre questi effetti nel vostro post?
E' molto semplice.
In primo luogo dovete adattare il colore delle virgolette ai colori del vostro blog.  Dal mio blog, posizionatevi con il mouse sulle immagini delle virgolette. Poi cliccate il tasto destro del mouse e scegliete l'opzione "salva immagine con nome".
Una volta salvate le immagini, cambierete loro il colore con il vostro programma di grafica e le caricherete sul vostro spazio web o ad es. su imageshack, perchè a ciascuna delle due immagini corrisponda un indirizzo web.

Se non avete un programma di grafica recatevi a questo indirizzo

http://www.lunapic.com/editor/
cliccate il tasto "sfoglia", individuate l'immagine delle virgolette nel vostro computer e poi cliccate il tasto "Upload Now!" Quando l'immagine si sarà caricata cliccate sul menù "Draw" e scegliete "Paint Bucket Tool". Attraverso il tasto "Pick" potete scegliere il colore da attribuire alle virgolette. Una volta scelto il colore dovete cliccare con il cursore del mouse la prima virgola in corrispondenza del colore da modificare. Poi la seconda. A questo punto attraverso la scritta "Save To" scegliete dove salvare l'immagine. Se la salverete su imageshack avrete già un indirizzo corrispondente alla vostra immagine. Ripetete l'operazione per l'immagine delle virgolette chiuse. Fatto? Ora siete pronti a personalizzare il vostro post con il codice della citazione.

Cominciate a scrivere regolarmente il vostro post. Quando è giunto il momento di inserire la citazione, cliccate il solito link dell'editor "visualizza html" ed aggiungete il codice che trovate qui dopo aver applicato le vostre personalizzazioni e, come per magia, nel vostro post apparirà il box che evidenzia le citazioni!

Nel prossimo post, per chi ancora non lo sapesse, vi spiegherò come inserire un player audio nei nostri blog senza ricorrere ai video di you tube o di Libero Video lanciati in auto-play. Per oggi mi fermo qui ed aspetto di vedervi all'opera.

Ciao a tutti da