#4 Blog codes - I codici utili per migliorare il nostro blog!

Era da tantissimo tempo che avevo in mente di fare un altro post di consigli e codici per il blog ma non avevo mai avuto il tempo per farlo e quindi dato che molte di voi non capiscono molto i codici HTML e preferiscono cambiare personalmente il proprio layout non potevo evitare di continuare a pubblicare post in questa rubrica. Subito sotto vi lascio alle cose che ho già precedentemente affrontato sul blog se vi siete aggiunti di recente e ve li siete persi:

1 Gadget per inserire le ultime recensioni a lato con le cover che scorrono
2 Come inserire l'ombreggiatura al testo
3 Eliminare i bordi alle immagini
4 Usare font diversi da quelli preimpostati
5 Inserire una firma animata alla fine dei post

Come si modifica il testo?

Una delle prime cose che si deve imparare quando si apre un blog è saper modificare il testo. Per chi non ha dimestichezza spesso si arrende e abbandona il blog creato. Questa guida nasce per chi vorrebbe un blog personalizzato senza dover chiedere aiuto. Non bisogna sapere tutto ma le nozioni base sono essenziali per sapersi arrangiare da soli

Bisogna fare una distinzione per quanto riguarda la modifica del testo nei post e nel layout del blog. Per quanto riguarda i post per modificare il testo bisogna andare nella parte HTML:

Di solito per fare delle modifiche non serve andare nell'HTML ma in questa barra troviamo già quello che ci serve. Il fatto è che è limitato in fatto di colori del testo o sfondo, caratteri o grandezza del font. Se non dovete fare delle grandi modifiche la barra qui sopra è l'ideale, basterà selezionare la parte interessata di testo e cliccare sul bottone che ci interessa. E' molto intuitiva e non credo ci sia bisogno di spiegazioni. Un discorso a parte è se volete impostare i vostri post in maniera più ordinata e personalizzata, in questo caso la barra qui sopra vi limita e dovete per forza passare all'HTML. Diversamente è se vogliamo modificare il layout del blog in particolare l'header, il titolo dei post, il titolo dei gadget o il menù. Ma affronteremo il tutto nel prossimo appuntamento.

MODIFICHIAMO IL TESTO DEI POST.

Come detto sopra per modificare il testo bisogna andare nella parte HTML. Per modificare lo stile del testo mi serve un tag come lo SPAN o il DIV che da il comando di applicare lo stile alle parole. Avendo imparato da sola l'utlizzo dei codici vi spiegherò ciò che so in maniera semplice e senza usare grossi paraloni.
Il DIV si usa per interi blocchi di testo, potreste tranquillamente usarlo per tutto il post così che i comandi che date al suo interno si applicheranno a tutto ciò che scrivete. Il DIV influenza anche la sua posizione. Quando infatti spostate il vostro testo da sinistra a giutificato usando la semplice barra (immagine più sopra) è il DIV il codice che vi apparirà se andrete a controllare.
Lo SPAN agisce esclusivamente sullo stile delle parole. Non influenza la posizione ma solo le parole contenute al suo interno. Per questo se all'interno dello SPAN cercate di dare il comando di spostare una frase al centro non funzionerà in quanto il suo unico scopo è di dare lo stile.
Vediamo quindi per prima lo SPAN:

<span style="codicecodicecodice">testotestotesto</span>

All'interno della dicitura codice andranno inseriti i vari codici che servono per modificare un determinato elemento. Vediamo quindi insieme quelli più famosi ed utilizzati:

- font-size: 00px;  <- sta ad indicare la grandezza del testo. Di solito si parte dai 12px fino ad andare in su, vedete voi dall'anteprima e a cosa vi serve nello specifico se aumentare o diminuirne.

- font-family: nomefont;  <- sta ad indicare il carattere del testo. Al posto di nome font inserite quelli preimpostati come arial, georgia o times oppure seguite la guida per usarne di differenti.

- color: #000;  <- sta ad indicare il colore del testo. Al posto di 000 (che è il colore nero) potete scegliere tutti i colori che volete da questo sito.

- font-weight: bold;  <- testo in grassetto.

- font-weight: italic;  <- testo in corsivo.

- text-decoration: underline;  <- testo sottolineato

- background-color: #000;  <- è lo sfondo. I colori potete sceglierli tramite il link usato nel colore del testo.

Ora passiamo al DIV e questo è il codice che lo riguarda:

<div style="codicecodicecodice">testotestotesto</div>

Potete usare gli stessi codici qui sopra ma c'è solo una cosa che potete modificare esclusivamente qui ed è come posizionare il testo:

- text-align: center/left/right/justify;  <- sposterà il testo dove volete voi. Il primo lo metterà centrato, poi destra, sinistra e infine giustificato. Utilizzate quello che vi serve e poi cancellate il resto insieme a gli slash.
- line-height: 00px;  <-partendo dal presupposto che il DIV modifica i blocchi di testo è l'unico che può modificare lo spazio tra una riga e l'altra. Potete accorciare o diminuire l'interlinea a vostro piacimento.
Importante= Il DIV si usa anche per spostare immagini, gif, video da youtube:
<div style="text-align: center;"><img border="0" height="000" src="URLIMMAGINE" width="000" /></div>
- height="000"  <- è l'altezza dell'immagine
-  width="000"  <- è la larghezza dell'immagine
Potete dargli le misure che desiderate oppure se volete che l'immagine abbia quella originale basta eliminarle dal codice.

Per farvi capire meglio la distinzione tra DIV e SPAN farò due esempi differenti:

