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

Ciao lettori!

Vi avevo già anticipato come sarebbe stato questo post e sono felice di avere avuto un buon riscontro su Facebook! Il post di oggi riguarderà i gadget del blog e della possibilità di personalizzarli a nostro piacimento. Spesso nella grafica si possono fare solo determinate modifiche ma grazie ai codici HTML e un po di creatività si riesce a creare qualcosa di bello e in linea con la grafica del blog. Prima di iniziare vi lascio i link con i precedenti appuntamenti sul blog:

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
6 Modificare il testo dei post

Andate su:

1) Tema

2) Personalizza

3) Avanzato

4)Aggiungi CSS

Nel quadro bisogna aggiungere i codici. Allora, esistono due codici, uno che modifica il titolo del gadget e uno che modifica il contenuto. Per avere il codice bisogna aprire un'altra pagina e andare su Layout. Cliccate su un gadget e copiate solo la parte finale come nell'esempio (cliccate). In questo caso era un gadget HTML creato da me, in altri come i Lettori fissi la parte finale non avrà la scritta HTML ma Followers1, voi dovete copiare cosa sta dopo "=" per intenderci al meglio. Una volta che l'avrete copiato, torniamo su Aggiungi CSS e scriviamo questo (sfrutto l'esempio in foto):

#HTML5 { codici html } MODIFICA IL CONTENUTO DEL GADGET
#HTML5 h2 { codici html } MODIFICA IL TITOLO DEL GADGET

Cosa mettere al posto di codici html? 

I codici che si possono utilizzare sono i seguenti (quelli che uso spesso io):
- background-color: #colore; MODIFICA IL COLORE DI SFONDO
- background-image: url('URLSFONDO'); MODIFICA LO SFONDO MA IN QUESTO CASO POSSIAMO METTERE UNA IMMAGINE A NOSTRO PIACIMENTO
- border: 0px solid #colore; MODIFICA IL BORDO DEL GADGET, CI SONO VARI TIPI DI BORDI:

dotted bordo a puntini
dashed bordo a lineette
solid bordo solido e continuo
double bordo solido, continuo e doppio
groove tipo di bordo in rilievo
ridge altro tipo di bordo in rilievo
inset effetto ‘incastonato’
outset effetto ‘sbalzato’

- border-radius: 0px; SERVE PER ARROTONDARE I BORDI DEI GADGET. PIU' AUMENTATE I PIXEL E PIU' SI ARROTONDA.
- font-family: NOMEFONT; MODIFICA IL CARATTERE DEL TESTO (IN QUESTO LINK C'E' UN TUTORIAL SU COME INSERIRNE UNO DIVERSO DA QUELLI PREIMPOSTATI)
- text-align: left/center/right/justify; MODIFICA LA POSIZIONE DEL TESTO
- text-transform: uppercase; TESTO IN MAIUSCOLO
- font-weight: bold; TESTO IN GRASSETTO
- font-weight: italic; TESTO IN CORSIVO
- text-shadow: 0px 0 px 0px #colore; MODIFICA L'OMBREGGIATURA DEL TESTO (TROVATE QUI IL TUTORIAL)
- font-size: 0px; INDICA LA DIMENSIONE DEL TESTO
- line-height: 0px; INDICA LA DISTANZA TRA UN PARAGRAFO E L'ALTRO. DA USARE NEL CONTENUTO DEL GADGET;
- color: #colore; INDICA IL COLORE DEL TESTO
- text-decoration: underline; TESTO SOTTOLINEATO

Ovviamente non c'è da modificare un singolo gadget nel proprio blog ma tutti quelli che abbiamo al lato o ai lati della nostra grafica se si hanno tre colonne. Per aggiungere gli altri gadget è semplicissimo, basterà ritornare a Layout, cliccare su un gadget, copiare la parte finale dell'URL dopo "=" e fare così (io prendo in esempio il gadget dei Lettori Fissi):

#HTML5, Followers1 { codici html }
#HTML5 h2, Followers1 h2 { codici html }

Da notare che ogni gadget si separa aggiungendo una virgola mentre prima della parentesi graffa non serve. Se invece volete farli diversi, basterà fare così:

#HTML5 { codici html }

Followers1 h2 { codici html }

#HTML5 { codici html }

Followers1 h2 { codici html }

Devono stare tutti separati se si vuole che si personalizzano individualmente, se invece volete che si applica tutto uguale fate come sopra.

Il tutorial è concluso. Se avete dubbi, scrivetemi pure qui sotto. Vi ricordo che mentre provate la vostra combinazione di codici da usare sotto ci sta l'anteprima così che possiate vedere come i codici si potrebbe applicare ai vostri gadget.