Hvordan lage Badge Kode bokser

May 22

Merker er en morsom måte å invitere venner, fans og besøkende på nettstedet ditt for å bidra til å fremme ditt produkt, tjeneste eller årsak. Du kan vise flere bilder og gi instruksjoner for hvordan du laster ned og koble dem, men det er ofte mer praktisk å gi en kodebit brukerne kan bare klippe og lime. Det finnes to metoder for å gjøre dette. Den første metoden skriver koden som tekst ved ganske enkelt å bruke "<kode>" tag. Ulempen med denne metoden er at den ikke kontrollere hvor brukerens valg av tekst begynner og slutter, noe som kan resultere i at brukeren kopiering mer enn koden som trengs. Av denne grunn er det best å bruke den andre metoden, som bruker "<div" tag for å lage en kode boksen under bildet.

Bruksanvisning

1 Sett inn badge bilde inn i innlegg eller side ved hjelp av standard HTML bildekoden eller "insert image" -funksjonen på siden editor. HTML skal se omtrent slik ut:

2 Skriv inn en ny linje. Skriv en åpning DIV tag som så:

<Div>

Gi beholderen en høyde, bredde og rulle ved tilsetning av en stil attributt. Skriv verdiene av stilen attributtet på samme måte som de ville være i et stilark, og separert ved hjelp av semikolon. Den "overflow" verdi gir beholderen en scrollbar i tilfelle koden din ikke passer perfekt i dimensjonene du angir, avhengig av betrakterens skjermstørrelse.

3 Skriv inn koden du ønsker å vises i din kode boksen på neste linje. En grunnleggende badge koden inneholder en link til bildet og nettsiden merket vil åpne når du klikker på. For eksempel:

Viktig: ta med "alt" -attributtet i bildekode. Denne teksten er brukt av skjermlesere og noen mobile enheter hvor bilder ikke kan vises, og vises også hvis en bruker svever over bildet med musen.

4 Gjøre koden "usynlig" i nettleseren din ved å bytte ut åpne og lukke parentes med sine tekstalternativ, kalt en HTML-enhet. Hvis du forlot koden som det er, vil det bli lest av nettleseren og vise den koblede badge til brukeren i stedet for koden for å kopiere. Ved å erstatte hver tag brakett med en enhet, vil koden dukke opp som tekst, slik at de besøkende til å markere og kopiere den. For å oppnå dette, må du skifte hver åpning brakett "<" med "<" og hver endte brakett ">" med ">" som i eksempelet nedenfor:

5 Lukk beholderen ved å legge til en avsluttende DIV tag på neste linje:

</ Div>

Forhåndsvise arbeidet ved å åpne HTML-dokumentet i et nettleservindu, eller lagre innlegget eller siden i online editor.

Hint

Hvis du bruker en online HTML editor eller blogging plattform, prøve å plassere "<kode>" tag før kodebiten og "</ code> etter, i stedet for å erstatte parentes. Denne metoden kan noen ganger vise" <kode> " koder sammen med skiltet kode, i så fall må du bruke HTML enheter.