1) Con lo span:
Oggi si consiglia...
<span style="background-color: #000; color: #FFF;  font-family: courier; font-size: 22px; text-decoration: underline;">Oggi si consiglia...</span>

2) Con il div:

Mi chiamo Jessica e come molti di voi ho la passione per la lettura. Ho deciso di aprire questo angolino come valvola di sfogo in cui posso parlare di ciò che mi piace realmente. Leggo specialmente: paranormal fantasy, distopia, urban fantasy, romanzi storici, young adult e new adult. Ho anche una sviscerale passione per le serie tv e spero che condividerò con voi.

<div style="background-color: #000; color: #FFF; font-family: courier; font-size: 22px; text-align: center; text-decoration: underline;">
Mi chiamo Jessica e come molti di voi ho la passione per la lettura. Ho deciso di aprire questo angolino come valvola di sfogo in cui posso parlare di ciò che mi piace realmente. Leggo specialmente: paranormal fantasy, distopia, urban fantasy, romanzi storici, young adult e new adult. Ho anche una sviscerale passione per le serie tv e spero che condividerò con voi.</div>

Vetete la differenza? Con lo SPAN il codice ha preso solamente il testo mentre con il DIV tutto il paragrafo. Per questo affermo che si usano in due modi diversi. Potete usarli insieme come nel caso di mettere il primo esempio al centro della pagina:

Oggi si consiglia...

<div style="text-align: center;"><span style="background-color: black; color: white; font-family: &quot;arial&quot;; font-size: 22px; text-decoration: underline;">Oggi si consiglia...</span></div>

Ora vediamo insieme come inserirli nei post. Innanzitutto creiamo un nuovo post  e iniziamo a scrivere:

Una volta scritta una intro andate come sopra nell'HTML e sarete nel retrobottega del post.

Ora che siamo qui ho intenzione di scrivere il titolo di un libro e la sua trama, seguendo i consigli qui sopra dovrei fare qualcosa di questo tipo:

Cliccate sull'immagine per ingrandire e vedere meglio. Come vedete dall'esempio ho usato lo SPAN nel titolo del libro e il DIV nella trama dando due stili differenti. Il <br/> altro non è che lo spazio che serve per andare a capo. State certi che quando modificherete la parte HTML ne userete molti. Per fare un doppio spazio dovete usarne uno sotto l'altro. Per vedere come è venuto, vediamo l'anteprima:

Ecco qui il risultato di ciò che ho fatto! Però non so, non mi piace lo sfondo al titolo del libro e ho deciso di renderlo trasparente e mettere l'ombreggiatura. Seguendo quindi la guida dove vi ho spiegato come fare (clicca qui), cancelliamo lo sfondo e inseriamo il codice inerente:

Vediamo adesso il risultato dall'anteprima:

Devo dire che così mi piace di più ma ora voglio mettere un carattere del testo differente, quindi perché non ne scelgo uno di quelli scaricati da google font? In questa guida che ho prontamente modificato inserendovi delle immagini, vi ho spiegato come fare per inserire nell'HTML font diversi per poterli utilizzare nel blog e al suo interno. Siccome non mi ricordo mai i nomi dei font vado su Modello, poi Modifica html e subito mi compare il codice che cerco. Scelgo Princess Sofia quindi uso il comando font family all'interno dello SPAN:

Vediamo quindi il risultato:

Ho aumentato la grandezza del testo perchè non si leggeva. Ora decisamente il nome del libro mi piace ma vorrei mettere la parola trama con un altro colore, font e carattere, come fare? Semplice. All'interno del DIV posso tranquillamente usare lo SPAN per modificare una semplice parola come in esempio:

Vediamo ora l'anteprima:

Perfetto, adesso mi piace tantissimo, mi manca solo la cover del libro, come metterla? Io ho il mio trucchetto semplice semplice. Una volta concluso la parte dell'html torno dall'altra parte e mi posiziono prima della parola trama. Adesso clicco sull'icona dell'immagine nella barra e inserisco l'url. Con l'immagine compare una barra (ma può comparire anche cliccando sull'immagine) e spostiamo a sinistra o destra, ecco il risultato:

Ecco qui il risultato finale, non è bellissimo?! A me piace molto! Ora per tornare dall'altra parte e scrivere andate a capo, mettete un <br/> iniziate a scrivere due o tre parole e poi tornare in Scrivi e proseguite.
E POI...
Se usate il DIV per un blocco di testo e al suo interno volete modificare una frase dando un colore e un carattere del testo diverso potete usare al suo interno lo SPAN. Questo infatti modificherà esclusicamente il testo racchiuso nel codice senza influenzarne il resto.
Attenzione: Quando modificate il carattere del testo con lo SPAN il codice che lo compone prenderà una forma diversa funzionando comunque. Non so perché faccia così da mesi a questa parte, ma l'importante è che funzioni. Altra precisazione, quando usate uno dei font scaricati da google font e dall'HTML tornate alla pagina iniziale non vi apparirà la modifica non vi preoccupare perché invece nell'anteprima ve lo  darà eccome.

E questo è tutto, credo di avervi spiegato tutto ciò che c'è da sapere sulla modifica del testo all'interno dei post. Se avete dei dubbi potete scrivere qui sotto e chiedermi tutto quello che volete. Solo una cosa chiedo da voi in cambio, ho perso tempo per farvi questa guida lunga e dettagliata con immagini annesse, non fatemi pentire copiandola sul vostro blog e spacciandola per vostra non sarebbe rispettoso nei miei confronti. Il prossimo appuntamento riguarderà invece la modifica del testo nel layout del blog che spero di fare al più presto, tanto il lavoro grosso è stato questo!