Hvordan legge til en Scrollbar Seksjon for min WordPress blog

Hvordan legge til en Scrollbar Seksjon for min WordPress blog


I HTML er forskjellige deler av en nettside som finnes i skillevegger, identifisert av <div> tagger. Som standard vil et sett med skillevegger endre størrelse til å passe alt innhold som er inni den. Det er mulig å gi en deler en fast størrelse. I dette tilfellet vil innholdet i deleren være for stor til å passe inne i den. Dette gir deg to alternativer for en WordPress blogg; Du kan enten velge å skjule innholdet utsiden av skillevegger 'område, eller du kan gi den skillelinjen et rullefelt, som de besøkende kan bruke til å vise ekstra innhold.

Bruksanvisning

1 Logg inn på din WordPress administrator kontrollpanel. Fra den store menyen på venstre side av skjermen, klikk på "Utseende", deretter "Editor". Dette området kan du vise og redigere HTML-filer som utgjør din WordPress blog tema.

2 Klikk på linken for stilarket. Dette er nær bunnen av listen over filer til høyre, under "Stil" overskriften. WordPress holder stilen på alle nettstedets elementer i denne filen. Når du klikker på filen, vil den vises i midten av skjermen.

3 Start en ny linje i filen, og deretter lime inn følgende kode:

scrollbarsection {

width: 400px;

height: 400px;

overløp: bla;

}

Denne koden forteller WordPress at det er en ny skillelinje kalt "scrollbarsection", som har en høyde og bredde på 400 piksler. Hvis noe innhold inne dele flyter fra dette 400 x 400 område, bør et rullefelt legges slik at den besøkende til å få tilgang til dette innholdet. Endre høyden og bredden til den størrelsen som passer dine behov.

4 Klikk "innlegg", og enten klikke på tittelen på innlegget for å legge et rullefelt til den, eller klikk på "Legg til ny" for å opprette et nytt innlegg. Klikk på "HTML" fanen øverst i redigeringsområdet. Dette tillater deg å skrive kode i editor.

5 Plasser markøren på det punktet i innlegget som du vil at rullefeltet skal vises, og deretter lim inn følgende kode:

<Div id = "scrollbarsection">

</ Div>

6 Sett innholdet inne i <div> tagger to. Du kan enten skrive inn tekst som normalt, eller klikk på "Legg Media" -knappen øverst i redigeringsruten for å legge til bilder. Når du har lagt inn innholdet, klikk på "Publiser" øverst til høyre på skjermen.