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.
_________________________
C'est parti !
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).
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".
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.
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) :
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
4. On copie le tout. C'est quasi-terminé !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. Paramétrer Blogger.
Ouf, voici la dernière ligne droite ! Le plus gros est fait !
- Maintenant dans le tableau de bord de Blogger, on va dans Paramètres > Publications et commentaires
- Dans "Modèles d'article" on colle le code.
- On clique sur "Enregistrer"
- 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 !
