mercredi 26 mars 2014

Créer une jolie signature avec liens cliquables vers les réseaux sociaux [tutoriel Blogger]

Web Mon Mardi ! Je sais nous sommes mercredi presque minuit. Mais ce tutoriel a été coriace le bougre et j'ai dû changer de procédé en cours de route (sinon mon pc et moi on allait se fighter sévère. J'aurais perdu, mais il aurait eu mal lui aussi). Donc voilà, aujourd'hui on va apprendre à paramétrer Blogger pour qu'en bas de chaque nouveau post il insère une signature avec des liens cliquables vers les réseaux sociaux (la classe !)




Donc on sort le cahier et le crayon, et si tu en trouves, prends aussi quelques neurones, ils ne seront pas de trop. Ça ne va pas être hyper compliqué, mais il faudra un peu de concentration.

Et ne vous laissez pas distraire par les fossettes de l'assistant du jour: Eddie Cibrian
(oui, oui, c'est bien lui qui jouait dans Sunset Beach ;)



C'est parti !

1. Créer facilement l'image de sa signature.


Les puristes hurleront, "les haters hateront", mais pour créer de jolis montages rapidement, faciles et sans se fouler, je trouve qu'il n'y a rien de plus simple que PowerPoint. Il suffit de marier zones de textes, images, formes, de colorer, de déplacer, on peut même ajouter plein d'effets et retoucher les photos, pas besoin de se prendre la tête avec des calques, etc... J'ai beau avoir Gimp et Paint Shop Pro (équivalents de Photoshop) quand j'ai la flemme, PowerPoint est mon meilleur ami. Je crée mon image en grande taille (sur une diapo en entier).


  • Astuce : si l'image est composée d'éléments avec transparence, insérer un rectangle blanc en fond (ou une autre forme).
  • Une fois qu'on a créé le montage souhaité, on sélectionne les éléments qui composent l'image, clic-droit, "Enregistrer en tant qu'image" et on choisit le format .png
  • Ensuite, si besoin, on rogne l'image (pour supprimer les marges blanches inutiles) et/ou on redimensionne à la taille souhaitée.
  • Enfin, on l'enregistre dans son album photos en ligne Google.





2. Rajouter les liens cliquables sur son image.


Pour cela, rien de très compliqué, mais il va falloir faire preuve de minutie.

Premièrement on récupère l'adresse de son image : il suffit de l'ouvrir dans l'album Google, clic-droit puis "Copier l'URL de l'image".

Dans d'autres fenêtres j'ai aussi ouvert mes pages Facebook, Google+, Instagram, Twitter, Pinterest et Hellocoton, pour avoir les adresses de chacun de mes profils sous la main.




Ensuite direction un site de d'image mapping. Il en existe plusieurs, mais mon préféré c'est HTML map découvert grâce à pétillante Crafty B. (filez sur son blog, c'est plein de bonnes infos web et de bien jolies créations. Enfin filez, mais après la fin du tuto hein ;)

Dans l'espace prévu, coller l'URL de l'image et cliquer sur "START".




L'image s'affiche, on est prêt à la mapper !

NB : on ne clique pas sur le bouton "Click here to finish" avant d'avoir TOUT fini.




Pour cela, il suffit de cliquer sur l'image sans relâcher pour délimiter une première zone cliquable. Par exemple pour Instagram ci-dessous, la zone sélectionnée apparaît en bleu. J'ai copié l'adresse de ma page Instagram, je l'ai collée dans l'espace en dessous "Enter link URL".
Dans l'espace suivant "Enter link alt" c'est le texte qui s'affichera quand les lecteurs passeront leur souris sur l'image.
Enfin dans "Enter link target" on choisit "New window" pour que le lien s'ouvre dans une nouvelle fenêtre quand les lecteurs cliqueront dessus.

On répète cette étape pour chaque lien à insérer sur l'image.

Quand c'est fait, on clique sur "Click here to finish" (Oui, là on peut!).




Maintenant qu'on est heureux d'avoir "pushé" le bouton, dans l'encart HTML Map Code on sélectionne le code qui s'affiche puis on le colle dans le bloc-note. On garde le bloc-note ouvert et par précaution on enregistre.



3. Mettre en page la signature cliquable.


Et maintenant on va rajouter 2-3 trucs dans ce code, et c'est presque fini (youpi !).
On prend son souffle et on se concentre.

1. Au début du code on ajoute la ligne suivante (en vert sur l'image ci-dessous) : 

</br> pour sauter une ligne
<div style="text-align:"center;"> si on veut que l'image soit centrée. On remplace center par left pour l'aligner à gauche et par right pour l'aligner à droite.

2. Dans le code récupéré sur le site de mapping (entouré en pointillés rouges sur l'image ci-dessous), on va mettre tous les liens sortants en NOFOLLOW. 

Pour cela on repère chaque portion de code commençant par href="http://...." (souligné en bleu ci-dessous) et juste après le guillemet qui ferme ce lien, rajouter rel="nofollow" (surligné en jaune sur l'image ci-dessous) et attention aux espaces : un seul avant et après rel="nofollow".
On fait cela pour chaque lien qui pointe vers un réseau social + pour le dernier lien qui pointe vers le site HTML Map.

3. On termine le code :
à la fin du code, refermer (en violet ci-dessous) avec </div>

4. On copie le tout. C'est quasi-terminé !


4. Paramétrer Blogger.


Ouf, voici la dernière ligne droite ! Le plus gros est fait !

  1. Maintenant dans le tableau de bord de Blogger, on va dans Paramètres > Publications et commentaires
  2. Dans "Modèles d'article" on colle le code.
  3. On clique sur "Enregistrer"
  4. On danse parce qu'on est trop magique et qu'en plus maintenant on a une signature trop "souuuuuaaaaague" (non, j'ai osé ?!)





Et maintenant à chaque fois qu'on crée un nouvel article, on a une signature qui s'affiche toute seule, comme une grande !


Bémols (parce que je te dis tout) :

  • Cette manip ne s'appliquera que sur les nouveaux articles. J'ai voulu intégrer cette signature dans le code même du blog, mais rien à faire ça coinçait avec l'image mappée. Et comme je ne suis ni une pro ni une fan de code, avant de ne plus avoir de cheveux, j'ai lâché l'affaire (oui, j'tiens à ma touffe capillaire malgré sa "touffuosité" parfois ingérable).
  • Enfin, si un jour, tu veux retirer cette image de tous tes posts, pour le coup tu seras obligé(e) soit de le faire manuellement soit de te plonger dans le code soit dernière solution (moche) : supprimer l'image dans ton album Google et à la place il y aura un espace noir qui s'affichera en bas des posts où elle apparaissait. L'option "supprimer" du menu "Publication et commentaires" permet juste d'arrêter d'insérer l'image" dans les nouveaux posts créés.
Voilà, vous savez tout et admirez ma nouvelle signature (avec une pâtisserie Ladurée dessus, hin hin hin !)
__________________________

De nombreux cadeaux à gagner !








RDV sur Hellocoton !RDV sur Twitter !RDV sur Pinterest !RDV sur Instagram !RDV sur Facebook !RDV sur Google+ !HTML Map

17 commentaires:

  1. Oh yeah Ellen!
    Franchement, tu envoies du lourd!!! Moi je dis "Standing ovation"
    J'adore!!! Va falloir que je remplace mes petits liens par l'intégration d'une belle image<3
    Bonne nuit et à très vite. Marie

    RépondreSupprimer
  2. Ton article tombe tellement à pic ! Je suis en train de travailler sur le design de mon blog et c'est pile poil ce dont j'ai besoin. Merci Ellen ! ^^

    RépondreSupprimer
  3. Merci pour ce tuto, toujours très clair comme d'habitude. Je remise ça par devers moi pour créer ma signature un de ces jours !

    RépondreSupprimer
  4. Alors là, même moi la geekette décomplexée que je suis ne connaissait pas le html mapper ! Merci pour cette jolie découverte ♥

    RépondreSupprimer
  5. Ouais trop swaaaag! Lol
    Très bon tuto.
    Et pourquoi tant de haine?! Il fallait nécessairement que tu mettes une pâtisserie dans ta signature? Ainsi me faire baver à chaque fois que je te lirai?! Méchante!!

    Bise

    RépondreSupprimer
  6. ah merci je ne connaissais pas du tout ce système mais avec OB obligé d'insérer les images une a une manuellement sur blogger c'est plus simple.

    RépondreSupprimer
  7. Ma belle, j'adore ce tuto. Je connaissais déjà le topo des images cliquables (merci Crafty B), et tout et tout. Bon, moi je ne signe jamais mes articles parce que je suis le maître en ces lieux (mes lieux, pas les tiens, hein)(quoique tu peux aussi me déclarer maître incontesté de l'univers, ça me va aussi)(et file-moi tous tes assistants immédiatement, c'est un ordre!)
    Bref. Merci de ce tuto très inspirant :) Je ne doute pas qu'il soit utilisé à bon escient par des centaines de blogueuses ! Gros bisous :)

    RépondreSupprimer
  8. Genialissime !!!! Merci merci !

    RépondreSupprimer
  9. Hello Ellen !
    J'adore, c'est super joli !
    Je ne dis pas que tu expliques mal mais en fait, je pense bien que c'est moi qui ait un problème de compréhension..:P
    J'espère quand même y arriver, un jour !
    Bisous

    RépondreSupprimer
  10. Dans ces cas là je regrette que tu ne sois pas sur wordpress, grrr^^

    RépondreSupprimer
  11. Oh mais c'est super !
    Il va falloir que je me penche sur le truc. Bien envie de faire du mappage pour organiser un peu le blog avec des liens cliquables sur des images (enfin j'me comprends ! :))
    Merci mille fois Ellen pour tous ces bons conseils ... je te ferai signe quand ce sera au point chez moi (ne pas être pressée). Des bises colorées !

    RépondreSupprimer
  12. Dommage qu'en ce moment mes neurones soient en vacances!
    Je crois que j'ai besoin d'un peu de stimulation intellectuelle. Peut-être que tu connais quelqu'un qui pourrait m'aider. Je sais pas moi...un garçon à fossettes craquantes par exemple. Sans déconner, merci pour ce tuto, je vais tenter dès que je serai moins distraite! Bisous doudou!

    RépondreSupprimer
  13. Voilà un tuto qui va m'être très très utile! Traitement d'image, la rendre active. Merci pour ces explications très claires, je mets ce lien de côté pour pouvoir m'y plonger très bientôt.

    RépondreSupprimer
  14. Alors la un grand merci je rêvais de savoir faire cela depuis des mois et puis je ne voulais pas me ruiner a payé quelqu'un pour relooker mon blog du coup tu m'a redonné envie de réouvrir mon blog sur blogger je compte fermer celui d'overblog . Un big merci j'ai encore du boulot mais sa avance déjà pas mal . NB j'ai commenté ton article (sur les fleurs suspendu avec mon compte google donc céline notizen c'est moi ! "

    RépondreSupprimer
  15. Merci pour ce tuto. Avant que de me lancer, je voudrais savoir si cela fonctionne aussi sur les modeles dynamiques (en passant par le css)? Et bravo pour votre compte instagram!

    RépondreSupprimer

Merci pour vos petits mots !
J'essaie toujours de vous répondre individuellement, laissez-moi juste un peu de temps pour le faire ;)
A bientôt par ici ou sur vos blogs !

NB : la modération est activée et les commentaires contenant des liens de sites ou de blogs sont systématiquement supprimés.