Styling onglets de page sur Blogger
Modification de l'apparence des onglets de page sur Blogger est relativement facile. Il peut se faire via les menus intégrés de concepteur de modèles ou en utilisant le CSS personnalisé. Cependant, les changements seront appliqués à tous les onglets.
onglets de navigation multicolores USA Today
Oui, il est possible, avec quelques modifications HTML et CSS bien sûr. Voir la démo sur notre blog vitrine widget. Notez que l'onglet « Outils de référencement » a une couleur de fond différente que le reste des onglets.
Ce tweak est un processus en deux étapes et est limitée aux modèles de mise en page seulement (il ne fonctionnera pas sur des modèles dynamiques). Tout d'abord vous devez attribuer un identifiant à chaque onglet en éditant le modèle gadget Pages HTML. Une fois que vous avez fait cela, vous pouvez appliquer un style unique à un onglet en faisant référence à son identifiant dans CSS.
Mettons-nous au travail:
1. L'attribution d'un identifiant unique (s) à chaque onglet
Pour que vous puissiez cibler individuellement chaque onglet en CSS, chaque onglet doit avoir un identifiant, et il doit être unique. Dans notre cas, nous utiliserons un nom de classe (s) comme identifiant. Voici comment:
- Aller au modèle> Modifier le code HTML> continuer, cliquez sur la case à cocher Modèles Widget Expand.
- Localisez votre gadget Pages en trouvant cette ligne de code:
- Plusieurs lignes ci-dessous que vous trouverez ces codes:
- Remplacez-le par celui-ci:
Ce que le nouveau code n'ajoute le titre de chaque onglet à l'classname de l'onglet, permettant ainsi à chaque onglet à être référencé par son titre plus tard.
2. L'application du style
Pour le style d'un onglet, allez à modèle> Personnaliser> Avancé> Ajouter CSS et entrez un extrait de CSS dans la zone CSS personnalisé. L'extrait doit être au format suivant:
Pour un nom de l'onglet de plusieurs mots, chaque mot deviendra un nom de classe. Donc, si est « Outils de référencement » le nom de votre onglet, vous pouvez référencer l'onglet soit en utilisant:- "SEO", comme ceci:
- ou « Tools », comme celui-ci: