Das Hinzufügen einer Seitenleiste zu Ihrem Unternehmen Tumblr kommt dem Thema zugute, indem es zusätzliche Informationen über Ihr Unternehmen, ausgehende Links zu Partnerorganisationen oder verwandten Websites oder ein Suchfeld zum Auffinden bestimmter Inhalte auf der Website bereitstellt. Viele Themen unterstützen eine Seitenleiste. Sie können sie jedoch auch mithilfe des HTML-Editors von Tumblr in Ihr Thema einfügen. Wenn Sie eine eigene Seitenleiste mit einem Texteditor erstellen und mit CSS gestalten, haben Sie die vollständige Kontrolle über die Funktionen und das Erscheinungsbild, sodass Sie das Erscheinungsbild genauer an Ihre Geschäftsidentität anpassen können.
Schreiben und gestalten Sie das Sidebar-Markup
1
Entscheiden Sie, was in Ihrer Seitenleiste angezeigt werden soll, und schreiben Sie einen Entwurf des Seitenleisteninhalts in einem Nur-Text-Dokument für die spätere Verwendung.
2
Erstellen Sie mit Ihrer Textbearbeitungsanwendung ein neues HTML-Dokument mit Tags für das Styling. Die HTML5-Seitenstruktur sollte wie folgt aussehen:
3
Fügen Sie im Textkörper des HTML5-Dokuments ein Aside-Tag mit einer ID "sidebar" ein. Das beiseite-Tag sollte wie folgt aussehen:
4
Kopieren Sie den zuvor für Ihre Seitenleiste erstellten Inhalt und fügen Sie ihn in das Seiten-Tag ein.
5
Verwenden Sie standardkonformes Markup, um Ihren Seitenleisteninhalt in HTML5 zu konvertieren. Schließen Sie beispielsweise Header in Header-Tags, Absatzinhalte in Absatz-Tags und Linktext in Ankertags mit Hyperlink-Verweisen ein. Konsultieren Sie ein HTML-Referenzhandbuch, wenn Sie sich nicht sicher sind, wie dies funktioniert (siehe Ressourcen).
6
Speichern Sie die Datei als HTML-Dokument auf Ihrem Desktop
7
Öffnen Sie Ihren Webbrowser, wählen Sie "Datei", klicken Sie auf "Öffnen" und wählen Sie das HTML-Dokument aus, das Sie auf Ihrem Desktop gespeichert haben. Ihr Browser zeigt Ihre nicht gestaltete Seitenleiste an.
8
Gehen Sie zurück zu Ihrem Texteditor, platzieren Sie Ihren Cursor zwischen den Stil-Tags und gestalten Sie Ihr Markup mithilfe des "#sidebar"-Selektors, um Ihre Seitenleiste anzuvisieren. Wie Sie die Seitenleiste gestalten, hängt weitgehend von Ihrem Geschmack, dem Design Ihres vorhandenen Tumblr-Themas und dem Markup in Ihrer Seitenleiste ab. Verwenden Sie ein CSS3-Referenzhandbuch, um sicherzustellen, dass Sie die Eigenschaften und ihre Werte richtig zusammenstellen (siehe Ressourcen).
9
Entscheiden Sie, ob Sie Ihre Sidebar links oder rechts haben möchten und weisen Sie entsprechend eine float-Eigenschaft zu. Wenn Sie beispielsweise möchten, dass sich die Seitenleiste links vom primären Inhalt befindet, sehen Ihr Selektor "#sidebar", Ihre Eigenschaft float und Ihr Wert wie folgt aus:
Schwimmer:links; }
10
Testen Sie das Erscheinungsbild Ihrer Seitenleiste, indem Sie in Ihrem Browser auf "Aktualisieren" klicken, und passen Sie den Stil Ihres Markups weiter an, bis Sie mit dem Erscheinungsbild zufrieden sind.
Fügen Sie die Seitenleiste in Ihr Tumblr-Thema ein
1
Melden Sie sich bei Ihrem Tumblr-Dashboard an, klicken Sie in der rechten Seitenleiste auf Ihren Blog-Titel, klicken Sie auf "Anpassen" und dann auf "HTML bearbeiten", um den Tumblr-Quellcode-Editor zu öffnen.
2
Kopieren Sie das CSS aus Ihrem geöffneten HTML-Dokument und fügen Sie es am Ende des Stilbereichs Ihres Tumblr-Themas ein.
3
Suchen Sie im Tumblr-Editor nach der CSS-Auswahl für Ihren primären Inhaltsbereich, platzieren Sie den Cursor hinter der geschweiften Klammer und weisen Sie dieselbe float-Eigenschaft und denselben Wert wie Ihre Seitenleiste zu. Wenn Ihre Seitenleiste beispielsweise rechts angezeigt werden soll, weisen Sie dem Container-Selektor eine float-Eigenschaft mit dem Wert "right" zu.
4
Kopieren Sie das Seiten-Tag und seinen Inhalt aus Ihrem Texteditor und fügen Sie es in das Body-Tag Ihres Tumblr-Themas ein. Wenn die Seitenleiste rechts neben dem Hauptinhalt angezeigt werden soll, platzieren Sie sie nach diesem Container. Wenn es auf der linken Seite angezeigt werden soll, fügen Sie es vor dem primären Container ein.
5
Klicken Sie auf "Vorschau aktualisieren", klicken Sie auf "Darstellung" und klicken Sie auf die Schaltfläche "Speichern", um die Änderungen, die Sie an Ihrem Design vorgenommen haben, abzuschließen.
