La Pillola del Geek

13 gennaio 2007

Blogger Template: cambia il tuo logo!



Per tutti quelli che come me, non ancora utilizzano un servizio di hosting per il proprio blog e continuano a fruttare l'ottimo blogger di google senza spendere un centesimo di euro, ecco un semplice hack per poter modificare il vostro template, sostituendo o aggiungendo un logo grafico nel titolo testuale dell'header.

Attenzione! Ricordati di fare un backup del tuo template prima di iniziare con le modifiche!

Aggiunta logo al titolo testuale

Se desideri lasciare il titolo testuale, magari aggiungendo un'immagine nel tuo header, basta includere il tag <IMG> nei due campi "Titolo" e "Descrizione" nella pagina di configurazione di Blogger:
  • seleziona "Impostazioni" -> "Base"
  • sul campo "Titolo", posiziona il cursore a sinistra del titolo testuale del tuo blog
  • inserisci il tag <IMG> facendolo puntare alla location dell'immagine desiderata

    <IMG SRC="[your domain and filename]">

  • uscire dal menu' di configurazione ricordandosi di salvare
Questo metodo e' veramente semplice, ma fortemente sconsigliato, in quanto se si modifica il campo "Titolo", il nome del vostro blog sara' meno visibile e meno indicizzato dai motori di ricerca.

Sostituzione titolo testuale con un logo

Il miglior approccio, in questi casi, e' l'utilizzo del metodo CSS Fahrner Image Replacement (FIR), ovvero un'elegante soluzione che utilizza gli stylesheets per sostituire il testo con un'immagine, essenzialmente nascondendo il testo dagli "standards-compliant browsers".
Cio' avviene creando uno stile che setta il testo a "display: none", in aggiunta di un altro stile che visualizza invece l'immagine di background.
Questo approccio' pero', introduce delle barriere di accessibilita', perche' "display: none" rende ogni elemento (con questa dichiarazione) invisibile a certi screen readers e motori di ricerca. Anche se molte persone stanno lavorando a delle varianti di FIR per la risoluzione di questo problema, nel frattempo vi consiglio questa soluzione di compromesso:
  • apri il tuo blog template
  • inserisci il tag vuoto <SPAN></SPAN> nell'area Header, dopo <$BlogTitle$>
  • spostati nella parte relativa alla dichiarazione degli stili , e modifica lo stile #blog-title (invece di display:none; puoi settare il font-size al 2% senza qundi eliminare il titolo, ma rendendo quest'ultimo visibile agli screen readers e ai motori di ricerca e invisibile ai visitatori del blog)

  • #blog-title {
    margin:5px 5px 0;
    padding:0px 0px .25em;
    border:1px solid #357;
    border-width:1px 1px 0;
    font-size:2%; !importante;
    line-height:1.2em;
    color:#135; !importante;
    text-transform:uppercase;
    letter-spacing:.2em;
    }
  • crea un nuovo stile chiamato #blog-title span. L'esempio in basso dovrebbe centrare l'immagine grafica sopra il testo nascosto.

    #blog-title span {
    display:block;
    top:0;
    width:666px;
    margin-top:2px;
    margin-right:auto !importante;
    margin-left:auto !importante;
    z-index:1 !importante;
    height:86px;
    background:url("http://dominio/immagine.jpg") no-repeat;
    }
  • salva i cambiamenti effettuati al tuo template

E' ovvio che avere un proprio dominio con servizio di hosting e' tutta un'altra cosa...i vantaggi sono molti...ma per chi vuole iniziare a sperimentare un blog senza farne una ragione di vita, blogger e' una valida alternativa, ma ricordate... google non garantisce sulla perdita accidentale dei dati, quindi fate sempre il backup del template e dei posts!

Ciao e alla prossima pillola!

Etichette: , ,

16 Comments:

Anonymous Tom said...

Molto interessante quello che scrivi.
Proverò ad usare la pillola per personalizzare il mio blog.

Ma posso chiederti una cosa in più, visto che sei un esperto, come ci fa a far comparire solo la prima parte del post sulla home-page ed inserire il continua per chi vuol leggere tutto?

02/02/07, 12:55  
Anonymous vincenzo said...

ciao Tom,
fai il login su blogger e modifica le impostazioni del tuo modello (modello-->modifica HTML).

Aggiungi il seguente codice al tuo foglio di stile:

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

Il foglio di stile si trova di solito nella parte superiore del modello tra i tag <style> e </style>. Se il tuo foglio di stile si trova in un altro file, perche' i tag condizionali funzionino sara' necessario aggiungere queste righe al modello. Assicurati di aver aggiunto i tag <style>.

Aggiungi ora il seguente codice al tuo modello, dopo il tag <$BlogItemBody$>:

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Continua...</a>
</MainOrArchivePage>


Adesso vai in Impostazioni->Formattazione e in fondo troverai il riquadro identificato con "Modello post". Copia/incolla le righe che seguono nel riquadro e clicca su Salva impostazioni.

Scrivi qui una sintesi del tuo post
<span id="fullpost">
Scrivi qui il testo che completa il tuo post (la parte da nascondere)
</span>

