Come mettere pulsanti rollover su un sito di Blogger

November 11

Come mettere pulsanti rollover su un sito di Blogger


Modificare il codice HTML è un modo di personalizzare un blog Blogger.com. Una personalizzazione che si può fare è l'aggiunta di un pulsante rollover. Un pulsante rollover è un collegamento ipertestuale a un altro sito. Invece di apparire come un link di testo, esso appare come immagine. Quando un visitatore rotola il suo mouse sull'immagine, si alterna a un'altra immagine. Ciò significa che il link è stato evidenziato ed è pronto per essere cliccato. Il pulsante rollover rende il sito più interattivo per i visitatori.

istruzione

1 Aprire un programma di grafica. Se non ne avete uno, installare una (casella Riferimento vedere). Creare la prima immagine per il pulsante. Misurare la dimensione dell'immagine in pixel. Esempio: 300 pixel x 150 pixel. Nell'esempio, l'immagine ha una altezza di 300 pixel, e una larghezza di 150 pixel. Salvare il pulsante come "Button1.gif". Se si dispone già di un'immagine e non si sta creando uno, semplicemente ottenere le proprietà dimensioni dell'immagine e scrivere. Salvarlo come "Button1.gif"

2 Creare la seconda immagine, o aprire un un ready-made. Quando il mouse di un visitatore rotola sopra il pulsante, apparirà questa seconda immagine. Impostare le dimensioni dell'immagine come identici a "Button1.gif". Esempio: Immagine 1: "Button1.gif". Dimensioni: 300 pixel x 150 pixel.

La prima immagine ha una dimensione di altezza 300 pixel e una larghezza di 150 pixel. Regolare la seconda immagine in modo ha anche dimensioni di 300 pixel x 150 pixel. Salvare l'immagine come "Button1a.gif"

3 Accedi al tuo account su Blogger.com e andare al Dashboard. Inizia un nuovo post. Clicca su "Inserire una nuova immagine". Individuare "Button1.gif" e inserirlo nel tuo post. Fare clic destro sull'immagine e fare clic su "Apri in una nuova scheda". "Button1.gif" si aprirà in una nuova scheda. Fare clic sulla nuova scheda. Annotare l'URL di "Button1.gif", o copiare e incollarlo in un file di testo. Si sta salvando la posizione dell'immagine che si sarà inserisce in un codice HTML in seguito. Ripetere lo stesso processo per "Button1a.gif".

4 Aprire un nuovo documento di testo. Copia il codice qui sotto e incollarlo nel documento di testo:

<a href="&lt;img"> http://yourblog.blogspot.com "> & lt; img onmouseover =" "IMAGE2 'this.src =" onmouseout = "" IMAGE1' this.src = "alt =" Fare clic sul pulsante me "/> </a>

Nell'esempio di cui sopra: si sostituire "http://yourblog.blogspot.com" con l'URL che si desidera il rotolo tasto sopra per il collegamento. Dove IMAGE1 compare nel codice precedente, si sostituirlo con il percorso URL del "Button1.gif". Dove appare IMAGE2, vi sostituirlo con il percorso URL del "Button1a.gif".

5 Copiare il codice HTML appena modificato. Torna al tuo blog. Fare clic sulla scheda "Design". Uno schermo chiamato "Aggiungi e Disporre Elementi pagina" apparirà. Trovare un posto sul tuo blog che si desidera visualizzare il pulsante di rollover. Quando si trova un posto, cliccare sulla sua funzione "Edit". Viene visualizzata una schermata dal titolo "Configura HTML / JavaScript".

6 Fare clic nella casella "Contenuto". Incollare il codice HTML preparato e copiato in precedenza. Fare clic su "Salva".

7 Fare clic sull'opzione "Blog" che si trova nella parte superiore del menu di navigazione. Trova il tuo pulsante e scorrere il mouse su di esso. Verificare che quando si tira sopra il pulsante, si commuta da "" Button1.gif "a" Button1a.gif ". Fare clic sul pulsante per assicurarsi che il collegamento ipertestuale funziona.