Graphic Tricks #10: Social Icons (effetto hoover e risorse)

Ciaoooo amici!!!

Oggi mi cimento in qualcosa che non ho mai fatto , ovvero parlarvi di grafica e html. Non l'ho mai fatto apertamente perchè non ne è mai capitato l'occasione sul mio Briciole, anche se spesso e volentieri mi sono sbizzaritta a usarne di diversi: inoltre ho ricevuto email da parte di altri blogger che chiedevano consigli e aiuti. Per quanto possibile, ho cercato di aiutare tutti, perchè sì, io sono una frana in queste cose, però in due anni e mezzo di blogging qualche codice utile l'ho imparato, e allora volevo condividerlo con voi :3 Lo specifico, non sono un'esperta, molte cose non so neanche che significano (non è incoraggiante, I know >-<"), ma ci sono e per come le uso io funzionano, quindi, se tutto va bene, dovrebbero funzionare anche per voi ^^

Detto ciò, andiamo!

Questo codice HTML in particolare che vi spiegherò oggi serve per avere delle Social Icons interattive, se possiamo dire così, ovvero che cambino colore al passaggio del mouse. 

Il codice originale l'ho trovato su Carrie Loves, un blog statunitense dove potete trovare trovare anche dei bellissimi set di social icons con le icone più utilizzate, disponibili in tutte le tonalità che desiderate e in formati diversi di grandezze (32px, 48px e 72px). Le potete scaricare QUI. Mi raccomando lasciate un ringraziamento o like al blog o sui suoi social, perchè l'autrice mette a disposizione delle risorse bellissime gratuitamente (e se non ci fosse io non avrei saputo come fare XD)!!!

Partiamo allora dai fondamentali. Solitamente le nostre icone sociali (ma questo vale per qualsiasi immagine che riporti a un link, come i bannerini dei nostri blog o dei giveaway) riportano alla pagina Facebook del blog, di Twitter eccetera eccetera e hanno questo codice:

<a href="LINK PAGINA" title="nome della pagina"><img alt"nome della pagina" src="URL ICONA O IMMAGINE" / /></a>

Esempio:

<a href="https://www.facebook.com/bookbloggersideeffects/" title="BBSE su Facebook"><img alt="BBSE su Facebook" src="http://imgur.com/GW8kk2R.png" / /></a> 

Per avere l'effetto interattivo al passaggio del mouse, come questo qui...

...dobbiamo per prima cosa avere a disposizione due set differenti di social icons. Ad esempio, nel mio caso ho scaricato  Radian Orchid e Warm Mint proprio da Carrie Loves.

Scegliamo quale dei due sarà l'immagine fissa e quale quella che si vedrà al passaggio del mouse - nel mio caso Radiant Orchid è l'icona fissa, Warm Mint quella che apparirà con il mouse poggiato sopra - e usando un qualsiasi sito di hosting come Imgur, Tinypic o simili, ricavate l'url dell'immagine. Ecco le mie:

Radian Orchid (Icona 1): http://imgur.com/GW8kk2R

Warm Mint (Icona 2): http://imgur.com/R3cYaTC

Attenzione! Su Imgur avrete solo il link all'immagine, ma per farla funzionare nel codice in questione, bisogna aggiungere .png alla fine dell'URL. Quindi diventeranno:

Radian Orchid (Icona 1): http://imgur.com/GW8kk2R.png

Warm Mint (Icona 2): http://imgur.com/R3cYaTC.png

Il codice HTML di base che ci serve per avere l'effetto interattivo è questo:

<a href="LINK PAGINA" title=""><img alt"nome pagina" onmouseout="this.src='URL ICONA1'" onmouseover="this.src='URL ICONA2'" src="URL ICONA1" / /></a> 

Quindi, andiamo a inserire i nostri URL:

<a href="https://www.facebook.com/bookbloggersideeffects/" title="BBSE su Facebook"><img alt="BBSE su Facebook" onmouseout="this.src='http://imgur.com/GW8kk2R.png'" onmouseover="this.src='http://imgur.com/R3cYaTC.png'" src="https://imgur.com/GW8kk2R.png" / /></a>

Abbastanza semplice, no?

Consiglio! Per centrare la nostra icona aggiungete all'inizio del codice <div align="center"
HTML</div> utilissimo anche per centrare un'immagine o del testo nei nostri post o nella sidebar.

<div align="center"><a href="https://www.facebook.com/bookbloggersideeffects/" title="BBSE su Facebook"> <img alt="BBSE su Facebook" onmouseout="this.src='http://imgur.com/GW8kk2R.png'" onmouseover="this.src='http://imgur.com/R3cYaTC.png'" src="https://imgur.com/GW8kk2R.png" / /></a></div>

Inserite il codice HTML nella vostra sidebar con il gadget Html - se siete alle prime armi potete seguire questo nostro tutorial.

Spero di essere stata chiara, insomma dovete solo fare opera di copia e incolla ;) Fatemi sapere se vi sono stata utile e se userete questo codice per rendere le vostre social icon più carine e accattivanti!!! Alla prossima (forse), 

