Tilføjelsen af ​​et sidebjælke til din virksomhed Tumblr har gavn for temaet ved at give yderligere oplysninger om din virksomhed, udgående links til partnerorganisationer eller beslægtede websteder eller et søgefelt for at finde specifikt indhold på webstedet. Mange temaer er designet til at understøtte et sidebjælke, men du kan også indsætte en i dit tema ved at bruge Tumblr's HTML editor. Oprettelse af dit eget sidebjælke med en teksteditor og styling med CSS giver dig fuldstændig kontrol over dets funktioner og udseende, så du bedre kan tilpasse udseendet til din virksomhedsidentitet.

Skriv og stil sidepanelmarkeringen

1.

Bestem hvad du vil vises i din sidebjælke og skriv et udkast til sidebjælkens indhold i et almindeligt tekstdokument til senere brug.

2.

Opret et nyt HTML-dokument med tags til styling ved hjælp af dit tekstredigeringsprogram. HTML5-sidestrukturen skal se ud som følger:

3.

Indsæt et sidebemærkning med et id "sidebar" i HTML5-dokumentets krop. Tag til side skal se ud som følger:

4.

Kopier det indhold, du tidligere har sammensat til dit sidebjælke, og indsæt det i side til side.

5.

Brug standard-kompatibelt markup til at konvertere dit sidebar indhold til HTML5. Indsæt f.eks. Overskrifter inden for header-tags, stykkeindhold inden for afsnitstegn og vedhæft linktekst i ankeretiketter med hyperlinkreferencer. Se en HTML-referencevejledning, hvis du ikke er sikker på, hvordan dette virker (se Ressourcer).

6.

Gem filen som et HTML-dokument til skrivebordet

7.

Åbn din webbrowser, vælg "Fil", klik på "Åbn" og vælg det HTML-dokument, du har gemt på skrivebordet. Din browser viser dit uformede sidebjælke.

8.

Gå tilbage til din teksteditor, placér markøren mellem stiletiketterne og stil din markering med afhængighed af "#sidebar" vælgeren for at målrette mod din sidebjælke. Hvordan du laver sidebjælken afhænger stort set af din smag, udformningen af ​​dit eksisterende Tumblr-tema og markeringen i din sidebjælke. Brug en CSS3-referencevejledning for at sikre, at du komponerer egenskaberne og deres værdier korrekt (se Ressourcer).

9.

Bestem, om du vil have din sidebjælke til venstre eller højre og tildele en flydeegenskab tilsvarende. Hvis du f.eks. Vil have sidebjælken til venstre for det primære indhold, vil din "# sidebar" vælger, floategenskab og værdi se ud som følger:

sidebar {

float:left; 

}

10.

Test udseendet på dit sidebjælke ved at klikke på opdater i din browser og fortsæt med at justere stilen til din markering, indtil du er tilfreds med udseendet.

Indsæt sidebjælken i dit Tumblr-tema

1.

Log ind på dit Tumblr dashboard, klik på din blogtitel i højre sidepanel, klik på "Tilpas" og klik "Rediger HTML" for at åbne Tumblr kildekoden editor.

2.

Kopier CSS fra dit åbne HTML-dokument og indsæt det i slutningen af ​​stilområdet i dit Tumblr-tema.

3.

Find CSS-vælgeren for dit primære indholdsregion i Tumblr-editoren, placér markøren efter den krøllede beslag og tildel den samme float-egenskab og værdi som din sidebjælke. Hvis din sidebjælke f.eks. Skal vises til højre, skal du tildele en flydeegenskab med en værdi af "højre" til beholdervælgeren.

4.

Kopier sidetaggen og dens indhold fra din teksteditor og indsæt det i kropstegnet til dit Tumblr-tema. Hvis du vil have sidebjælken til højre for det primære indhold, skal du placere det efter den pågældende beholder Hvis du vil have den vist til venstre, skal du indsætte den før den primære beholder.

5.

Klik på "Opdater preview", klik på "Udseende" og klik på "Gem" knappen for at afslutte de ændringer, du har lavet til dit tema.

Ting, der er nødvendige

• Tekstredigeringsprogram

Tip

• Se Tumblrs liste over grundlæggende variabler for at indsætte dynamisk indhold i dit sidebjælke (se Ressourcer).