L'ajout d'une barre latérale à votre entreprise Tumblr profite au thème en fournissant des informations supplémentaires sur votre entreprise, des liens sortants vers des organisations partenaires ou des sites Web connexes ou un champ de recherche pour trouver un contenu spécifique sur le site. De nombreux thèmes sont conçus pour prendre en charge une barre latérale, mais vous pouvez également en insérer une dans votre thème à l'aide de l'éditeur HTML de Tumblr. Créer votre propre barre latérale avec un éditeur de texte et le styliser avec CSS vous donne un contrôle complet sur ses fonctions et son apparence, vous permettant de faire correspondre plus précisément son apparence à l'identité de votre entreprise.
Écrire et styliser le balisage de la barre latérale
1
Décidez de ce que vous souhaitez afficher dans votre barre latérale et rédigez un brouillon du contenu de la barre latérale dans un document en texte brut pour une utilisation ultérieure.
2
Créez un nouveau document HTML avec des balises de style à l'aide de votre application d'édition de texte. La structure de la page HTML5 doit ressembler à ce qui suit:
3
Insérez une balise de côté avec un identifiant «sidebar» dans le corps du document HTML5. La balise de côté doit ressembler à ce qui suit:
4
Copiez le contenu que vous avez composé précédemment pour votre barre latérale et collez-le dans la balise de côté.
5
Utilisez un balisage conforme aux normes pour convertir le contenu de votre barre latérale en HTML5. Par exemple, placez les en-têtes dans des balises d'en-tête, le contenu de paragraphe dans des balises de paragraphe et placez le texte du lien dans des balises d'ancrage avec des références de lien hypertexte. Consultez un guide de référence HTML si vous ne savez pas comment cela fonctionne (voir Ressources).
6
Enregistrez le fichier en tant que document HTML sur votre bureau
7
Ouvrez votre navigateur Web, sélectionnez «Fichier», cliquez sur «Ouvrir» et sélectionnez le document HTML que vous avez enregistré sur votre bureau. Votre navigateur affiche votre barre latérale sans style.
8
Revenez dans votre éditeur de texte, placez votre curseur entre les balises de style et stylisez votre balisage en vous appuyant sur le sélecteur «#sidebar» pour cibler votre barre latérale. La façon dont vous stylisez la barre latérale dépendra en grande partie de vos goûts, de la conception de votre thème Tumblr existant et du balisage dans votre barre latérale. Utilisez un guide de référence CSS3 pour vous assurer que vous composez correctement les propriétés et leurs valeurs (voir Ressources).
9
Décidez si vous voulez que votre barre latérale soit à gauche ou à droite et attribuez une propriété float en conséquence. Par exemple, si vous souhaitez que la barre latérale se trouve à gauche du contenu principal, votre sélecteur «#sidebar», votre propriété float et votre valeur ressembleront à ce qui suit:
barre latérale {
float: à gauche;
}
10
Testez l'apparence de votre barre latérale en cliquant sur Actualiser dans votre navigateur et continuez à ajuster le style de votre balisage jusqu'à ce que vous soyez satisfait de son apparence.
Insérez la barre latérale dans votre thème Tumblr
1
Connectez-vous à votre tableau de bord Tumblr, cliquez sur le titre de votre blog dans la barre latérale droite, cliquez sur «Personnaliser» et cliquez sur «Modifier le HTML» pour ouvrir l'éditeur de code source Tumblr.
2
Copiez le CSS de votre document HTML ouvert et collez-le à la fin de la région de style de votre thème Tumblr.
3
Trouvez le sélecteur CSS pour votre région de contenu principale dans l'éditeur Tumblr, placez votre curseur après l'accolade et attribuez la même propriété flottante et la même valeur que votre barre latérale. Par exemple, si votre barre latérale est censée apparaître sur la droite, attribuez une propriété float avec une valeur de «right» au sélecteur de conteneur.
4
Copiez la balise de côté et son contenu depuis votre éditeur de texte et collez-les dans la balise body de votre thème Tumblr. Si vous souhaitez que la barre latérale apparaisse à droite du contenu principal, placez-la après ce conteneur; si vous voulez qu'il apparaisse sur la gauche, collez-le avant le conteneur principal.
5
Cliquez sur "Mettre à jour l'aperçu", cliquez sur "Apparence" et cliquez sur le bouton "Enregistrer" pour finaliser les modifications que vous avez apportées à votre thème.