Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Un petit tutoriel assez simple aujourd'hui : comment ajouter un bouton Pinterest "Pin it" qui apparaît au survol des vos images.

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Allez c'est parti pour les explications :)


Sauvegarde du thème

Je vous conseil fortement de faire une sauvegarde avant toute modification, comme toujours. C'est vraiment indispensable si vous faites une erreur, car on peut facilement revenir en arrière.

Cliquez sur Modèle à partir de votre tableau de bord, puis sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez ensuite sur Télécharger le modèle complet et sauvegardez le fichier sur votre ordinateur :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

En cas d'erreur il suffira de cliquer sur Choisissez un fichier et de sélectionner ce fichier.

Création du bouton Pin it

Pour créer votre bouton et générer le code que vous allez devoir inclure dans votre thème, il faut aller sur le site de Pinterest sur la page Générateur de widget.

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

A la ligne Type de bouton cliquez sur Survol d'image.
Sous cette ligne vous pouvez choisir l'apparence du bouton :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Voici un aperçu des différentes possibilités :

Rectangulaires

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger
Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Ronds

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Une fois que vous avez sélectionné l'apparence de votre bouton, descendez la page. Sous Copier le code vous trouverez le code à coller dans votre code HTML.
Copiez donc ce code :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Ajout du bouton à son blog

Allez maintenant sur le tableau de bord de votre blog. Sous Modèle, cliquez sur Modifier le code HTML :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Cliquez sur le rectangle noir à gauche de <b:skin>...</b:skin> :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte, passez à la suite.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.
Dans cette boîte de recherche collez la ligne suivante :
<head>
Juste en-dessous de cette ligne collez le code de votre bouton :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Attention ! Il y un petit problème entre Blogger et le code de Pinterest. Pour régler ce problème il faut remplacer les 2 mots suivants du code :
async defer
par :
async="true" defer="true"
Sauvegardez, et voilà ! Un bouton Pinterest Pin it s'affiche maintenant automatiquement sur les images de votre blog ! ;)

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Bon blogging !

Autres articles

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger