Creare un pulsante statico su blogger

Nessun commento:
 

Abbiamo visto in precedenza come creare un footer statico su blogger, cioè che non scorre con il resto della pagina ma resta sempre nella stessa posizione. Ora vediamo come realizzare un pulsante con la stessa tecnica. Nel mio blog ho deciso di posizionare in questo modo l'icona dei feed RSS in alto a destra, perché mi piaceva che fosse sempre in evidenza.

La procedura per realizzare un pulsante del genere è molto simile a quella trattata in questo post, con l'aggiunta di poche righe di codice.

Prima di tutto come al solito dobbiamo creare un'immagine che sarà il pulsante su cui inserire il link, e possiamo farlo con Photoshop o Gimp, ricordandoci che un'unica immagine dovrà contenere i due stati del pulsante, cioè "on" e "off", e che dovrà essere perfettamente divisa in due, proprio come questa:



Per realizzare questo pulsante ho utilizzato un'icona estratta da un set creato da murid rahhal. Possiamo scegliere se posizionare lo stato "on" a destra o a sinistra senza preoccuparci, perché decideremo in seguito quale sarà la metà che comparirà nello stato iniziale del pulsante, scrivendo il CSS che definirà le sue proprietà.

Una volta creata l'immagine, dobbiamo caricarla sul nostro dominio o su un servizio di archiviazione online gratuito come Imageshack. Dopodiché andremo ad inserire nel template (dal pannello di controllo, nella scheda LAYOUT alla voce "Modifica HTML") queste poche righe di codice, sostituendo alla parte in giallo l'indirizzo dell'immagine, a quelle in arancione altezza dell'immagine (height:128px) e metà della larghezza (width: 256px/2=128px):

.RSSbutton {
position:fixed;
top:10px;
right:10px;

width: 128px;
height: 128px;

}

.RSSbutton a {
display: block;
width: 128px;
height: 128px;

background: url(http://url-immagine.png) no-repeat top right;
}

.RSSbutton a:hover {
background-position: top
left;
}


Righe che vanno inserite al di sopra di questa:

/* -- layout -- */


La mia immagine contiene lo stato "on" nella parte sinistra, quindi il "left" che vedete evidenziato in verde determina lo stato "on" del pulsante. Al contrario la parte in rosso determina lo stato "off".

Ora non ci resta altro che aggiungere un gadget di tipo "HTML/JavaScript" in un punto qualsiasi del blog (nella sidebar, o nel footer) all'interno del quale inseriremo questa stringa:

<div class="RSSbutton"><a href="http://link-pulsante.html" target="_blank"></a></div>

Ovviamente sostituiremo alla parte in rosso, il link al quale vogliamo che punti il pulsante.
All'interno di questa stringa l'attributo target="_blank" serve a far aprire il link in una nuova finestra; se volete invece che il link si apra nella stessa finestra, semplicemente omettete la parte appena citata:

<div class="RSSbutton"><a href="http://link-pulsante.html"></a></div>

Nessun commento:

Posta un commento

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