Se adesso scrivi un nuovo post ti apparira' chiaramente la collocazione del testo riassuntivo e del testo di completamento del post. Vedrai anche che i post gia' pubblicati si possono modificare, quando e' opportuno, in modo da suddividerli in testo riassuntivo e testo restante. Il "Continua..." cliccabile comparira' solo nel caso di post il cui testo e' stato cosi' suddiviso.

02/02/07, 23:17  
Blogger Claudio said...

alla fine ho risolto il problema dei post espandibili grazie ai gruppi di google
cmq ti ringrazio per il tempo che mi hai dedicato.
ora proverò a seguire le indicazioni per cambiare il logo

grazie ancora
ciao

07/02/07, 19:44  
Blogger nini said...

E geniale questo sistema, grazie!!
Ho un problemino con il mio blog, chissà magari mi puoi consigliare.
Non riesco a far funzionare il cambiamento di colore sul titolo,(e altrove).Prima questa funzione andava, piu o meno, ma ora è come bloccata!
Sapresti consigliarmo,pf?
Grazie

18/04/07, 00:47  
Anonymous vincenzo said...

Ciao nini, molto bello il tuo blog... peccato che ogni volta che vado a vederlo mi viene fame... complimenti!
Per cambiare il colore del titolo "Dolciprofumi" basta cambiare qualcosa nel css:

#header {
margin: 5px;
border:1px solid #4c4c4c;
text-align: center;
color:#191919;
}

per esempio dal colore nero al bianco...

#header {
margin: 5px;
border:1px solid #4c4c4c;
text-align: center;
color:#ffffff;
}

Se invece vuoi cambiare il colore del sottotitolo "un blog di riccette semplici...", devi modificare #header .description:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: italic normal 70% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;
color: #ffffb3;
}

per esempio da giallo a bianco...

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: italic normal 70% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;
color: #ffffff;
}

Ciao e beato a chi si mangia le tue torte!!!

18/04/07, 09:35  
Blogger Michele said...

mmmm...e se io volessi impostare un'immagine di sfondo nel body?...come faccio?...
se puoi aiutarmi sei un grande.!!!
grazie lo stesso

16/06/07, 23:00  
Blogger sbibo said...

ciao, posso chiederti una mano? come faccio a creare un'altra sidebar a sinistra?

21/11/07, 11:16  
Blogger Snapshot83 said...

ciao! poosso chiederti, se sai risponddermi, come cambiare il font di default usato per il titolo del blog?
Ciao e complimenti per i tutorial ;-)

18/12/07, 12:21  
Blogger Snapshot83 said...

ciao e complimenti per i tutorial...
posso chiederti, se sai rispondermi, come fare per cambiare il font usato di default per il titolo del blog?

18/12/07, 12:22  
Anonymous vincenzo said...

ciao Snapshot83,
il titolo di questo blog non contiene font, ho semplicemente inserito un'immagine jpg nel codice CSS:

#blog-title span {
display:block;
top:0;
width:666px;
margin-top:2px;
margin-right:auto !important;
margin-left:auto !important;
z-index:1 !important;
height:86px;
background:url("http://www.imagehosting\
.com/out.php/i860866_title.jpg")
no-repeat;
}

18/12/07, 15:36  
Anonymous Anonimo said...

Spero mi risponderai. Sto cercando di tirar su un mio blog (ovviamente Blogger). Non riesco a capire come ritrovare il puntamento alle immagini che carico. Se voglio modificare il CSS per cambiare lo sfondo della testata della pagina come devo fare? come fare l'upload dell'immagine e quale è il percorso che devo usare img src="...."?
GRAZIE.

07/02/08, 19:42  
Blogger sara said...

ciao scusa ma tu sai come cambiare il cursore solo nella pagina del mio blog qui su blogger? sto diventando matta e lo sto chiedendo a tutti ma nessuno sa rispondermi ti prego di aiutarmi se sai la risposta... grazie mille sara

11/05/08, 20:35  
Blogger Claudio Rosa said...

Ciao, sono Claudio (www.graficismi .net) Ho cercato di seguire il Template "Cambia il tuo logo", ma non trovo corrispondenza tra quello che suggerisci (sarebbe ottimo, se io riuscissi a farlo!)e quello che appare nel listato del codice Html della mia pagina iniziale. Mi puoi aiutare un po'?
Ti ringrazio,
Claudio Rosa

20/09/08, 11:44  
Blogger djgabbo46 said...

ciao io non riesco cambiare logo come mai risp pls x(

17/12/11, 14:42  
Blogger djgabbo46 said...

io trovo
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
}
#blog-title a {
text-decoration:none;
color:#fff;
}
#blog-title span {
display:block;
top:0;
width:666px;
margin-top:2px;
margin-right:auto !importante;
margin-left:auto !importante;
z-index:1 !importante;
height:86px;
background:url(http://kiaromusic.blogspot.com/)
no-repeat;

non e giusto il procedimento?
xche a me non fuziona

17/12/11, 14:45  
Anonymous Anonimo said...

#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
}
#blog-title a {
text-decoration:none;
color:#fff;
}
#blog-title span {
display:block;
top:0;
width:666px;
margin-top:2px;
margin-right:auto !importante;
margin-left:auto !importante;
z-index:1 !importante;
height:86px;
background:url(http://kiaromusic.blogspot.com/)
no-repeat;

cosi non e giusto?! xche a me non funziona

17/12/11, 14:46  

Posta un commento

Links to this post:

Crea un link