Comment ajouter du CSS dans Blogger – Comprendre le CSS dans Blogger

Vous voulez ajouter des effets sympas à votre blog comme la chute de neige, les polices 3D, les textes au néon, les ombres de boîte ou vous voulez faire passer la conception de votre blog au niveau supérieur, alors tout ce dont vous avez besoin est d’insérer quelques lignes de CSS personnalisé sur votre blog. CSS, c’est quoi ? CSS est connu sous le nom de feuille de style en cascade qui, en simple, sert à décrire l’apparence de votre blog ou, en d’autres termes, il est utilisé pour définir la façon dont les éléments HTML doivent être affichés. Avant d’en apprendre davantage sur le CSS, il est préférable de connaître le HTML. Il y a des tonnes de ressources sur CSS et même un débutant peut facilement comprendre les éléments de base du CSS, mais le maîtriser prendra beaucoup de temps et de connaissances pratiques.

CSS joue un rôle très important dans l’embellissement des éléments et tous les modèles Blogger auront par défaut leur propre code CSS. À tout moment, si vous souhaitez embellir davantage la conception de votre blog, vous pouvez ajouter des CSS personnalisés. Dans quelques-uns de nos tutoriels blogger, nous avons mentionné que nos visiteurs ajoutaient des codes CSS, par exemple jetez un œil à ce post, mais la plupart des débutants ne savent pas où ajouter le CSS. La plupart d’entre eux ouvrent simplement leurs fichiers de modèle, découvrent les balises b:skin et, d’une certaine manière, finissent par gâcher leurs codes de modèle. Blogger vous permet d’ajouter votre propre CSS personnalisé dans template designer qui remplace le code CSS par défaut afin d’obtenir le look attrayant de votre blog. Ici, nous allons vous montrer comment insérer / ajouter du CSS dans Blogger.

Comment insérer / ajouter du CSS dans Blogger – Comprendre le CSS dans Blogger

Avant d’ajouter du CSS, vous devez écrire du CSS et avant de pouvoir écrire le code de style CSS, vous devez trouver les sélecteurs pour lesquels vous souhaitez modifier le style. Vous pouvez utiliser les outils de développement de vos navigateurs pour inspecter l’élément, ici nous n’allons pas en détail à ce sujet. Par exemple, vous connaissez les balises h1, h2, h3, h4, h5 et h6 en général et pour modifier ces polices, vous pouvez ajouter des CSS comme ceci ci-dessous.

h1 {font-family: "Times New Roman", Times, serif;font-size: 15px;font-weight: bold;color: rgb(56, 77, 187)}

Mais que ferez-vous pour changer la mise en page, le style d’onglet de menu, les liens, la famille de polices, l’alignement, l’arrière-plan ou la couleur du texte lorsque vous ne connaissez pas la classe d’élément. C’est là que vous devez utiliser l’outil des développeurs de vos navigateurs. Faites un clic droit sur un élément, puis cliquez sur inspecter l’élément où vous verrez les éléments à gauche et CSS à droite. Modifiez le code CSS et voyez comment les modifications résultent, par exemple voici le code CSS pour l’onglet de menu que vous trouverez différent sur votre modèle.

.tabs-inner .widget li a:hover {color: #fff;background-color: #FF9900;text-decoration: underline;display: inline-block;padding: .6em 1em;font: normal normal 15px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;border-left: 1px solid #ffffff;border-right: 1px solid #dddddd;}

En utilisant l’outil inspecter l’élément, vous pouvez prévisualiser les modifications CSS pour n’importe quel élément et lorsque vous obtenez le look souhaité, saisissez le code CSS et exécutez-le dans votre blog.

Appliquer CSS dans Blogger

Il existe deux façons d’implémenter CSS dans Blogger, l’une consiste à modifier directement les fichiers de modèle et l’autre méthode la plus simple consiste à utiliser l’option ajouter CSS dans Blogger template designer.

Ajouter du CSS à l’aide de Blogger template designer

Ajouter du CSS ici est le moyen le plus simple et le plus sûr car cela n’affecte pas vos fichiers de modèle de base. En plus d’ajouter du CSS personnalisé, Blogger template designer vous permet de modifier facilement l’arrière-plan de votre blog, en ajustant la largeur, la mise en page, les styles de police, les couleurs, la zone du gadget, le contenu du pied de page, etc.

• Connectez-vous à votre blog Blogger, allez dans Modèles, puis cliquez sur personnaliser
• Maintenant, vous verrez la page Blogger template designer avec 5 options
• Cliquez sur l’option avancée, faites défiler les sous-éléments vers le bas, puis choisissez Ajouter CSS.
• Ensuite, vous verrez un champ à votre droite et c’est là que vous devez ajouter votre CSS personnalisé.

Ajoutez le code CSS personnalisé ci-dessus, consultez les modifications ci-dessous et lorsque tout est terminé, cliquez sur “Appliquer au blog” en haut.

Ajout de CSS en éditant votre modèle Blogger

L’autre façon d’appliquer du CSS consiste à modifier directement le CSS de base ou à ajouter un CSS personnalisé à votre fichier de modèle. Nous ne suggérons pas cette méthode pour les débutants car une mauvaise utilisation peut conduire à casser votre modèle. Donc, avant d’ajouter du CSS en utilisant cette méthode, assurez-vous de sauvegarder; voici comment sauvegarder et restaurer le modèle Blogger.

• Dans votre tableau de bord Blogger, allez dans Modèle, puis cliquez sur modifier HTML
• Maintenant, vous verrez vos codes de modèle, appuyez simplement sur CTRL + F pour rechercher, puis recherchez <b:skin >
• Développez le <b:skin > et vous verrez le CSS de votre modèle de blog s’afficher.

Lire aussi: Comment faire une sauvegarde complète du blog Blogger

Commencez à éditer le CSS existant ou vous pouvez ajouter votre CSS personnalisé, mais ici vous n’obtenez pas l’option d’aperçu que vous obtenez dans Blogger template designer. Enfin, enregistrez votre modèle une fois terminé.

J’espère que cet article vous a guidé pour ajouter du CSS dans Blogger. Commencez à embellir votre blog et pour obtenir plus de mises à jour de ce type, abonnez-vous à nos flux RSS.