Als je ooit op een webpagina hebt gescrold en een item erop niet is verplaatst, heb je de CSS-positietag in actie gezien. Tumblr-bloggers die deze tag aan hun sjablonen toevoegen, kunnen hetzelfde effect in hun blogs creëren. Een goede plek om dit uit te proberen is in je zijbalk. Nadat je een positietag aan de HTML-code van je blog hebt toegevoegd, blijft je zijbalk ongewijzigd wanneer mensen op en neer scrollen op je blogpagina's.

Ga naar je Tumblr-dashboard en klik vervolgens op het instellingenpictogram en de naam van de blog die je wilt bijwerken. Als je maar één blog hebt, klik dan op de naam ervan.

Klik op 'Aanpassen' gevolgd door 'HTML toegevoegd'. Tumblr opent je thema en geeft de HTML-code weer.

Klik ergens in de code en druk op "Ctrl-A" gevolgd door "Ctrl-C" om de code naar het Windows-klembord te kopiëren. Open een nieuw Kladblok-document en plak de code in het document. Deze stappen zorgen ervoor dat u een reservekopie van uw originele sjabloon hebt.

Keer terug naar de Tumblr HTML-code en druk op "Ctrl-F" om een ​​zoekvak te openen. Typ 'zijbalk' in dat zoekvak en druk vervolgens op 'Enter'. Tumblr vindt de eerste keer dat "zijbalk" voorkomt en geeft het codegedeelte weer dat dat woord bevat. De gevonden code moet er ongeveer als volgt uitzien:

wrapper #zijbalk { kleur: {kleur: achtergrond}; }

De eerste regel code bevat de woorden #wrapper #sidebar. Een linker haakje volgt die woorden.

Plak de volgende code direct onder de eerste regel code:

positie: vast; rechts: 100px;

Het position-attribuut instrueert browsers om de zijbalk te corrigeren zodat deze niet beweegt wanneer u scrolt. Het juiste kenmerk vertelt browsers hoeveel pixels u wilt dat de rechterrand van de zijbalk van de rechtermarge van de webpagina komt. In dit voorbeeld heeft het rechterattribuut een waarde van 100px.

Klik op "Voorbeeld bijwerken" om een ​​voorbeeld van uw wijzigingen te bekijken. Sleep de schuifbalk van het venster omhoog en omlaag en je zult zien dat je zijbalk niet beweegt. Klik op "Opslaan" om uw wijzigingen op te slaan.

Tips

U kunt experimenteren met verschillende waarden voor het juiste attribuut als u de horizontale positie van de zijbalk wilt aanpassen. Als u bijvoorbeeld de waarde wijzigt van 100px in 50px, wordt de zijbalk 50 pixels verder naar rechts verplaatst.

Waarschuwingen

Wees voorzichtig wanneer u in de HTML-editor werkt, aangezien het per ongeluk wijzigen van bestaande code dramatische gevolgen kan hebben voor de lay-out van uw pagina. Als u de code wijzigt en u weet niet hoe u uw wijzigingen ongedaan kunt maken, kunt u altijd alles in de HTML-editor verwijderen en de back-upcode die u hebt gekopieerd in de editor plakken om deze in de oorspronkelijke staat te herstellen.