17 dicembre 2009

42 commenti

Buone Feste!!!

Buone Feste
© Foto by raspberrytart

Newsletter by follow.it


11 dicembre 2009

13 commenti

Come aggiungere una tags cloud in Blogger

Tempo fa ho pubblicato il post Tags cloud per Blogger con le istruzioni da seguire per inserire nel proprio blog una nuvola di tags.

Intervenendo sul css del template ed aggiungendo una funzione javascript, le etichette non erano più rappresentate con il classico elenco che Blogger mette a disposizione, ma sotto forma di nuvola.

Ora questa opzione è disponibile in Blogger: basta aggiungere nel blog il widget Etichette senza dover mettere mano al template o inserire funzioni javascript.

Vediamo insieme i semplici passi per aggiungere al nostro blog una tags cloud.
Andate in Blogger -> Layout -> Elementi pagina e cliccate su Aggiungi un gadget della sidebar. Selezionate poi il widget Etichette:


Nel popup di configurazione andiamo a specificare le impostazioni del widget, ossia:

  • Titolo: Etichette, Tags, Ricette, ...
  • Mostra: possiamo far visualizzare tutte le etichette presenti nel blog o selezionarne solo alcune
  • Ordinamento: possiamo scegliere se visualizzare le etichette in ordine alfabetico o per frequenza (cioè in base al numero di post)
  • Visualizzazione: per visualizzare il classico elenco o la nuvola di etichette
  • Inoltre possiamo scegliere se mostrare o meno il numero di post per ogni etichetta.


Infine basta salvare e nel blog avremo una tags cloud!

Newsletter by follow.it


9 dicembre 2009

60 commenti

Come personalizzare la favicon del blog

Dopo numerose richieste su come personalizzare la favicon del blog, in particolare come aggiungerne una animata, ecco il post con tutte le istruzioni.

Innanzitutto cos'è la favicon?

Per tutti i blog su Blogger, di default la favicon è rappresentata da un'immagine arancione con una B bianca (questa per intenderci) che compare nella barra degli indirizzi e nel tab del browser:


Per personalizzare la favicon possiamo utilizzare un'immagine di tipo ico o png; per averne una animata dobbiamo utilizzare un'immagine gif.

L'icona deve avere dimensioni 16x16 px oppure 32x32 px.

Il codice da inserire nel template subito dopo la riga
<title><data:blog.pageTitle/></title> è il seguente:

per file .ico:
<link href='url_favicon.ico' rel='shortcut icon' type='image/x-icon'/>

per file .png:
<link href='url_favicon.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

per file .gif:
<link href='url_favicon.gif' rel='icon' type='image/gif'/>

Ed ecco alcuni link utili per creare una vostra favicon personalizzata:

  • favicon.cc: potrete creare la vostra favicon (anche animata) disegnando nell'editor che il servizio mette a disposizione.
  • Free Online Favicon Generator: vi basta caricare un'immagine e avrete la vostra favicon.
  • www.degraeve.com: potrete creare una favicon disegnando sull'editor o caricando una vostra immagine.
  • Iphone icon generator: potrete creare una favicon in stile I-phone.

Per il mio blog ho utilizzato una favicon fissa e una animata . Come al solito queste modifiche non sono interpretate allo stesso modo da tutti i browser. Infatti se aprite il mio blog con Firefox vedete la favicon animata, con Chrome e Internet Explorer invece vedete quella fissa.


E queste sono le favicon animate che ho realizzato per alcuni miei amici:


Resto a disposizione per ogni dubbio e chiarimento.

Newsletter by follow.it


1 dicembre 2009

35 commenti

Come personalizzare i link del blog

Spesso voi lettori mi contattate via email o lasciando commenti nel blog con domande del tipo:

  • Come posso modificare il colore dei link? Nel mio blog sono blu e vorrei che fossero verdi.
  • Come posso modificare il carattere e la dimensione dei link del mio blog?
  • I link nel mio blog sono sottolineati. Come posso togliere la sottolineatura?
  • Cosa devo aggiungere al codice html per far visualizzare la manina al passaggio del mouse sui link?

Queste sono solo alcune delle domande che mi sono state poste.
Vediamo insieme come personalizzare i link e quale parte del css del blog modificare.

Come ho ripetuto più volte, i template non sono tutti uguali. Quindi quello che scrivo potrebbe non esserci nel vostro o essere diverso.

In generale in ogni template, il css per i link dovrebbe essere del tipo:

a {
proprietà dei link
}

a:hover {
proprietà dei link al passaggio del mouse
}

