Hoe kan ik Rollover knoppen op een Blogger Site

Hoe kan ik Rollover knoppen op een Blogger Site


Het bewerken van de HTML-codering is een manier van het aanpassen van een Blogger.com blog. Men maatwerk dat gedaan kan worden is het toevoegen van een rollover-knop. Een rollover knop is een hyperlink naar een andere site. In plaats van die te zien zijn als een tekstlink, lijkt het als een afbeelding. Wanneer een bezoeker rolt haar muis over de afbeelding, dan schakelt naar een ander beeld. Dit geeft aan dat de verbinding is gemarkeerd en is klaar om te worden geklikt. De rollover-knop maakt de website interactiever voor bezoekers.

instructies

1 Open een grafisch programma. Als je er geen hebt, installeer één (zie referentie kader). Maak het eerste beeld voor de knop. Meten van de grootte van het beeld in pixels. Voorbeeld: 300 pixels x 150 pixels. In het voorbeeld, het beeld heeft een hoogte van 300 pixels en een breedte van 150 pixels. Sla de knop als "Button1.gif". Als u al een beeld en zijn niet het creëren van een, krijg gewoon de grootte eigenschappen van het beeld en schrijf het op. Sla het op als "Button1.gif"

2 Maak het tweede beeld, of open een kant-en-klare één. Wanneer de muis van een bezoeker rolt over de knop, zal dit tweede beeld verschijnen. Stel het beeldformaat als identiek aan "Button1.gif". Voorbeeld: Afbeelding 1: "Button1.gif". Afmetingen: 300 pixels x 150 pixels.

Het eerste beeld heeft een grootte een hoogte van 300 pixels en een breedte van 150 pixels. Pas de tweede opname zodanig het heeft ook afmetingen van 300 pixels x 150 pixels. Sla de afbeelding op als "Button1a.gif"

3 Meld u aan om uw account op Blogger.com en ga naar het Dashboard. Start een nieuw bericht. Klik op "Plaats een New Image". Zoek "Button1.gif" en plaats deze in uw bericht. Klik met de rechtermuisknop op de afbeelding en klik op "Openen in een nieuw tabblad". "Button1.gif" zal een nieuw tabblad te openen in. Klik op het nieuwe tabblad. Noteer de URL van "Button1.gif", of kopieer en plak het in een tekstbestand. U bespaart het beeld locatie die u in een HTML-code wordt het plaatsen van later. Herhaal hetzelfde proces voor "Button1a.gif".

4 Open een nieuw tekstdocument. Kopieer onderstaande code en plak deze in het tekstdocument:

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

In het bovenstaande voorbeeld: u vervangt "http://yourblog.blogspot.com" met de URL die u wilt dat de roll over-knop om te linken naar. Waar IMAGE1 in de bovenstaande code verschijnt, zal u deze vervangen door de URL-locatie van 'Button1.gif ". Waar IMAGE2 verschijnt, zal u deze vervangen door de URL-locatie van 'Button1a.gif ".

5 Kopieer de HTML-code die u zojuist bewerkt. Ga terug naar je blog. Klik op het tabblad "Design". Een scherm genaamd "toevoegen en schikken Pagina Elements" zal verschijnen. Zoek een plek op uw blog dat u wilt dat de rollover knop te verschijnen. Wanneer je een plek te vinden, klikt u op de functie "Edit". Een scherm met de titel "Configure HTML / JavaScript" zal verschijnen.

6 Klik in de "Content" box. Plak in de HTML-code die u voorbereid en eerder gekopieerd. Klik op "Opslaan".

7 Klik op de optie 'View Blog "gevonden in de buurt van de top van het navigatiemenu. Hier vind je de knop en rol uw muis over het. Controleer dat wanneer je rollen over de knop, dan schakelt van "" Button1.gif "tot" Button1a.gif ". Klik op de knop om te controleren of uw hyperlink werkt.