lundi 2 décembre 2013

... Insérer des icônes réseaux sociaux et icônes à télécharger ...



Coucou les filles,


Qui dit ordinateur réparé dit article !!!
 Eh oui il est réparé, donc je vous prépare des tutos de Noël, en plus joli que le précédent, parce qu'il faut bien avouer qu'il était très très moche, d'ailleurs il sera actualisé.

Enfin bon aujourd'hui c'est mini cours "d'informatique" enfin c'est plus de la bidouille selon Monsieur mais pour moi c'était très utile. Je vais vous expliquer, ou du moins tenter de vous expliquer comment j'ai inséré les petites icônes juste ici, là, sur la droite.


Prêtes ? .... On commence !!!


1. Images et liens


Déjà avant de commencer j'avais créé les icônes réseaux sociaux, mais on peut aussi en télécharger et les enregistrer sur notre ordinateur.
Il nous faut également les adresses internet des nos réseaux sociaux ou autres sites internet ... 

On peut créer un fichier afin de regrouper toutes les adresses internet. Il suffit de copier et coller les liens vers lesquels on souhaite que nos visiteurs soient redirigés lorsqu'ils cliquent sur les icônes.

 Par exemple pour moi ça donnerait :

A propos

http://mamzelle-paillettes.blogspot.fr/p/a-propos_21.html
Hellocoton 
 http://www.hellocoton.fr/mapage/mamzelle-paillettes
Instagram
 http://instagram.com/maliceetdelices#
Pinterest
 https://www.pinterest.com/MaliceetDelices/
Boutique 
 http://www.alittlemarket.com/boutique/malice_et_delices-437399.html


2. Héberger les images

En fait ça c'est une des choses vraiment très importante. En fait il faut que les images soient quelque part dans "l'univers internet", parce que lorsqu'elles sont sur nos ordinateurs, personnes ne peut y avoir accès. Donc pour héberger les images il y a différents sites, moi j'utilise Picasaweb c'est le plus simple puisque ça fonctionne avec Blogger, j'avais déjà des images hébergées sur ce site. Si vous avez un blog Wordpress ou autre vous pouvez regarder s'il y a un hébergeur particulier, où sont vos photos et si vous pouvez en héberger d'autres depuis votre ordinateur.





Maintenant que nos images sont hébergées, il faut récupérer leurs liens.
Donc, on clic sur une des images ( sur Picasaweb ou autre ),  il faut faire un clic droit sur l'image puis cliquer sur "Copier l'adresse de l'image"





3. Créer les liens "clicables"

Bon c'est là qu'on attaque la bidouille, il faut aller sur le site http://www.html-map.com/ Une fois sur le site, dans la case "Enter your image's URL" on colle l'adresse de l'image, puis on clique sur "Start !" Là notre image doit apparaitre.





Maintenant il faut définir la zone sur laquelle on souhaite que le lien soit actif, donc la zone où nos visiteurs pourront cliquer. En passant notre souris sur l'image elle se transforme en croix, il suffit de cliquer et d’étirer les rectangles. La zone bleutée sera donc la zone sur laquelle on pourra cliquer.
 Ensuite dans "Enter link URL" il faut coller l'adresse du site correspondant, pour mon exemple l'adresse Hellocoton. La case "Enter link alt" restera vide. On peut également choisir dans "Enter link target" si on souhaite que le lien s'ouvre dans la même fenêtre ou dans une nouvelle.






S'il n'y a qu'une image c'est fini donc clic sur "Click here to finish" si comme moi il y en a plusieurs,on refait pareil avec les autres icônes, et leurs liens respectifs ( on créer le rectangle, on colle le lien, on choisi les fenêtres, puis on créer le rectangle suivant etc ....) une fois que toutes les images ont leur zone et leur lien définis, on clic sur "Click here to finish". Normalement on doit avoir deux codes qui s'affichent, le "HTML Map Code" celui qui nous intéresse et qu'il faut copier, et le "CSS Map Code" Je sais pas vous mais pour moi c'est du chinois.



Liens cliquables pour colonne de blog


4. Insérer tout ça dans le blog

Alors maintenant on retourne dans les paramètres de notre blog. Je vous explique comment je fais, à mon avis vous devez retrouver à peu près les même catégories si vous n'êtes pas sur Blogger. Donc on va dans "Mise en page" puis on clic sur "Ajouter un gadget" 




Dans la liste des gadgets, on choisi "HTML/javascript". On ne note rien dans le titre, et on colle le "HTML Map Code" dans la case Contenu, puis on Enregistre.

Dernier petit détail pour centrer l'image, ou même le titre des articles il faut noter :
<div style="text-align:center;"> Le texte ou le code  HTML de l'image </div>



TADAMMM !!!! A vous de jouer !!!
J’espère que c'est assez compréhensible, et que ça pourra vous être utile.



Je vous laisse avec quelques icônes pailletées, que j'ai faites pour mon blog.








 N'hésitez pas à me dire si ça vous plaît et si vous voulez avoir des icônes ou autre petites choses à télécharger.




Je vous fais des bizoux pailletés.
 


HTML Map

3 commentaires:

  1. Merciiiii beaucoup pour cet article !! J'ai réussi :D !!!

    RépondreSupprimer
  2. Merci beaucoup pour ce tuto, c'est exactement ce que je cherchai...Je testerai dès que j'aurai réussi à récupérer des icônes sympa...les tiens sont vraiment mortels, et ton blog est très joli, j'aime beaucoup ce qu'il dégage...

    RépondreSupprimer
  3. Merci beaucoup!! Rien que pour centrer ma sidebar tu m'as été d'une grande aide! ^^

    RépondreSupprimer

Un petit mot à me dire ?