Hvordan man laver en Photo Klikbart til forstørrelse i en Blogger

August 23

Hvordan man laver en Photo Klikbart til forstørrelse i en Blogger


Google Blogger giver flere måder at tilføje indhold til blogs. Du kan indtaste tekst i teksteditoren, redigere HTML på individuelle indlæg og endda opdatere den kode, der styrer hele din Blogger-skabelon. En hurtig måde at drage fordel af Bloggers HTML redigeringsfunktioner er at tilføje et klikbart foto til en Blogger indlæg. Når besøgende klikker på en lille version af et billede i dit indlæg, deres browsere ændre størrelsen på billedet og give dem et større billede.

Instruktioner

1 Start din browser og gå til din Blogger side. Klik på "Ny Post" knap, der vises ved siden af ​​en af ​​dine blogs. Sitet åbner ny side titel side. Skriv en titel til dit indlæg i "Titel" tekstfelt, der vises på siden.

2 Klik på knappen "Rediger HTML" og indsæt følgende kode i editoren, der vises under "Titel" tekstfeltet:

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

Denne kode opretter en HTML "img" tag. Mærket er "id" værdi "image1." Højden og bredden attributter har værdier på 20 procent. Disse værdier indstiller billedets oprindelige højde. Dette er den billedstørrelse websted besøgende ser, når de ser din Blogger indlæg. Skift "20%" til en anden værdi, hvis du vil. såsom "50%". Erstat "ADD IMAGE URL HERE" med webadressen på et foto på nettet, som du gerne vil bruge.

3 Indsæt koden vist nedenfor efter koden er angivet i det foregående trin:

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

Denne HTML-kode får billedet for at forstørre, når nogen klikker på billedet. Klik på "Udgiv indlæg" og derefter klikke på "Vis Post." Dit billede vises i posten; på den for at forstørre det.

TIPS

  • Bemærk, at værdien for img id attribut er "image1" i dette eksempel. Du kan bruge hvilket som helst navn du kan lide for id. Hvis du ændrer navnet, husk at ændre det overalt i koden. Det ser to gange i de to "document.getElementById" erklæring.
  • Du behøver ikke at gøre det forstørrede billede værdi "100%." Hvis du foretrækker at vise et mindre billede, der zoomes erstatte "100%" med en anden værdi, såsom "80%."
  • Tilføj så mange klikbare billeder som du gerne en Blogger indlæg. Giv hvert billede en unik id.

relaterede artikler