TUTOS   DIY   COUTURE   WEB   DÉCO   LIFE   LOVE   CONTACT

30 avr. 2013

Leçons de Blogdesign pour les nulles : ajouter le bouton Pinterest au survol d'une image

Comme le tuto pour créer un menu pour blogger vous a bien plu, et qu'à priori, vous n'avez pas gagné à l'euromillion entre-temps (et donc vous n'avez toujours pas les fonds nécéssaires pour engager un webdesigner) voilà un autre petit tuto pour améliorer votre blog, encore une fois très simple. Aujourd'hui on se socialise, et on ajoute un script à votre modèle blogger pour que le bouton "Pinterest" apparaisse sur vos images lorsque l'on passe la souris dessus.



 C'est déjà possible de le faire assez facilement via Pinterest qui donne un petit code à coller; mais il ne marche pas très bien (chez moi, on ne peut "piner" que les images extra-larges par exemple) et il n'est pas vraiment personnalisable. On va donc bidouiller tout ça pour faire ce qu'on veut (comme toujours).

Passez votre souris sur l'image pour voir ce que ça donne :



Le code que je vais vous donner n'est pas de moi, je l'ai trouvé sur bloggersentral.com (rendons à César ce qui est à César, je ne suis pas trop fan du vol d'idées) , je me suis contentée de l'adapter un petit peu et de traduire les explications.

La marche à suivre


1. En tout premier lieu, allez dans Blogger > modèle > sauvegarder / restaurer (en haut à droite) > télécharger le modèle complet.
Comme ça, si vous faites une bêtise et que plus rien ne marche... Vous avez une sauvegarde de votre blog (oui c'est mieux hein)

2. Bien, maintenant, passons aux choses sérieuses. Retournez dans "modèle" et cliquez sur " Modifier le code HTML".
Parmi tout le chinois, cherchez cette balise :

</body>

qui se trouve vers le bas de la page.
(attention à ne pas confondre avec <body> qui est presque tout en haut)

3. Collez, JUSTE AVANT </body>, ce code :

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script> 

4. Passons maintenant à la personnalisation.

- Vous pouvez changer l'image qui s'affiche sur votre image. Perso, je trouvais celle fournir un peu trop grosse et envahissante, j'ai donc mis la mienne à la place :



Vous pouvez l'utiliser si vous le voulez ! Cliquez droit sur l'image, enregistrez sous, puis héberger là sur picasa ou autre, et le tour est joué.

Pour changer d'image, c'est très simple. Il vous suffit de récupérer l'adresse de l'image que vous souhaitez utiliser (clic droit > copier l'adresse de l'image) et de la coller à la place de la ligne du code en rouge. 

- Par défaut, l'image est au centre, mais vous pouvez très facilement changer cela. Il suffit de changer "center" par :

- topleft (en haut à gauche)
- topright (en haut à droite)
- bottomleft (en bas à gauche)
- bottomright (en bas à droite)


- Si vous voulez allez un peu plus loin, sachez qu'il est possible d'ajouter des exceptions pour une ou plusieurs images. Je vous invite pour cela à aller voir le tuto sur bloggersentral. com

- Si vous utilisez déjà JQuery sur votre blog (pour des sliders d'images, des panoramas... Si vous ne savez pas si vous l'utilisez, il y a de fortes chances que vous ne l'utilisiez pas) il est possible que le script ne fonctionne pas. Dans ce cas : supprimez la ligne en vert (et uniquement dans ce cas) Ne supprimez ni de modifiez aucune autre ligne ! 

5. BON ! Maintenant qu'on a fait tout ça, on vérifie que tout fonctionne comme il faut.

Cliquez sur "prévisualiser le modèle" .  
Je vous rassure tout de suite : en mode prévisualisation, vous ne verrez pas de logo Pinterest sur vos image. Cela nous sert à vérifier que le script de contient pas d'erreur :
- Si l'aperçu se charge, vous pouvez enregistrez votre modèle
- Si l'aperçu ne se charge pas et que vous avez un message d'erreur, vérifiez que vous n'avez pas accidentellement collé le script au mauvais endroit, mal copié l'adresse de l'image, etc... 

Vous pouvez ensuite enregistrer le modèle et aller sur votre blog pour vérifier que votre bouton Pinterest est plaçé au bon endroit, etc. 


Enjoy, et à bientôt sur Pinterest !


(ET EN PARLANT de Pinterest... Si vous voulez soutenir ma candidature pour faire partie de la Design Team de Créavéa, repinez ma participation ou "aimez" le pin... Merci merci merci, et puis c'est terminé le 5 mai donc bientôt j'arrête de vous embêter avec ça)

 

31 commentaires:

  1. Absolument génial !!! Parfait très bien expliqué pour les noobs comme moi, j'ai réussi du premier coup :)

    Seul bémol, comme à chaque fois : je ne peux épingler mes images sur mon blog car qd je valide le tableau dans lequel je veux qu'apparaisse l'image, j'ai ce message d'erreur :
    Sorry we could not fetch the image

    peux tu essayer d'épingler une de mes images pour voir si cela vient de moi stp §?

    ca me souleeeeeeeeeeeee

    RépondreSupprimer
    Réponses
    1. Je viens d'essayer, et ça met le même code d'erreur...
      Le problème ne vient à priori pas du script puisqu'il renvoie bien l'image vers pinterest, et qu'on voit la miniature...

      Si tu es sur blogger et que tes images sot hébergées sur Picasa, regarde si le/les albums ou sont stockés tes images ne sont pas protégés ou privés ( je dis ça au hasard, mais on sait jamais)

      Supprimer
    2. Je n'y avais pas pensé... j'ai essayé de chercher des solutions sur hostingPics (j'héberge chez lui mes photos) mais je ne trouve rien :( pfff

      Supprimer
  2. Merci beaucoup pour ce tuto très bien fait, j'ai quelque bases d'html mais jamais le courage de m'y pencher vraiment, alors là c'est parfait !
    J'avoue ne jamais avoir pensé à mettre ça sur notre blog, du coup c'est fait :)

    RépondreSupprimer
    Réponses
    1. De rien, et merci pour le retour, c'est super cool de voir que le tuto fonctionne !

      Supprimer
  3. Wéééééééééé trop fort! ça maaarche. Merciiii!!

    RépondreSupprimer
  4. Et voilà, c'est ajouté!!J'aime beaucoup tes tutos car ils sont très bien expliqués!!!
    J'ai encore pas mal d'heures devant moi pour perfectionner mon blog, mais je suis motivée ;)
    Estelle - Impromptu sur des folies culinaires

    RépondreSupprimer
  5. MERCI mabelllle!!! j'ai enfin pu le faire j'ai cherché ce tuto en vain!!!
    www.thehairlover.blogspot.com

    RépondreSupprimer
  6. Fait, grâce à toi! Merci pour le tuto et ton bouton, beaucoup plus subtil que l'original, que je t'ai piqué au passage! ;) J'en avais marre de retrouver mes images sur pinterest sans le lien source! C'est une bonne façon de maitriser un peu plus cet aspect!^^ merci merci!

    RépondreSupprimer
  7. Justement je me demandais comment on faisait! Je l'ai installé, ça fonctionne c'est génial! Merciiii :-)

    Bises

    RépondreSupprimer
  8. haaaaa ! je cherche depuis 2h sur le web et il n'y que le tien qui marche !!! bravo !!!!!

    RépondreSupprimer
  9. Encore un magnifique tuto! Milles mercis!

    RépondreSupprimer
  10. Super utile ! Et surtout : super efficace ! Avec le code fourni par les designers de Pinterest, notre bouton pin ne s'affichait pas sur toutes nos images, avec le tien, c'est tout nickel ! Merci beaucoup :)

    RépondreSupprimer
  11. Super !!! J'ai essayé avec un autre tuto et le bouton ne s'affichait pas sur mes photos...
    Avec le tien (en plus il est énorme on peut pas le rater j'adore !!!!) ça marche impeccable !
    MERCI MERCI MERCIIIIIII !!!!

    RépondreSupprimer
  12. Merciii grace a toi j'ai réussi a le mettre j'avais essayé un autre tuto avant mais vraiment trop nul parce que ça marchait pas et ça m'énervait lol :) Encore merci

    RépondreSupprimer
  13. Merci beaucoup pour ce tuto, grace à toi, j'ai ENFIN ce gadget, qui manquait !

    RépondreSupprimer
  14. Hello ! En faisant une recherche sur le net je tombe sur ton tuto qui me ravit ! C'est justement ce que je cherche. Malheureusement je n'y arrive pas car mon blog est sur canalblog et je n'arrive pas à trouve ou je dois modifier le code HTML, est-ce que tu saurais m'aider ??

    RépondreSupprimer
  15. merci beaucoup pour votre tuto : il est (comme d'habitude) très bien expliqué ! :D

    RépondreSupprimer
  16. Mille mercis pour cet excellent tuto ...j ai enfin mis le "gros" bouton...je verrai plus tard pour en mettre un autre plus petit

    RépondreSupprimer
  17. Merci infiniment pour le partage et les explications qui ont le mérite d'être claires quand on est une pince dans ce domaine !
    Bises

    RépondreSupprimer
  18. Super!!! Merci beaucoup! C'est super clair et ça permet aux nuls du code d'y arriver sans souci.

    RépondreSupprimer
  19. Vraiment top. C'est simple et ça fonctionne merci

    RépondreSupprimer
  20. Un grand merci pour cette astuce toute simple , c'est super !

    RépondreSupprimer
  21. Merci beaucoup pr ce tuto . Je t'ai emprunté ton bouton en attendant de trouver une solution pr pouvoir en mettre un plus personnel .

    RépondreSupprimer
  22. merci pour le super tuto ! j'ai essayé plusieurs fois mais malheureusement ça ne fonctionne pas...

    RépondreSupprimer
  23. wahou merci à toi car c'est bien al première fois que 'jarrive à faire un peu de "programmation" sur mon blog, quelle fierté ! bon en effet, le symbole est un peu gros, mais je n'arrive pas à suivre ton expli : enregistrer une image sur picassa ... faudra que je m'y repenche ...

    RépondreSupprimer
  24. Excellent article .
    j'aime beaucoup tous ces informations pour les blogs de design pour les nulles.

    RépondreSupprimer