Pubblicato il 04/11/09 - aggiornato il  | 1 commento :

Come inserire un bottone statico a fondo pagina di un blog su Blogger per tornare con un click all'inizio dell'articolo.

Ci sono blog che hanno articoli molto brevi e quelli che invece li hanno molto lunghi. Per leggere i post ci aiutiamo con il cursore verticale presente sulla destra, finita la lettura per tornare all'inizio della pagina sarebbe sufficiente premere sul tasto che è a forma di freccia obliqua e che in alcune tastiere si chiama Home.

Non tutti conoscono questa possibilità e forse potrebbe essere il caso di aiutarli, vediamo infatti come inserire un'immagine statica in fondo al blog che funzioni da pulsante per ritornare automaticamente all'inizio dell'articolo.

Come prima cosa bisogna caricare su un hosting il bottone che più ci piace. Ve ne propongo qualcuno

 

 

 

Queste immagini sono già state caricate nel web e per acquisirne l'indirizzo bisogna cliccarci sopra, selezionarne l'URL dal browser e copiarlo.  

E' il momento di fare le opportune modifiche al template andando su Layout > Modifica HTML e, dopo aver salvato il modello completo, cercare la riga

]]></b:skin>

che indica la fine delle classi di stile per l'aspetto del blog. Immediatamente sopra a questa riga inserire il seguente codice

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Con questo codice il bottone si posizionerà sulla destra in basso alla distanza di 10 pixel dal fondo e dalla destra. Se si sostituisce right con left si può posizionare sulla sinistra. Si possono ovviamente cambiare il numero di pixel per inserirlo nella posizione più idonea alla grafica del nostro blog. Ecco lo screenshot dell'inserimento

image

Adesso cercate la riga </body> che si trova in fondo al modello e immediatamente prima aggiungete il seguente codice

<a href="#" id="backtotop"><img src="URL_Immagine" alt="inizio post" /></a> 

dove al posto di URL_Immagine occorre inserire l'indirizzo di una delle immagini proposte o di un'altra a vostra scelta che avete caricato sul web. Ecco il consueto screenshot

bottone

Non resta che salvare il modello. Per una dimostrazione del funzionamento di questo bottone andate su un post di La Nuova Atlantide che è un mio blog scientifico che non aggiorno più da un anno e che ho usato come cavia. I principianti potranno anche rendersi conto di come fossi scarso in termini di grafica, non è che adesso sia migliorato così tanto Smile. Il pulsante funziona indifferentemente nei post, in homepage e nelle pagine di archivio.

Questo articolo mi è stato ispirato da AllBlblogtools, dove potrete trovare anche altre immagini oltre alle tre che vi ho proposto.



1 commento :

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy