lunedì 5 gennaio 2009

Aggiungi una favicon e togli la barra superiore da blogger


Se avete uno spazio gratuito su blogger e vorreste migliorarlo graficamente, ad esempio, inserendo una favicon o eliminando la barra superiore di blogger potete farlo seguendo queste istruzioni:

Aggiungere una favicon:

La Favicon, per chi non lo sapesse, è l'icona identificativa del sito/blog, l'icona standard assegnata a tutti gli inserzionisti di blogger è la seguente:

e viene visualizzata, sia nella barra degli indirizzi che nelle varie schede aperte nel browser:


Possiamo personalizzarcela:



Per farlo dobbiamo procedere in questo modo:
  1. Ci creiamo la nostra icona;
  2. La carichiamo su uno spazio web;
  3. Inseriamo il codice nel listato del sito;
Per crearci la nostra icona personalizzata favicon.ico possiamo farlo tramite un software oppure anche tramite questo sito(che io uso spesso): http://www.html-kit.com/favicon/, che ci crea, data un'immagine, il formato icona. Una volta creata dovete caricarla su un server che vi fornisce dello spazio (gratuitamente potete farlo anche su altervista) per ulteriori spiegazioni leggi anche questo articolo:

http://alessios4.blogspot.com/2008/11/inserire-una-favicon-su-blogspot.html.

Ora passiamo alla modifica dell' HTML/XML del nostro blog, passando dalla "Scheda Layout" e poi entrando in "Modifica HTML" del vostro spazio, le modifiche dovete farle scrivendo (o copiando) direttamente il codice HTML/XML. Posizionatevi immediatamente prima del tag di chiusura </head> e inserire il seguente codice:

<link href="percorso e nome file" type="images/x-icon" rel="shortcut icon"></link>

dove in 'percorso e nome file' metterete il percorso web ed il nome file in cui avete salvato la vostra icona. Di seguito quello che ho scritto io per il mio blog:

<link href='http://www.alessandrobonini.it/favicon-ale-blog.ico' rel='shortcut icon' type='images/x-icon'/>

Salvate ed aggiornate il blog per verificare (in genere se avete firefox come browser la modifica è subito visibile, con Internet Explorer dovete chiudere il browser e poi riaprirlo)

Eliminare la barra di navigazione di blogger:


Sempre dentro il codice HTML/XML dello spazio blogger, cercate il codice:

-----------------------------------------------

Blogger Template Style

Name: Minima Black

Designer: Douglas Bowman

URL: www.stopdesign.com

Date: 26 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

/* Variable definitions

====================

quindi inserite prima di Variable definitions il seguente codice:


#navbar-iframe {

display: none !important;

}

dovrete avere come risultato:


-----------------------------------------------

Blogger Template Style

Name: Minima Black

Designer: Douglas Bowman

URL: www.stopdesign.com

Date: 26 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

#navbar-iframe {

display: none !important;

}


/* Variable definitions

====================

Poi salvate il modello e verificate, potete leggere un altra spegazione anche al seguente link: http://universaleworlds.blogspot.com/2008/02/come-eliminare-la-barra-di-navigazione.html

2 commenti:

  1. Grazie per gli ottimi consigli, però il codice corretto per aggiungere una favicon è:

    <link href='percorso favicon.ico' rel='shortcut icon' type='images/x-icon'></link>



    Difatti il codice estratto dal tuo blog è:

    <LINK href='http://www.alessandrobonini.it/favicon.ico' rel='shortcut icon' type='images/x-icon'></LINK>

    RispondiElimina
  2. Grazie mago,
    per la tua precisione di-fatti c'erano alcuni apici di troppo, ora li ho eliminati, ed il codice è dovrebbe essere corretto, ricordo a tutti comunque che si possono utilizzare o gli apici o le doppie virgolette indifferentemente, ma occorre fare attenzione ad utilizzarli in apertura e chiusura correttamente aggiungo anche che la posizione degli attributi (rel, href, type) dentro qualsiasi tag (link) non ne pregiudica il risultato.
    ciao ciao

    RispondiElimina

saranno pubblicati solo commenti pertinenti, grazie per il tuo feedback

Articoli correlati: