Utiliser la balise "mailto" sur son blog

astuce-email-balise-mailto

Utiliser la balise "mailto" sur son blog

Aujourd’hui je vous présente un nouveau tutoriel, plutôt simple à réaliser, mais très pratique pour vos lecteurs. Nous allons voir comment utiliser la balise « mailto » sur son blog , c’est à dire que lorsque vos lecteurs cliqueront sur une icône d’enveloppe ou n’importe quelle image de votre choix, la boîte mail s’ouvrira automatiquement avec le champ adresse pré rempli  avec votre adresse email, fantastique n’est ce  pas?

Evidemment ce tutoriel est valable pour toutes plateformes; blog wordpress.com ou .org comme pour blogger, il suffira d’ajouter un widget text HTML chez wordpress et un gadget HTML/JAVASCRIPT chez blogger.

 

email-blog-design Créer ou trouver votre image à afficher sur votre blog (vous en trouverez en fin d’article, j’en ai crée spécialement pour vous)

 

 

 

email-blog-design Rendez vous sur HTML map, entrez le lien de votre image en étape 1 (hébergée au préalable sur photobucket si nécessaire), cliquez sur start puis dans la partie 2, sélectionnez la totalité de l’image ou la zone qui sera cliquable.

mailto-image-blog

 

email-blog-design Générez le code de votre image, en  remplissant les champs.

Dans « enter link url » vous mettrez simplement mailto:votrenom@gmail.com puis dans « enter link alt » vous pouvez mettre mail, email, contact enfin ce que vous voulez ça n’apparaîtra pas sur votre blog, pour « enter link target » laissez l’option « same window ». Cliquez sur click here to finish.

contact-blogger-wordpress-blog

 

email-blog-design Ajouter un gadget text html sur wordpress et HTML/JAVASCRIPT sur blogger, puis, collez le code « html map code » généré par le site.

contact-image-blogger-wordpress

email-blog-design  Enregistrez les paramètres sur votre blog , et voilà le resulat!

mail HTML Map

 

Comme d’habitude, je vous ai crée un petit recueil d’image « contact« , d’une dimension de 100×100 pixels. Pour les installer, vous pouvez regarder dans la partie « installation » en fin de mon article « Ajouter un bouton de retour vers le haut de la page ».

 

[nggallery id=5]

 

J’espère que cet article vous aura plu, n’hésitez pas à donner vos avis, et à me laisser un petit commentaire si vous avez installé l’image « contact »  :)

15 Commentaires
  • benebeauyblog

    16 septembre 2014 at 9 h 31 min Répondre

    Heyyy ! 😀 Merci beaucoup pour ce tuto très bien expliqué ^^ Puisque je l’ai intégré sur mon blog ! (Grâce à l’image que tu m’as faites avec le petit mail) :) Bisouuuus

    • graphicart

      16 septembre 2014 at 11 h 22 min Répondre

      supppper j’ai vu ça ça donne très bien :-)

  • Jesy

    16 septembre 2014 at 10 h 29 min Répondre

    Coucou, ce tutoriel tombe super bien je cherchais justement comment faire pour « lier » mon icon a une adresse mail haha merci beaucoup pour ce tuto au top comme d’hab :)

    • graphicart

      16 septembre 2014 at 11 h 23 min Répondre

      Hey Jesy! ton blog s’est refait une beauté? c’est sympa en tout cas! oui j’avoue finalement ça tombe à pic pour toi ^^

  • Jesy

    16 septembre 2014 at 11 h 51 min Répondre

    Oui tu as remarqué haha je suis seule maintenant pour le géré donc je peut faire le design à mon gout. :)

  • Mélanie

    17 septembre 2014 at 18 h 54 min Répondre

    PERFECT :)

  • Garance

    20 septembre 2014 at 18 h 29 min Répondre

    Super astuce comme d’habitude ! 😉

  • jemistips

    20 septembre 2014 at 18 h 44 min Répondre

    Génial !! Merci beaucoup pour tout ces tutos !!

  • lola

    26 septembre 2014 at 22 h 57 min Répondre

    Je l’ai installé aussi ca fait trop joli !

  • Salomé

    29 novembre 2014 at 18 h 41 min Répondre

    Merci pour ta balise mailto, je l’ai installé sur mon futur blog :) (qui sera opérationnelle pour le 1er janvier donc un peu de patience)! (L’adresse : http://www.sparkling-adventures.com)

  • Vanessa

    18 février 2015 at 1 h 59 min Répondre

    Yes! Merci, je l’ai installé :) et j’ai rajouté: class= »aligncenter » pour centrer l’image.

  • Be Badass

    18 mai 2015 at 21 h 58 min Répondre

    saluuut !

    j’ai voulu installer la petite icône et j’ai réussi. Petit problème: quand je clique dessus, rien ne s’affiche y a un petit problème, il me dit que la page est introuvable..
    comment faire?

  • Elodie

    1 juin 2015 at 12 h 47 min Répondre

    Ton blog est une vraie mine d’or! Merci beaucoup pour tout tes conseils, tes tutos et ton aide 😀

  • Du fil et mon ...

    18 octobre 2015 at 18 h 28 min Répondre

    Oui!
    Exact !
    Une vraie mine d’or et surtout : J’y suis arrivée !
    Donc, tout est possible !
    Merci beaucoup pour ces jolis graphismes qui apportent un coup de « propreté » sur nos blogs …

Poster un commentaire