Skapa ett fast sidofält i Tumblr

Steg-för-steg: Gör ditt sidofält fast i Tumblr

Har du någonsin scrollat på en webbsida och märkt att ett element förblev på samma plats? Det är en CSS‑effekt som kallas position: fixed. På Tumblr kan du lägga till samma effekt i ditt tema så att sidofältet följer inte med när användaren rullar.

1. Förberedelse – gör en säkerhetskopia

Logga in på din Tumblr‑panel och klicka på kugghjulsikonen för inställningar. Välj det blogginlägg du vill ändra. Klicka sedan på “Anpassa” och därefter “Anpassad HTML”. Tumblr visar hela HTML‑koden för ditt tema.

Markera allt (Ctrl+A) och kopiera (Ctrl+C). Öppna Notepad eller någon annan enkel textredigerare och klistra in koden. Detta ger dig en säkerhetskopia som du kan återställa vid behov.

2. Hitta sidofältet i koden

Med HTML‑redigeraren öppnad, tryck Ctrl+F för att öppna sökfältet. Skriv sidebar och tryck Enter. Tumblr markerar den första förekomsten av ordet. Koden bör se ut ungefär så här:

wrapper #sidebar { color: {color:Background}; }

Den första raden innehåller ofta #wrapper #sidebar följt av en öppningsparentes.

3. Lägg till CSS‑regeln

Placera muspekaren efter den första raden och klistra in:

position: fixed; right: 100px;

Regeln gör sidofältet fast i förhållande till fönstret. right: 100px placerar dess högra kant 100 px från webbsidans högra marginal.

4. Förhandsgranska och spara

Klicka på “Förhandsgranska” för att se resultatet. Dra rullningslisten upp och ner – sidofältet ska förbli stilla. När du är nöjd klickar du på “Spara”.

Tips

Ändra gärna värdet för right för att finjustera den horisontella positionen. Till exempel blir ett värde på 50 px ett halvt steg närmare höger.

Varningar

Redigering av HTML kan påverka sidans layout drastiskt. Om du gör en felaktig ändring och inte kan återställa den, ta bort all kod i redigeraren och klistra in din säkerhetskopia för att återgå till ursprungskoden.