Rosa

Graphic Tricks #9 Colorare lo sfondo di una determinata sezione del blog

Buon pomeriggio lettori!! Eccomi di ritorno con un nuovo tutorial di grafica! Mi dispiace non essere molto costante con questa rubrica (che, da quanto dicono le statistiche, vi piace parecchio), ma purtroppo non ho molto tempo per preparare i post!

GRAPHIC TRICKS

Oggi vi spiego come colorare lo sfondo di una determinata parte del blog. Avete presente la vecchia grafica di BBSE? Qualcuno mi ha chiesto come ho fatto ad inserire il pattern soltanto in alcune parti, lasciando lo sfondo bianco. Innanzitutto, come sempre, vi invito a curiosare tra i vari modelli di template offerti da blogger. Di solito alcuni permettono di colorare soltanto determinate parti, senza necessariamente intervenire con i codici html\css. Esempio? Il modello Fantastico S.p.A.

Questo non solo vi farà evitare di perdere tempo, ma anche di combinare pasticci con i codici. Dall'editor di blogger potete fare qualsiasi modifica per quanto riguarda i colori dello sfondo, mentre se volete aggiungere un pattern il discorso cambia. Il codice da inserire è sempre:

background:  url(linkdell'immagine); 

oppure, se volete semplicemente colorare, :

color: #CodiceColore;

Questo codice andrà inserito tra le parentesi graffe {} e prima delle parentesi dovrete scrivere l'elemento della sezione del vostro blog che intendete colorare. Per semplificare ho fatto un piccolo schemino con le varie sezioni del layout e i rispettivi codici. 

#navbar: barra di navigazione

.header: l'immagine di intestazione

#PageList1 \ #crosscol \ .tabs; il menu\le pagine  [potete usare uno dei tre indifferentemente]

.date-header: per colorare quella parte di template che comprende la data

.date-header span: per colorare soltanto lo sfondo della data

.post-title: lo sfondo del titolo del post

.post-footer: il piè di pagina del post (ovvero "pubblicato da", "etichette" e così via)

.post-body: lo sfondo del post

.main: per colorare lo sfondo del blog, compreso titolo (questo il codice .post-body non lo fa) e la data.

.main-outer: per colorare quella parte del blog che comprende il post e la barra laterale

.sidebar: per colorare la barra laterale

Per i singoli gadget bisognerà utilizzare un altro codice che vi spiegherò in maniera approfondita nel prossimo post.

.footer: il pie di pagina del blog (?). Insomma, inferiore. 

Quindi il vostro codice avrà questo aspetto:

.main {background: url(linkdell'immagine);}

Ricordatevi sempre:

•  del punto o dell'# prima dell'elemento che andrete a colorare
• delle parentesi graffe che aprono e chiudono il codice (metà dei problemi con i codici sono causati da graffe non chiuse, posso testimoniare U.U)
• del punto e virgola che chiude ogni determinato codice delle parentesi (l'altra metà dei problemi invece sono causati dal punto e virgola xD).

CONSIGLI: 

• per inserire un'immagine come sfondo di un elemento del vostro blog, non utilizzate le semplici immagini, ma i pattern. L'effetto finale sarà migliore. Ne trovate tantissimi su Pinterest. 
• Per trasformare le vostre immagini in link, potete usare uno dei tanti siti di hosting. Il mio preferito? Tinypic.
• Per i codici dei colori invece potete usare questo sito: Qui,
• Se lo sfondo risulta troppo vicino, che so, al titolo del blog, cambiate il padding, alias la distanza tra un elemento e l'altro del vostro blog! Il mio consiglio è di inserire sempre: padding: 10px;.

E per questo appuntamento è tutto. Spero di esservi stata utile. Per qualsiasi domanda e\o richiesta non esitate a commentare, vi risponderò al più presto c:

Buon fine settimana (e buona Pasqua!),

Giusy

Graphic Tricks #8 Rendere lo sfondo dell'intestazione trasparente

Buon pomeriggio gente c: Eccoci qui con un nuovo tutorial grafico. Sto cercando di rispondere alle domande che mi mandate attraverso il form e una di voi mi chiedeva come rendere lo sfondo dell'intestazione\header trasparente. In realtà la blogger in questione ha risolto perché ci siamo sentite tempo fa, ma dato che è una domanda che spesso mi chiedono in tanti, ho deciso di spiegarvelo, sperando che possa esservi utile.

GRAPHIC TRICKS
Rendere l'header trasparente

Prima di complicarvi la vita, accertatevi che blogger disponga di modelli di base che possiedano un header trasparente.

In effetti ce ne sono parecchi, partendo dal modello Finesta Immagine, Fantastico, Filigrana  a quello Viaggi. Questi però rispetto al modello Semplice, hanno delle particolari caratteristiche, tipo la colonna laterale grigia in quello Viaggi che per portarlo al colore bianco solo Dio sa cosa bisogna fare (fatto una volta..mai più). Quindi se volte utilizzare il modello semplice, ecco cosa dovete fare:

• cliccare su AVANZATO, SFONDO, SFONDO PRINCIPALE, TRASPARENTE
  Una volta reso trasparente il corpo del post, non vi resterà che colorare le parti del blog che vi interessano.
• AVANZATO, AGGIUNGI CSS. Dopodiché inserite il codice qui sotto.

.main-outer{
background: white;
padding-left: 50px;
padding-right: 50px;
margin-left: -50px;
margin-right: -50px;
}
.footer-outer {
background: white;
padding-left: 50px;
padding-right: 50px;
margin-top: -2px;
margin-bottom: -10px;
margin-left: -50px;
margin-right: -50px;}

Con main-outer colorate gran parte dello sfondo principale, eccetto il footer, alias la parte inferiore del blog (per intenderci quella dove troviamo scritto Powered by blogger). Quindi dovete incollare anche footer-outer, in modo da rendere tutto del colore che volete. Le misure del padding e del margin le potete cambiare in base ai vostri gusti. Vi consiglierei di fare delle prove direttamente sul vostro blog o altrimenti lasciate le misure che ho scritto, che sono quelle standard, più o meno. Nel caso in cui lo sfondo dell'intestazione non cambi, accertatevi che l'immagine utilizzata sia in formato .png. Per altre domande scrivetemi nei commenti o nel form a sinistra.

Il tutorial è terminato. Semplice, no? 

Spero di esservi stata d'aiuto.  Alla prossima!

Graphic Tricks #6 sostituire i link con un'immagine

Buon pomeriggio c:
Nella puntata di questa settimana vi spiegherò come sostituire un link delle pagine con un'immagine. Nym mi aveva detto che qualcuno di voi lo aveva richiesto e perciò eccomi qui a mostrarvi come fare. Un passaggio molto più semplice di quanto immaginiate.

Lasciate perdere i colori improponibili e concentriamoci su come fare.
Innanzitutto, avete presente il gadger pagine? Bene, scordatevelo. Se non volete complicarvi la vita, seguite il mio tutorial abbastanza semplice per sostituire i link(e non solo quelli delle pagine) con un'immagine.

<ul>
<a href="LINK"><img src="URL IMG HOME" width="200"/></a>
<a href="LINK1"><img src="URL IMG LINK1" width="200"/></a>
<a href="LINK2"><img src="URL IMG LINK2" width="200"/></a>
</ul>

Il codice da utilizzare è questo, da incollare direttamente in un gadget html (se non vi ricordate dove si trova, cliccate qui). In link i link delle vostre pagine (o altro), in url img ecc. il codice delle vostre immagini (che potete generarlo dal sito TinyPic), in width la larghezza, mentre l'altezza si modificherà automaticamente, non andando a deformare l'immagine.

Ed ecco fatto! Spero di esservi stata utile. Al prossimo tutorial c:

Graphic Tricks #5 Blockquote

Bentornati cari!
Scusate l'assenza della rubrica avvenuta giovedì scorso. La vita ha richiesto più attenzioni del solito e in questi giorni lo studio la fa da padrone.
Ma bando alle ciance! Come argomento di oggi abbiamo pensato di proporvi qualche style carino da utilizzare nei blockquote. :3
Io e Giusy ne proporremo uno ciascuno e ve lo spiegheremo passo passo... ma prima: cos'è un blockquote?

Il tag blockquote html definisce un blocco di testo come una citazione prelevata da una fonte. Possiamo fare in modo che il browser lo visualizzi in modo particolare, ad esempio spostando a destra il rientro del testo, o cambiando il font.

Per procedere con degli esempi, ecco la mia proposta. :3

Per ottenere questo stile del blockquote, come sempre basta andare in Modello Personalizza Avanzato Aggiungi CSS.
Ecco il codice necessario:

blockquote { padding: 10px 20px 10px 30px;
border: 1px solid #f8aab9;
margin: 10px 10px 10px;
font-family: Cambria;
text-align: justify;
-webkit-box-shadow: 4px -4px 0px 0px #f8aab9;
-moz-box-shadow: 4px -4px 0px 0px #f8aab9;
box-shadow: 4px -4px 0px 0px #f8aab9;
}

• In border: specifichiamo di volere un bordo solido, di spessore un pixel e dal colore il cui codice hex è #f8aab9.
• con margin: stiamo chiedendo che la distanza del blockquote rispetto a tutti gli altri elementi che lo circondano sia di 10 pixel.
• font-family: ormai dovreste saperlo! (Vedi Graphic Tricks #2)
• In text-align: specifichiamo di volere la posizione del testo giustificata. Potremmo sostituire justify con left (per l'allineamento a sinistra) o right (per l'allineamento a destra).
• Adesso box-shadow: permette di creare un'ombra attorno ad un elemento html, in questo caso il nostro tag blockquote. box-shadow: richiede cinque elementi. Vediamoli uno ad uno:
• Il primo valore (4px) definisce lo spostamento dell'ombra in senso orizzontale. Poiché il valore usato è positivo, l'ombra è collocata sul lato destro del blockquote
• Il secondo valore (-4px) definisce lo spostamento dell'ombra in senso verticale. Essendo un valore negativo, l’ombra viene collocata sul lato superiore del box.
• Il terzo valore (0px) definisce il livello di sfocatura dell’ombra. Per aumentare la sfocatura basta aumentare questo valore. Dato che noi abbiamo usato 0px abbiamo ottenuto un’ombra netta e senza alcuna sfocatura.
• Il quarto valore (0px) definisce il livello di diffusione dell'ombra Più il valore è alto, più l’ombra tenderà ad espandersi. In questo caso la nostra diffusione è nulla.
• Il quinto valore non è altro che il colore che vogliamo dare all'ombra, sempre definito tramite codice hex.
• Gli altri due elementi (-moz-box-shadow: e -webkit-box-shadow:) servono solo per estendere il supporto di box-shadow anche nei browser come Safari e Firefox. :3 

GIUSY: ecco invece la mia proposta.

Il codice che ho utilizzato:

blockquote {
background: url(http://i59.tinypic.com/242y8at.png)no-repeat;
padding: 15px;
padding-left: 50px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border: 2px solid #f8aab9;
text-transform: uppercase;
font-size: 10px;
}

• In background, come ben sapete, ho aggiunto il codice delle "virgolette" tra parentesi (per il codice io utilizzo TinyPic) e "no-repeat" per evitare che l'immagine si ripeti. Se volete aggiungere anche il colore di sfondo, aggiungete il codice hex prima di "url"; se invece volete cambiare la posizione dell'immagine, aggiungete le due dimensioni in px subito dopo no-repeat.
• In padding ho aggiunto la distanza complessiva del testo dal bordo.
• In padding-left ho invece inserito la distanza dal lato sinistro in modo che il testo non si sovrapponga con l'immagine.
• I vari border che ho inserito servono per dare l'effetto arrotondato ai bordi eccetto in quello in basso a sinistra. Se volete modificarli, ricordate che dopo border dovete inserire top o bottom, poi right o left e infine radius, che è il valore che da l'effetto arrotondato. Potete anche utilizzare border-radius per tutti e quattro gli angoli.
• border per il bordo.
• In text-transform ho inserito il valore "uppercase" che rende tutto il testo in stampatello maiuscolo. Potete sostituirlo con lowercase per avere l'effetto contrario.
• Font-size la dimensione.

E con questo è tutto! Speriamo davvero di esservi state utili c: se avete qualche domanda noi siamo sempre a vostra disposizione! Buona serata :)

Graphic Tricks #4: Modificare la grafica dei commenti

Buongiorno miei cari! :D
Oggi io è Giusy abbiamo pensato di rispondere ad una delle domande che ci avete fatto tramite il google form che trovate sulla barra laterale.
Gaia ci chiede come cambiare la grafica dei commenti sotto ai post.
Non ci resta che rimboccarci le maniche ed iniziare! Speriamo di essere le più chiare possibili. Ma come al solito, se avete dubbi siamo a vostra disposizione!

La cosa migliore è procedere con un esempio. Vi faremo vedere come sia possibile ottenere il risultato sulla destra a partire dalla grafica che trovate nell'immagine a sinistra.

Ogni commento di un utente è racchiuso in un tag html identificato dalla classe comment-block. Quindi (ricordando la nostra prima lezione) andate su →Modello →Personalizza →Avanzato →Aggiungi codice CSS e aggiungete il seguente codice.

.comments .comment-block{
}

qui dentro andremo ad inserire tutte informazioni necessarie per modificare il colore di sfondo, bordo (tipo e colore), la dimensione e il tipo di font. Ecco come ho fatto per ottenere il risultato in figura:

.comments .comment-block{
      color: #555;
      position: relative;
      margin-top: 10px;
      margin-left: 60px;
      padding: 10px;
      font-family: Courier, Cambria, Times;
      font-size: 13px;
      background: #efefde;
      border: 1px solid #c497a3;
}

Andiamo a vedere cosa fa ogni elemento:

• color: ha come argomento il colore che vogliamo utilizzare per visualizzare il testo. Io solitamente uso HTML Color Picker per trovare il codice esadecimale (#555 è detto hex color) che corrisponde al colore che ho scelto.
• position:, margin-top:, margin-left: e padding: servono per posizionare l'elemento .comment-block rispetto agli altri elementi della pagina. Vi consiglio di mantenere i valori che trovate nell'esempio. Dovrebbero andare bene per tutti.
• font-family: e font-size: ormai dovreste conoscerli. (Vedere Fonts e loro utilizzo per un ripasso).
• background: ha come un argomento un colore espresso, ancora una volta, in hex. Qui specifichiamo il colore di sfondo che vogliamo utilizzare. In questo caso è questo.
• border: permette di definire il bordo del nostro blocco commenti. Ho scelto un bordo con uno spessore di 1px, un tipo solid (che corrisponde ad una linea continua) e dal colore rosato. Per modificare lo spessore basta sostituire il numero di pixel (1px, 2px ecc...). Al posto di solid potreste aggiungere per esempio dashed o altre variati che vedremo in modo più approfondito in qualche altra puntata.

Vedete il colore grigiastro di sfondo al commento di risposta (immagine sinistra)? 

Con il solo codice che abbiamo aggiunto purtroppo resterebbe ancora. Per eliminarlo dobbiamo inserire sempre in Aggiungi CSS il seguente codice:

.comments .comment-thread.inline-thread{
     background: none; }

Adesso vediamo come modificare la grafica per le azioni Rispondi ed Elimina di ogni commento per ottenere questo risultato:

Come sempre basta aggiungere il seguente codice:

.comments .comment .comment-actions a{
     font-size: 10px;
     font-family: Courier;
     color: white;
     background: #c497a3;
     margin-right: 2px;
     padding: 2px;
     letter-spacing: 2px;
}

• margin-right: l'ho aggiunto per distanziare tra di loro di 2px i due elementi Rispondi ed Elimina.
• padding: 2px serve a specificare la distanza, in questo caso, del testo rispetto al bordo del pulsante.
• letter-spacing: serve a specificare la distanza delle lettere tra di loro.

Per finire, per ottenere un effetto fumetto potremmo aggiungere un triangolino che precede il blocco commenti e che punta all'immagine avatar! Ancora una volta andiamo in Aggiungi CSS:

.comment-thread li .comment-block:before{
     content: "\25C4";
     color: #c497a3;
     position: absolute;
     display: block;
     left: -17px;
     top: -10px;
     font-size: 28px;
}

• content: ha per argomento il codice unicode relativo al triangolo pieno che abbiamo scelto di utilizzare.
• position: e display: potete lasciarli come su.
• left: (o top:) ci serve per spostare più a sinistra o più a destra (o più in alto o più in basso) l'elemento indicato da content.
• font-size: come sempre indica la dimensione che in questo caso deve avere il triangolo
• Nota: se modificate font-size molto probabilmente dovrete modificare anche top e left per allineare correttamente il triangolo al blocco dei commenti!

Per ora è tutto! Speriamo di esservi state d'aiuto. :D

E perché no? Potreste farci vedere il vostro risultato!

Nym

Graphic Tricks #3 Modificare il titolo del post

Buon pomeriggio gente c: oggi la mia collega Nym non è presente, perciò dovrò fare tutto da sola e_e spero di non spiegarmi come un libro chiuso! 

Oggi vi spiegherò come fare per modificare il titolo di un post e vi aiuterò con alcuni trucchetti. In realtà è davvero molto semplice. Già cliccando su →Modello →Personalizza →Avanzato →Titolo post potete apportare alcune modifiche (carattere, dimensioni, grassetto\corsivo), ma con alcuni semplicissimi codici potrete raggiunge risultati molto soddisfacenti. 

Il codice base per modificare il titolo è 

.post-title { }

all'interno della parenti potrete aggiungere tutto quello che volete. Ecco alcuni esempi.

Potete aggiungere un bordo:

.post-title{

border: 2px solid black;}

2px è la misura del bordo, solid è l'effetto, black è il colore. Quest'ultimo può essere sostituito con white, red, pink (e così via) oppure con i codici dei colori (ovvero #eeeeee) mentre l'effetto potete modificarlo (nei prossimi post vi spiegheremo come fare). Potete aggiungere anche una sola linea, basta aggiungere a "border" la direzione, ovvero top=sopra, bottom=sotto, left=sinistra, right=destra. 

Quindi avrete:

.post-title {

border-bottom; 2px solid black;}

Nell'esempio che vi ho fatto, il bordo è quasi attaccato alla scritta. Come fare per mettere qualche centimetro di distanza tra i due elementi? Semplicissimo, modificando il padding!

.post-title {

border: 2px solid black;

padding: 5px;}

Se volete cambiare invece il colore dello sfondo, dovete cambiare il valore del background:

.post-title {

border: 2px solid black;

padding: 5px;

background: #ffb5c5;}

I colori che sto utilizzando sono improponibili, ma è giusto per farvi capire il risultato xD

Tornando a noi, se al posto del colore volete inserire uno sfondo, non dovete fare altro che inserire l'url dell'immagine al posto del codice del colore (il tutto tra parentesi):

.post-title {

padding: 5px;

background: url(http://i60.tinypic.com/16k9p8o.jpg); }

Stessa cosa se volete aggiungere un'icona, anche se diviene un pochetto più complicato poiché in base alle dimensioni dell'icona, dovrete modificare qualcos'altro. Nel mio caso, ho modifica il padding.

.post-title {

padding-left: 50px;

background: url(http://i62.tinypic.com/4vhlpe.gif)no-repeat;

}

Importante anche l'aggiunta di "no-repeat" per evitare che lo sfondo si ripeta.

Ultimo, ma non meno importante, come allineare il testo:

.post-title {

text-align: center;}

Il codice che ho utilizzato serve per centrare. Potete anche utilizzare right per allineare il titolo a destra.

E con questo credo di aver detto tutto ciò che riguarda il titolo. In realtà ci sarebbe tantissimo da dire, ma lo pubblicheremo presto in un altro post. 

Spero di esservi stata utile, ma soprattutto di essermi spiegata bene. Se avete qualche domanda, fate pure. Vi risponderò con piacere! Abbiamo inserito anche un form (alla vostra destra) dove potrete chiedere tutto quello che volete! A presto ^_^

Graphic Tricks #2: Fonts

Buongiorno lettori! Oggi è giovedì, e sapete cosa significa? Che è giunto il momento di un'altro appuntamento con Graphic Tricks, rubrica in cui io e Giusy cercheremo di aiutarvi a svelare i misteri che si celano dietro i codici html!

Non sapevamo bene su cosa incetrare l'appuntamento di oggi. Ci sono così tanti argomenti di cui potremmo parlare! Ma alla fine abbiamo pensato che la cosa migliore da fare sia procedere per piccoli passi, per questo la scelta è ricaduta sui google fonts e su come poterli utilizzare per modificare l'aspetto dei titoli dei post.

Pronti? Iniziamo!

Google, mette a disposizione alcuni font già caricanti sulla piattaforma blogger. Per poterli utilizzare come font del titolo dei nostri post basta seguire questi passaggi: →Modello →Personalizza →Avanzato →Titolo post.

Tuttavia Google da comunque la possibilità di aggiungere nuovi font a secondo dei nostri gusti ed esigenze!
La scelta è abbastanza ampia e si trova a questo indirizzo: http://www.google.com/fonts

Vediamo adesso come prelevare i font che abbiamo scelto di utilizzare.
Per esempio, scorrendo la lista ho notato i font Sigmar One e Kaushan Script. Li ho così aggiunti alla collezione cliccando sul pulsante Add to Collection accanto ad ogni preview dei font.
Adesso sono entrambi elencati in basso alla pagina, in Collection.

Una volta terminata la nostra scelta di font da utilizzare (ricordate, è buona norma non strafare troppo. Scegliete non più di due font perché il caricamento della pagina web del vostro blog potrebbe risentirne), clicchiamo sul terzo pulsante, Use, che si trova in basso a destra.

Scorriamo la pagina che sia apre, fino ad arrivare a 3. Add this code to your website. Qui possiamo prelevare il codice html che ci permetterà di usufruire dei font che abbia scelto. Nel mio caso il codice html è:

<link href='http://fonts.googleapis.com/css?family=Sigmar+One|Kaushan+Script' rel='stylesheet' type='text/css' />

Notate bene: vedete la parentesi a cuspide di chiusura del tag link (la parte colorata in rosso)? Lo slash che la precede l'ho aggiunto io. Serve a dire al brower che il tag link è stato chiuso. È necessario chiudere in questo modo il tag link se non si vuole incorrere in errori. 

Questo codice va direttamente inserito nel templete del nostro blog. Ricordando la puntata precedente di Graphic Tricks, i passaggi da seguire sono: Modello→Modifica html.

Si apre una pagina che permette di editare il templete del nostro blog.

Andiamo alla ricerca del tag <head> premendo ctrl+F. 

Una volta trovato, inseriamo sotto il tag <head> il codice html fornitoci da google font e salviamo il modello.

Adesso potremo utilizzare i nostri nuovi font dovunque vogliamo!

Se lo volessimo utilizzare come font dei titoli dei nostri post? Semplice!

Andiamo su →Modello →Personalizza →Avanzato →Aggiungi CSS, e scriviamo il seguente codice di stile.

h3.post-title{
     font-family: 'Kaushan Script', Times;
     font-size: 30px;
}

Con font-family: indichiamo quale famiglia di font utilizzare. Ci sono due cose da tenere a mente:

1. Se il nome di un font è composto da più di una parola, è necessario racchiuderlo tra apici singoli: 'Nome Font'.
2. Possiamo aggiungere più di una preferenza. Nel caso in cui, per esempio, non fosse possibile visualizzare il font Kaushan Script, il browser utilizzerà la seconda preferenza indicata (in questo caso il font Times).

Con font-size: indichiamo la dimensione con cui vogliamo che il font venga visualizzato. Io l'ho impostata a 30px ma naturalmente potete modificare a vostro piacimento! :D

Per oggi è tutto! Se avete bisogno di chiarimenti siamo a vostra disposizione. ;D
Nym and Giusy

Graphic Tricks #1: Introduzione codici html e css

Nym: *si schiarisce la voce* Buongiorno guys! Oggi si parte con il primo di, speriamo tanti, appuntamenti con Graphic Tricks. Di che si tratta? Io e Giusy vi aiuteremo a scoprire tutti quei piccoli trucchi con i codici html e i fogli di stile che renderanno ancora più delizioso e accattivante il vostro angolino virtuale!

Giusy: Ciao a tutti! Per questo primo post\tutorial non sapevamo bene da dove partire, però poi abbiamo pensato: perché non dalle basi? Quello che stiamo per spiegarvi per alcuni magari sarà una sciocchezza mentre potrebbe essere molto utile per altri (si spera lol).

Introduzione codici html e css

L’html è un linguaggio di markup, ma non spaventatevi per questa parola sconosciuta! Si tratta infatti di un linguaggio che racchiude in se (tramite quelli noti come tag) tutte le informazioni che il nostri brower interpretano per visualizzare le pagine web!

Ma l'html da solo però non basta per rendere visivamente piacevole una pagina web.

L'html ci aiuta a creare un elenco puntato per esempio, ma non dice di che colore debbano essere le lettere o la forma dei punti della lista. Per questo l'html si avvale dell'aiuto del css, ovvero dei fogli di stile, per rendere così più visivamente accattivante il nostro contenuto web!

Es. codice html

<a href="link"> testo </a>

Questo è un perfetto esempio di codice html. Quindi quando vi trovate davanti un codice del genere, tutto virgolette, slash e parole messe a caso, sapete che si tratta di un codice html.

Es. codice css

.a { background: white;}

Un codice css si presenta così: il punto oppure "#" prima dell'elemento che andrete a modificare (in questo caso "a" che sta per link) e poi dentro le parentesi graffe il codice che apporterà delle modifiche nel vostro blog.

Ma dove utilizzare l'html e dove il css? Per fortuna blogger rende abbastanza semplice l'utilizzo di entrambi. Per utilizzare il codice html ci basterà utilizzare l'editor che blogger ci mette a disposizione per creare i post.

Oppure in →Layout →Aggiungi Gadget →HTML/Javascript.

Per il css bisogna fare qualche passaggio in più. Bisogna infatti andare su →Modello →Personalizza →Avanzato  →Aggiungi codice CSS.

Giusy: E il primo post si conclude qui. Speriamo davvero che sia stato illuminante xD

Il prossimo tutorial invece lo scegliete voi! Davvero ragazzi, non non sappiamo da dove iniziare, dateci una mano! Alla prossima. 

Nym and Giusy