On continue à modifier le pied de nos articles aujourd'hui en remplaçant les horribles boutons de partage Blogger par de jolis boutons en HTML et CSS !
C'est parti pour les explications !
Sommaire
- Faire une sauvegarde de son thème
- Ajouter Font Awesome à son blog
- Les codes HTML des différents boutons
- Où coller le code des boutons de partage
- Cacher les boutons par défaut de Blogger
- Modifier l'apparence des boutons avec du CSS
- Modifier le fond des boutons de partage
- Modifier la taille des boutons
- Modifier la taille des icônes
- Centrer les icônes
- Modifier la bordure des boutons de partage
- Définir des bords arrondis aux boutons
- Modifier la couleur des icônes
- Modifier les icônes au survol de la souris
- Modifier l'espace autour des boutons de partage
- Modifier l'espace entre les boutons de partage
Faire une sauvegarde de son thème
Comme d'habitude, faites une sauvegarde de votre thème avant toute modification de celui-ci ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.
Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.
Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)
Ajouter Font Awesome à son blog
Nous allons utiliser Font Awesome pour générer les icônes des différents réseaux sociaux, au lieu d'utiliser des images. On pourra ainsi modifier facilement la couleur des icônes en utilisant simplement du CSS ! ;)Pour installer Font Awesome sur son blog, rien de plus simple. Commencez par aller dans Modèle > Modifier le code HTML :
Cliquez sur le triangle noir à gauche de
<b:skin>...</b:skin> :
Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F (ou Cmd et F sur Mac) en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code, collez :
</head>Juste au-dessus de cette ligne collez :
<!-- Font Awesome -->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>Comment fonctionne Font Awesome ? A chaque icône correspond un code HTML de type :
<i class="fa fa-instagram"></i>Pour voir tous les icônes disponibles vous pouvez jeter un œil à la liste des icônes ici.
Les codes HTML des différents boutons
Voici le code HTML auquel nous allons ajouter les codes pour chaque bouton :<!-- Début Boutons de partage CSS -->
<div class="btn-partage">
<!-- Coller les codes des boutons ici -->
</div>
<!-- Fin Boutons de partage CSS -->
<!-- Facebook -->
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Partager sur Facebook'>
<i class='fa fa-facebook'/>
</a>
<!-- Twitter-->
<a expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Partager sur Twitter'>
<i class='fa fa-twitter'/>
</a>
<!-- Pinterest-->
<a expr:href='"http://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&description=" + data:post.title + "&media=" + data:post.firstImageUrl' title='Partager sur Pinterest'>
<i data-pin-custom="true" class='fa fa-pinterest-p'/>
</a>
Google+
<!-- Google+ -->
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Partager sur Google+'>
<i class='fa fa-google-plus'/>
</a>
<!-- E-mail -->
<a expr:href='"mailto:?Subject=Un%20super%20article%20de%20" + data:blog.title + "&body=" + data:post.url' rel='nofollow' target='_blank' title='Partager par Email'>
<i class="fa fa-envelope"/>
</a>
<!-- Coller les codes des boutons ici -->
<!-- Début Boutons de partage CSS -->
<div class="btn-partage">
<!-- Facebook -->
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Partager sur Facebook'>
<i class='fa fa-facebook'/>
</a>
<!-- Pinterest-->
<a expr:href='"http://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&description=" + data:post.title + "&media=" + data:post.firstImageUrl' title='Partager sur Pinterest'>
<i data-pin-custom="true" class='fa fa-pinterest-p'/>
</a>
<!-- Google+ -->
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Partager sur Google+'>
<i class='fa fa-google-plus'/>
</a>
</div>
<!-- Fin Boutons de partage CSS -->Où coller le code des boutons de partage
On va maintenant chercher l'endroit où coller le code des boutons de partage.Il faut tout d'abord comprendre comment fonctionne le pied d'article. Celui-ci est composé de 3 parties :
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>
Vous trouverez ces codes 2 fois dans votre code HTML. En effet, il y a le code pour la version mobile de votre site et le code pour la version web de votre site (celui avec le plus grand nombre à sa gauche).
Si vous voulez ajouter vos nouveaux boutons dans la 1ère partie, par exemple, alors collez le code pour vos boutons après la ligne :
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
Attention : Si vous ne trouvez pas ces codes alors essayez de chercher un des codes suivants :
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>Si vous trouvez un de ces codes, alors il faut d'abord supprimer le signe / à la fin de la ligne, par exemple :
<div class='post-footer-line post-footer-line-1'/><div class='post-footer-line post-footer-line-1'></div><!-- Fin Boutons de partage CSS --><!-- Fin Boutons de partage CSS -->
</div>
Et visuellement on obtient :
Pour l'instant ça ne ressemble pas à grand chose et on voit toujours les boutons de partage par défaut de Blogger.
Cacher les boutons par défaut de Blogger
Au lieu de supprimer les boutons par défaut de Blogger on va simplement les cacher. Pourquoi ? Tout simplement pour pouvoir plus facilement revenir en arrière si besoin.Pour cacher les boutons de partage par défaut on va utiliser du code CSS.
Cherchez le code suivant :
]]></b:skin>
/* Permet de cacher les boutons de partage par défaut de Google
-- Pour remettre ces boutons sur votre blog supprimez ce code CSS */
.post-share-buttons.goog-inline-block {
display: none !important;
}
Modifier l'apparence des boutons avec du CSS
Pour finir nous allons modifier l'apparence des boutons de partage : fond, bordure, couleurs.Voici les codes CSS que nous allons utiliser pour modifier l'apparence des boutons :
/* Contenant des boutons de partage */
.btn-partage {
margin-right: 0 !important;
}
/* Apparence générale des boutons */
.btn-partage a {
display: inline-block;
}
/* Apparence des icônes */
.btn-partage .fa {
}
/* Apparence des boutons au survol de la souris */
.btn-partage a:hover {
}Modifier le fond des boutons de partage
Pour modifier la couleur de fond ajoutez le code suivant : background-color: #CDDBC2; /* Couleur de fond */
/* Apparence générale des boutons */
.btn-partage a {
display: inline-block;
}/* Apparence générale des boutons */
.btn-partage a {
display: inline-block;
background-color: #CDDBC2; /* Couleur de fond */
}Modifiez le code de la couleur
#CDDBC2 par celle de votre choix. Vous pouvez utiliser le site code-couleur pour trouver le code d'une couleur.Modifier la taille des boutons
Pour modifier la taille des boutons, ajoutez les lignes suivantes avant le signe } : width: 30px; /* Largeur du bouton */
height: 30px; /* Hauteur du bouton */
/* Apparence générale des boutons */
.btn-partage a {
display: inline-block;
background-color: #CDDBC2; /* Couleur de fond */
width: 30px; /* Largeur du bouton */
height: 30px; /* Hauteur du bouton */
}Modifier la taille des icônes
Pour modifier la taille de icônes, ajoutez la ligne suivant : font-size: 14px; /* Taille des icônes */
/* Apparence des icônes */
.btn-partage .fa {
font-size: 14px; /* Taille des icônes */
}
/* Apparence des icônes */
.btn-partage .fa {
font-size: 14px; /* Taille des icônes */
}Centrer les icônes
Pour centrer les icônes il faut ajouter de l'espace avant ceux-ci pour les déplacer vers le bas.Pour cela ajoutez la ligne suivante :
padding-top: 10px; /* Espace au-dessus des icônes */
/* Apparence des icônes */
.btn-partage .fa {
font-size: 14px; /* Taille des icônes */
padding-top: 10px; /* Espace au-dessus des icônes */
}
10px par celle qui vous intéresse. En augmentant cette valeur vous déplacerez les icônes vers le bas, et en diminuant cette valeur vous déplacerez les icônes vers le haut.Pour l'instant on obtient visuellement :
Modifier la bordure des boutons de partage
Pour modifier la bordure des boutons de partage ajoutez les lignes suivantes : border-style: solid; /* Style de la bordure */
border-width: 1px; /* Epaisseur en pixels de la bordure */
border-color: #CDDBC2; /* Couleur de la bordure */
/* Apparence générale des boutons */
/* Apparence générale des boutons */
.btn-partage a {
display: inline-block;
background-color: #CDDBC2; /* Couleur de fond */
width: 30px; /* Largeur du bouton */
height: 30px; /* Hauteur du bouton */
border-style: solid; /* Style de la bordure */
border-width: 1px; /* Epaisseur en pixels de la bordure */
border-color: #CDDBC2; /* Couleur de la bordure */
}Définir des bords arrondis aux boutons
Pour définir des bords arrondis à vos boutons, ajoutez les lignes suivantes au même code CSS, avant le signe } : -webkit-border-radius: 50%; /* Bord arrondis */
border-radius: 50%; /* Bord arrondis */
/* Apparence générale des boutons */
.btn-partage a {
display: inline-block;
background-color: #CDDBC2; /* Couleur de fond */
width: 30px; /* Largeur du bouton */
height: 30px; /* Hauteur du bouton */
border-style: solid; /* Style de la bordure */
border-width: 1px; /* Epaisseur en pixels de la bordure */
border-color: #CDDBC2; /* Couleur de la bordure */
-webkit-border-radius: 50%; /* Bord arrondis */
border-radius: 50%; /* Bord arrondis */
}
50% permet d'obtenir des boutons ronds, mais vous pouvez remplacer cette valeur en % par une valeur en pixels, par exemple 10px pour définir des coins arrondis seulement.Modifier la couleur des icônes
Pour modifier la couleur des icônes, ajoutez la ligne suivante : color: #427654; /* Couleur des icônes */
/* Apparence générale des boutons */
.btn-partage a {
display: inline-block;
background-color: #CDDBC2; /* Couleur de fond */
width: 30px; /* Largeur du bouton */
height: 30px; /* Hauteur du bouton */
border-style: solid; /* Style de la bordure */
border-width: 1px; /* Epaisseur en pixels de la bordure */
border-color: #CDDBC2; /* Couleur de la bordure */
-webkit-border-radius: 50%; /* Bord arrondis */
border-radius: 50%; /* Bord arrondis */
color: #427654; /* Couleur des icônes */
}
Visuellement on obtient :
Modifier les icônes au survol de la souris
Pour modifier l'apparence des icônes au survol de la souris on utilise le code CSS :/* Apparence des boutons au survol de la souris */
.btn-partage a:hover {
}Par exemple, si je souhaites simplement modifier la couleur de fond du bouton pour un fond blanc alors j'écris :
/* Apparence des boutons au survol de la souris */
.btn-partage a:hover {
background-color: #ffffff; /* Couleur de fond */
}
Modifier l'espace autour des boutons de partage
Pour modifier l'espace autour des boutons de partage ajoutez les codes suivants : margin-top: 10px; /* Espace au-dessus */
margin-bottom: 10px; /*Espace en-dessous */
/* Contenant des boutons de partage */
.btn-partage {
margin-right: 0 !important;
}
/* Contenant des boutons de partage */
.btn-partage {
margin-right: 0 !important;
margin-top: 10px; /* Espace au-dessus */
margin-bottom: 10px; /*Espace en-dessous */
}
10px par la valeur de votre choix.Modifier l'espace entre les boutons de partage
Pour modifier l'espace entre les boutons, ajoutez les lignes suivantes : margin-left: 3px; /* Espace à gauche */
margin-right: 3px; /* Espace à droite */
/* Apparence générale des boutons */
/* Apparence générale des boutons */
.btn-partage a {
display: inline-block;
background-color: #CDDBC2; /* Couleur de fond */
width: 30px; /* Largeur du bouton */
height: 30px; /* Hauteur du bouton */
border-style: solid; /* Style de la bordure */
border-width: 1px; /* Epaisseur en pixels de la bordure */
border-color: #CDDBC2; /* Couleur de la bordure */
-webkit-border-radius: 50%; /* Bord arrondis */
border-radius: 50%; /* Bord arrondis */
color: #427654; /* Couleur des icônes */
margin-left: 3px; /* Espace à gauche */
margin-right: 3px; /* Espace à droite */
}
3px par la valeur de votre choix.Visuellement on obtient :
Sauvegardez, et voilà ! Vous savez maintenant créer des boutons de partage en HTML et CSS pour vos articles ! ;)