Questa parte di codice si riferisce allo stile dei link di tutto il blog in generale; potreste trovare anche lo stile per i link dei post, della sidebar, dell'header o di altre sezioni del blog. In questo caso il codice è del tipo:

per i link dei post:

.post a {...}
.post a:hover {...}

per i link della sidebar:

#sidebar-wrapper a {...}
#sidebar-wrapper a:hover {...}

per i link dell'header:

#header-wrapper a {...}
#header-wrapper a:hover {...}

Dopo questa premessa vediamo insieme alcune proprietà dei link.

Partiamo dal colore. Per impostare il colore dei link basta aggiungere nel codice a {...} la proprietà color: codice_colore;
Se vogliamo che il colore del link cambi al passaggio del mouse allora aggiungiamo in a:hover {...} la proprietà color ma con un codice colore differente.

Ecco alcuni esempi:


Link rosso che al passaggio del mouse diventa blu

Codice: a {color: #F71A1A;} a:hover {color: #4B58FF;}


Link giallo che al passaggio del mouse diventa verde

Codice: a {color: #E09B00;} a:hover {color: #00A212;}

Vediamo ora come cambiare la font-family, la dimensione del carattere e l'aspetto (grassetto o normale). Le proprietà sono:

font-family: nome_font;
font-size: dimensione_font;
font-weight: bold (per il grassetto) o normal;

Anche in questo caso se vogliamo che il link al passaggio del mouse assuma un aspetto diverso basta impostare nelle proprietà del link e in quelle del link al passaggio del mouse dei valori diversi di font-family, font-size e font-weight.

Ecco un esempio:


Al passaggio del mouse cambia font-family, font-size e font-weight

Codice:
a {font-family: Comic Sans MS; font-size: 15px; font-weight: normal;}
a:hover {font-family: Verdana; font-size: 12px; font-weight: bold;}

Possiamo anche impostare uno sfondo aggiungendo la proprietà background: codice_colore;

Ecco un esempio:


Al passaggio del mouse cambia il colore di sfondo

Codice:
a {color: #FFFFFF; background: #6FA2E5;}
a:hover {color: #6FA2E5; background: #FFFFFF;}

Possiamo inoltre impostare dei bordi aggiungendo la proprietà border.

La sintassi per i bordi è: border: spessore colore tipo;
dove spessore può essere 1px, 2px, ...
colore è il codice del colore
e tipo può essere solid, dashed, dotted, ridge, inset, outset, double oppure groove

Impostando la proprietà border avremo i bordi su tutti e quattro lati del link, se ne vogliamo solo uno basta impostare una delle seguenti proprietà:

border-top: dimensione colore tipo: in alto
border-bottom: dimensione colore tipo: in basso
border-left: dimensione colore tipo: a sinistra
border-right: dimensione colore tipo: a destra

Ecco alcuni esempi:


Al passaggio del mouse cambia il colore e il tipo del bordo

Codice:
a {border: 3px #F59BB2 ridge;}
a:hover {border: 3px #FA7900 double;}


Al passaggio del mouse cambia il tipo del bordo

Codice:
a {border-bottom: 1px #0D7E00 dotted;}
a:hover {border: 1px #0D7E00 dashed;}

Vediamo ora la proprietà text-decoration:

text-decoration: none;: link non sottolineati (Esempio)
text-decoration: underline;: link sottolineati (Esempio)
text-decoration: line-through;: link barrati (Esempio)
text-decoration: blink;: link lampeggianti (Esempio)

Quest'ultimo effetto non è visibile su tutti i browser, tra cui Internet Explorer e Chrome!

Infine vediamo come far apparire la manina o altri tipi di cursore aggiungendo la proprietà cursor (per vedere l'effetto passare sulla scritta Esempio):

cursor: pointer;: (Esempio: pointer)
cursor: progress;: (Esempio: progress)
cursor: crosshair;: (Esempio: crosshair)
cursor: help;: (Esempio: help)
cursor: move;: (Esempio: move)
cursor: text;: (Esempio: text)
cursor: wait;: (Esempio: wait)
cursor: e-resize;: (Esempio: e-resize)
cursor: n-resize;: (Esempio: n-resize)
cursor: ne-resize;: (Esempio: ne-resize)
cursor: nw-resize;: (Esempio: nw-resize)
cursor: s-resize;: (Esempio: s-resize)
cursor: se-resize;: (Esempio: se-resize)
cursor: sw-resize;: (Esempio: sw-resize)
cursor: w-resize;: (Esempio: w-resize)

Resto a disposizione per ogni dubbio o chiarimento.

Newsletter by follow.it


flag counter
This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
 Design by Iole | Privacy Policy | Cookie Policy