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).
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.
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 :
- 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 :
<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFf52Rgygr7Vry44_ppDcV7FcKmdqeI8tYaGVcw1samxwKFJQW6G98GpRRmSTZmvEN__Q1H-V-kmI_MBJP5He-cLZbra_iEnbxk0ua9kmVHb5qZ3Pm9dtApnDcv2Bhwx4ZLZ3QLvNgvzMS/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)
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.
(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)
- 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)
Absolument génial !!! Parfait très bien expliqué pour les noobs comme moi, j'ai réussi du premier coup :)
RépondreSupprimerSeul 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
Je viens d'essayer, et ça met le même code d'erreur...
SupprimerLe 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)
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
SupprimerMerci 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 !
RépondreSupprimerJ'avoue ne jamais avoir pensé à mettre ça sur notre blog, du coup c'est fait :)
De rien, et merci pour le retour, c'est super cool de voir que le tuto fonctionne !
SupprimerWéééééééééé trop fort! ça maaarche. Merciiii!!
RépondreSupprimerDe rien !
SupprimerEt voilà, c'est ajouté!!J'aime beaucoup tes tutos car ils sont très bien expliqués!!!
RépondreSupprimerJ'ai encore pas mal d'heures devant moi pour perfectionner mon blog, mais je suis motivée ;)
Estelle - Impromptu sur des folies culinaires
MERCI mabelllle!!! j'ai enfin pu le faire j'ai cherché ce tuto en vain!!!
RépondreSupprimerwww.thehairlover.blogspot.com
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épondreSupprimerJustement je me demandais comment on faisait! Je l'ai installé, ça fonctionne c'est génial! Merciiii :-)
RépondreSupprimerBises
haaaaa ! je cherche depuis 2h sur le web et il n'y que le tien qui marche !!! bravo !!!!!
RépondreSupprimerEncore un magnifique tuto! Milles mercis!
RépondreSupprimerSuper 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épondreSupprimerSuper !!! J'ai essayé avec un autre tuto et le bouton ne s'affichait pas sur mes photos...
RépondreSupprimerAvec le tien (en plus il est énorme on peut pas le rater j'adore !!!!) ça marche impeccable !
MERCI MERCI MERCIIIIIII !!!!
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épondreSupprimerMerci beaucoup pour ce tuto, grace à toi, j'ai ENFIN ce gadget, qui manquait !
RépondreSupprimerHello ! 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épondreSupprimerMerci , j 'ai réussi !!!
RépondreSupprimerJuste, Merci! :D
RépondreSupprimermerci beaucoup pour votre tuto : il est (comme d'habitude) très bien expliqué ! :D
RépondreSupprimerMille mercis pour cet excellent tuto ...j ai enfin mis le "gros" bouton...je verrai plus tard pour en mettre un autre plus petit
RépondreSupprimerMerci infiniment pour le partage et les explications qui ont le mérite d'être claires quand on est une pince dans ce domaine !
RépondreSupprimerBises
Super!!! Merci beaucoup! C'est super clair et ça permet aux nuls du code d'y arriver sans souci.
RépondreSupprimerVraiment top. C'est simple et ça fonctionne merci
RépondreSupprimerUn grand merci pour cette astuce toute simple , c'est super !
RépondreSupprimerMerci beaucoup pr ce tuto . Je t'ai emprunté ton bouton en attendant de trouver une solution pr pouvoir en mettre un plus personnel .
RépondreSupprimerJ'ai réussi aussi merci !! ^^
RépondreSupprimermerci pour le super tuto ! j'ai essayé plusieurs fois mais malheureusement ça ne fonctionne pas...
RépondreSupprimerwahou 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épondreSupprimerExcellent article .
RépondreSupprimerj'aime beaucoup tous ces informations pour les blogs de design pour les nulles.
Hi my friend! I want to say that this post is awesome, great written and include approximately all important infos.
RépondreSupprimerI would like to look extra posts like this .경마사이트