Wenn Sie jemals auf einer Webseite nach unten gescrollt haben und sich ein Element darauf nicht bewegt hat, haben Sie das CSS-Positions-Tag in Aktion erlebt. Tumblr-Blogger, die dieses Tag zu ihren Vorlagen hinzufügen, können den gleichen Effekt in ihren Blogs erzielen. Ein guter Ort, um dies auszuprobieren, ist in Ihrer Seitenleiste. Nachdem Sie dem HTML-Code Ihres Blogs ein Positions-Tag hinzugefügt haben, bleibt Ihre Seitenleiste fixiert, wenn Benutzer auf Ihren Blog-Seiten nach oben oder unten scrollen.

Rufen Sie Ihr Tumblr-Dashboard auf und klicken Sie dann auf das Einstellungssymbol und den Namen des Blogs, den Sie aktualisieren möchten. Wenn Sie nur einen Blog haben, klicken Sie auf seinen Namen.

Klicken Sie auf "Anpassen" gefolgt von "HTML hinzugefügt". Tumblr öffnet Ihr Theme und zeigt seinen HTML-Code an.

Klicken Sie auf eine beliebige Stelle im Code und drücken Sie "Strg-A" gefolgt von "Strg-C", um den Code in die Windows-Zwischenablage zu kopieren. Öffnen Sie ein neues Notepad-Dokument und fügen Sie den Code in das Dokument ein. Diese Schritte stellen sicher, dass Sie über eine Sicherungskopie Ihrer Originalvorlage verfügen.

Kehren Sie zum Tumblr-HTML-Code zurück und drücken Sie "Strg-F", um ein Suchfeld zu öffnen. Geben Sie "Sidebar" in dieses Suchfeld ein und drücken Sie dann "Enter". Tumblr findet das erste Vorkommen von "sidebar" und zeigt den Codeabschnitt an, der dieses Wort enthält. Der gefundene Code sollte wie folgt aussehen:

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

Die erste Codezeile enthält die Wörter #wrapper #sidebar. Eine linke Klammer folgt diesen Wörtern.

Fügen Sie den folgenden Code direkt unter der ersten Codezeile ein:

Position: fest; rechts: 100px;

Das Attribut position weist Browser an, die Seitenleiste so zu fixieren, dass sie sich beim Scrollen nicht bewegt. Das Attribut right teilt Browsern mit, wie viele Pixel der rechte Rand der Seitenleiste vom rechten Rand der Webseite entfernt sein soll. In diesem Beispiel hat das rechte Attribut einen Wert von 100px.

Klicken Sie auf "Vorschau aktualisieren", um eine Vorschau Ihrer Änderungen anzuzeigen. Ziehen Sie die Bildlaufleiste des Fensters nach oben und unten und Sie werden sehen, dass sich Ihre Seitenleiste nicht bewegt. Klicken Sie auf "Speichern", um Ihre Änderungen zu speichern.

Tipps

Sie können mit verschiedenen Werten für das rechte Attribut experimentieren, wenn Sie die horizontale Position der Seitenleiste anpassen möchten. Wenn Sie beispielsweise den Wert von 100px auf 50px ändern, bewegt sich die Seitenleiste um 50 Pixel weiter nach rechts.

Warnungen

Seien Sie vorsichtig, wenn Sie im HTML-Editor arbeiten, da eine versehentliche Änderung des vorhandenen Codes dramatische Auswirkungen auf das Layout Ihrer Seite haben kann. Wenn Sie den Code ändern und nicht herausfinden können, wie Sie Ihre Änderungen rückgängig machen können, können Sie jederzeit alles im HTML-Editor löschen und den kopierten Sicherungscode in den Editor einfügen, um ihn in seinen ursprünglichen Zustand wiederherzustellen.