Das Hinzufügen einer Seitenleiste zu Ihrem Unternehmen Tumblr kommt dem Thema zugute, indem zusätzliche Informationen zu Ihrem Unternehmen, ausgehende Links zu Partnerorganisationen oder verwandten Websites oder ein Suchfeld zum Auffinden bestimmter Inhalte auf der Website bereitgestellt werden. Viele Designs unterstützen eine Seitenleiste. Sie können jedoch auch eines mithilfe des HTML-Editors von Tumblr in Ihr Design einfügen. Wenn Sie Ihre 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 Inhalts der Seitenleiste zur späteren Verwendung in ein Nur-Text-Dokument.
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 ein Seiten-Tag mit der ID „Seitenleiste“ in den Hauptteil des HTML5-Dokuments 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
Kehren Sie zu Ihrem Texteditor zurück, platzieren Sie den Cursor zwischen den Stil-Tags und formatieren Sie Ihr Markup. Verwenden Sie dazu die Auswahl „#sidebar“, um auf Ihre Seitenleiste zu zielen. 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 korrekt zusammenstellen (siehe Ressourcen).
9
Entscheiden Sie, ob Ihre Seitenleiste links oder rechts angezeigt werden soll, und weisen Sie eine Float-Eigenschaft entsprechend 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:
Seitenleiste {
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 den CSS-Selektor 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 vom primären Inhalt angezeigt werden soll, platzieren Sie sie hinter diesem Container. Wenn Sie möchten, dass es links angezeigt wird, 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 abzuschließen, die Sie an Ihrem Thema vorgenommen haben.