Hvordan lage et bilde Klikkbart å forstørre i en Blogger

Hvordan lage et bilde Klikkbart å forstørre i en Blogger


Google Blogger gir flere måter å legge til innhold til blogger. Du kan taste inn tekst i tekstredigeringsprogram, redigere HTML på individuelle innlegg og selv oppdatere koden som styrer hele Blogger mal. En rask måte å dra nytte av Blogger HTML redigeringsmuligheter er å legge til et klikkbart bilde til en Blogger innlegget. Når besøkende klikker på en liten versjon av et bilde i innlegget ditt, sine nettlesere endre størrelsen på bilder og gi dem et større bilde.

Bruksanvisning

1 Åpne nettleseren og gå til Blogger side. Klikk på "Nytt innlegg" knappen som vises ved siden av en av bloggene dine. Nettstedet åpner New Page tittel siden. Skriv en tittel på innlegget ditt i "Tittel" tekstboksen som vises på siden.

2 Klikk på "Rediger HTML" -knappen og lim inn følgende kode inn i editoren som vises under "Tittel" tekstboksen:

<Img id = "image1" src = "ADD IMAGE URL HER" style = "height: 20%; width: 20%;"

Denne koden skaper en HTML "img" tag. Koden er "id" verdi "image1." Høyde og bredde attributter har verdier på 20 prosent. Disse verdiene angir bildets opprinnelige høyde. Dette er bildestørrelsen nettstedet besøkende ser når de ser Blogger innlegget. Endre "20%" til en annen verdi hvis du vil. slik som "50%". Erstatt "ADD IMAGE URL HER" med nettadressen til et bilde på nettet som du ønsker å bruke.

3 Lim inn koden vist nedenfor etter Kodene i forrige trinn:

onclick = "javascript:.. document.getElementById ( 'image1') style.height = '100%'; document.getElementById ( 'image1') style.width = '100%';" />

Denne HTML-kode gjør at bildet for å forstørre når noen klikker på bildet. Klikk "Publiser innlegg", deretter "Vis Post." Bildet vises i innlegget; klikk på den for å forstørre det.

Hint

  • Legg merke til at verdien for img id attributt er "image1" i dette eksemplet. Du kan bruke hvilket som helst navn du vil for id. Hvis du endrer navn, må du huske å endre det overalt i koden. Det vises to ganger i de to "document.getElementById" statement.
  • Du trenger ikke å gjøre det forstørrede bildet verdi "100%". Hvis du foretrekker å vise en mindre zoomet bilde erstatte "100%" med en annen verdi, for eksempel "80%."
  • Legg til så mange klikkbare bilder som du ønsker å en Blogger innlegget. Gi hvert bilde en unik ID.