Creare un footer statico su blogger

2 commenti:
 

Essendo un appassionato di web design, mi capita spesso nel tempo libero di navigare in cerca di ispirazione. Qualche volta mi capita di imbattermi in siti web che catturano la mia attenzione per un particolare design o per alcuni elementi contenuti nel layout, e nella maggior parte dei casi questi siti sono portfolio on line di grafici, designer o creativi in genere.

In particolare sono sempre stato attratto dagli elementi che rimangono fermi e non scorrono insieme al resto della pagina, perché credo che sia un ottimo modo di fargli ricadere addosso l'attenzione. In alcuni siti, questa tecnica è utilizzata per realizzare dei footer statici, questo perché contengono delle informazioni che i proprietari del sito vogliono far rimanere sempre sotto gli occhi del visitatore, o semplicemente per aggiungere un tocco estetico al sito.

Mi sono chiesto se fosse possibile realizzare lo stesso tipo di footer sul mio blog, e ho trovato una soluzione abbastanza semplice per farlo. Vediamo come.

Prima di tutto abbiamo bisogno di un'immagine che andremo a utilizzare come footer. Possiamo realizzarla con un software come Photoshop o Gimp, oppure trovarne una in rete. L'importante è abbia la stessa larghezza del corpo principale del blog, che nei CSS incorporati nel template si chiama "outer-wrapper".

Se vogliamo possiamo anche realizzare questa immagine in modo che abbia nella parte superiore qualche tipo di trasparenza, proprio come quella che ho usato io. In questo caso dovrete salvarla in PNG.

Questa è la mia immagine con trasparenza:





Ora carichiamo l'immagine sul nostro dominio, o su un servizio di archiviazione online gratuito come imageshack.

Dal pannello di controllo del nostro blog, nella scheda "LAYOUT", alla voce "Elementi pagina", aggiungiamo un gadget nel footer, selezionando tra le opzioni un elemento "HTML/JavaScript".
Il codice da inserire nell'elemento è il classico codice che richiama un'immagine:

<img src="http://url-immagine">

Chiaramente sostituiremo alla parte in rosso l'indirizzo della nostra immagine precedentemente caricata sul nostro spazio web.

Ora sempre dalla scheda "LAYOUT" clicchiamo su "Modifica HTML" e cerchiamo nei CSS la parte di codice che definisce il footer, e la modifichiamo in questo modo:

#footer {
  position:fixed;
  bottom:-5px;
  width:930;
  background: transparent;
}


L'articolo originale da cui ho preso spunto lo trovate a questo link.

Con la stessa tecnica possiamo realizzare anche dei pulsanti o altri elementi della grafica che restano fissi e non scorrono con il resto della pagina, ma questo lo vediamo nel prossimo post.

2 commenti:

  1. E se invece volòessi che avesse una dimensione diversa da quella body? Vorrei che prendersse l'intera pagina. Come si fa?

    RispondiElimina
  2. Devi aprire un div subito prima della chiusura del body (dal pannello di controllo di modifica HTML del modello), e tramite css assegnargli width:100% e height: (ad esempio) 200px; all'interno di questo div puoi inserire i contenuti del nuovo footer che avrà larghezza 100% della pagina.

    RispondiElimina

 
© 2016 LUCYDREAMS - Tutti i diritti riservati - P.IVA 13151341008 | Template Designed by Main-Blogger.