Tutoriel de bouton de lien pour votre Blog

Le tutoriel de bouton de lien pour votre Blog est fourni avec la conception d’une boîte de code à attraper sous l’image… Soyez rassuré… ce tutoriel est rapide et facile a réaliser.

Ce bouton de lien est en plus très utile pour que vos ami(e)s Blogueur/Blogueuse/ Webmasters fassent la promotion de votre Blog.

Je suis donc heureuse de partager avec vous ce petit secret… Je vais vous montrer, avec ce tutoriel, comment, vous aussi, même si vous êtes novice en codage HTML et donc avez peu de connaissances, vous pouvez réussir facilement  à créer des boutons de blog servant au partage, en anglais ils s’appellent “Grab it Buttons” … et en français bouton de lien Blog avec code à attraper sous l’image.

Ecoutez… en plus ce tutoriel marche sur Blogger, WordPress, Typepad et toutes les plateformes de Blogs qui utilisent l’HTML et notamment ceux pourvus de Gadgets ou de Widgets que vous pouvez insérer dans vos colonnes latérales… ou en bas de page. Alors que demander de plus ?

Voilà à quoi ça va ressembler

<div align="center"><a href="http://www.zalinka.com" title="Zalinka" target="_blank"><img src="http://www.zalinka.com/wp-content/uploads/2013/05/logo-200-X-132.gif" alt="Zalinka" style="border:none;" /></a></div>

Je vais maintenant vous expliquer les étapes du tutoriel de bouton pour en arriver à ce stade.

Si vous regardez dans la colonne de droite de mon Blog…Vous pouvez apercevoir la rubrique

“PRENEZ LE BOUTON DE LIEN “

Sous celle-ci apparaît la boîte de dialogue délivrant le code à copier

Remarquez bien que… quand la boîte de code s’adapte à la largeur de la colonne latérale…

il y a des barres de navigations (en bleu) qui servent à déplacer le texte de haut en bas et de droite à gauche.

Je vais en parler plus tard dans cet article… c’est très rapide et facile à calculer….puisque vous n’aurez rien à faire !

Difficulté ★

Ce tutoriel de bouton peut être utilisé… même par les grands débutants ce qui signifie que j’ai poussé les explications au maximum !

De quoi avez-vous besoin ?

1 – Un Blog ou Site (MDR)

2 - Une image au format Gif … je vous conseille des dimensions inférieures ou égales à 200 pixels X 200 pixels… d’après mon expérience, les petits boutons s’adaptent à tous les Blog (taille) et sont plus facilement choisi par les blogueurs ou webmasters…. Je ne sais pas ce que vous en pensez mais personnellement, je n’ai pas envie de voir sur mon Blog de grands affichages de logos de différentes dimensions un peu partout… Pourquoi ? vous allez vous en douter… “ça fait désordre” … j’évite intentionnellement de parler de ce qui est beau… car la beauté est bien entendue subjective.

3 – Le tutoriel de bouton qui s’ouvrira dans une autre page

ETAPE 1 : L’IMAGE

1 – Trouver une image ou créez un logo qui vous représente.

2 – L’enregistrer sur votre ordinateur au Format Gif et dans des dimensions inférieures ou égale à 200 px X 200 px. Nommez le : “Bouton de lien” par exemple.

3 – Si vous utilisez Blogger… allez télécharger gratuitement votre image sur PICASA WEB ALBUM… Si vous êtes sur WordPress, allez télécharger votre image dans la partie “média”, sur Typepad, rendez-vous à partir de la bibliothèque dans la partie “gestionnaire de fichiers” pour y stocker votre image…. Si votre Blog est absent de la liste précitée et que vous ignorez où héberger vos images sur votre plateforme de Blog… faites simplement une recherche dans la rubrique aide de votre propre Blog pour savoir où héberger/stocker votre image.(je m’excuse mais je ne peux répondre par email à tout le monde)

4 – Pour notre exemple j’ai choisi celle-ci au format 200 px x 132 px

ETAPE 2 : OBTENIR LE CODE SECRET

Alors là… vous n’allez pas en croire vos yeux tellement c’est facile !

J’ai trouvé un logiciel en ligne 100% gratuit et qui le fait pour vous… c’est ce que j’ai utilisé pour faire les miens… et le résultat est à mon avis très satisfaisant.

Je m’empresse donc de vous donner mon tuyau qui va vous faire gagner beaucoup de temps et en plus vous aider à promouvoir votre Blog.

Voici le lien qui va s’ouvrir dans une autre fenêtre et donc vous permettre de continuer à utiliser ce tutoriel.

http://www.mycoolrealm.com/sandbox/gbgen/

Au secours… c’est en anglais !…. Pas de panique… je traduis… et j’explique ligne par ligne.

ENTER YOUR BLOG/WEBSITE AND IMAGE INFO

L1 “Your website title” …. Insérez le titre de votre Blog

L2 ” Your Website/Blog URL” … Insérez votre URL ….http://www.votre site.fr

L3 ”Your Image URL”… Entrez l’adresse où est hébergé votre image ou le lien URL de stockage sur votre Blog WordPress ou Typepad… la forme est http://www.votreblog.com/image/img/gif 

CHOOSE COLORS AND CODE BOX OPTIONS

Cette partie est complètement facultative… mais je vous l’explique

L1 Container type Vous avez le choix entre  

o Textarea (Pour les Blog typepad, sites auto hebergés)

o Pre (les autres)                                                                

Vous ne savez pas… essayez les deux et vous verrez bien si ça marche !

L2 Container Border color  C’est une option qui sert à déterminer le trait du contour de la boîte où apparaît le code sous l’image. Notez aussi que même si vous voyez en mode Preview (aperçu) un cadre orange…Celui-ci ne se verra pas et ne viendra pas encadrer votre logo… soyez rassuré !

L3 container Background color….. code couleur du fond d’écran de la boîte de code…. personnellement , je l’ai laissée telle qu’elle, c’est à dire gris clair

L4 Font color…. C’est tout simplement la couleur de police de caractère du texte inscrit dans la boîte de code.

Ensuite nous voyons ….

Code Container’s height: Auto Set height Code Container’s width: Auto Set width Ce sont des boutons qui servent à déterminer la hauteur et la largeur de la boîte… je vous conseille de les laisser en automatique…(c’est ce que j’ai fait)….il y aura juste des barres de navigations qui se calculent automatiquement pour déplacer le texte du code à prendre ….de haut en bas et de droite à gauche. comme ceci

L7 Open a new window... Alors là deux possibilité yes ou No…. pour ce qui est du Yes…. cela veut dire que lorsque les internautes cliqueront sur le logo affiché  et bien une autre page s’ouvrira… ce qui est bien appréciable car cela signifie que les internautes qui cliquent sur le logo verront le contenu de la page dans une nouvelle page indépendante du Blog;… leur propre Blog restant à disposition des lecteurs (pas de perte de visiteur)….. SI vous cliquez “no” l’internaute quitte le Blog et est redirigé en lien direct vers votre Blog/site…. perso…. je préfère laisser plus de liberté aux gens et cliquer Yes.

Le Bouton intitulé “PREVIEW” 

Cliquez maintenant sur “Preview”(aperçu en français). Un code apparaît dans une nouvelle fenêtre. Ne faites surtout pas de copier collé du code à ce stade. Pour obtenir un code qui marche vous devez d’abord cliquer sur le bouton “GET CODE” …. la petite fenêtre disparaît alors. Descendez la page à l’aide de la barre de navigation… vous verrez un code écrit dans une boîte rectangulaire…. sous cette boîte, il vous suffit de cocher “SELECT”

Le code a été gardé en mémoire, vous pouvez maintenant aller le copier sur votre Blog dans votre WIDGET/GADGET.

Si jamais vous vous apercevez que vous aviez fait une erreur et voulez changer l’information rentrée dans n’importe quelle boîte… alors faites PREVIEW … Un code apparaît dans une nouvelle fenêtre. Ne faites surtout pas de copier collé du code à ce stade. Pour obtenir un code qui marche vous devez d’abord cliquer sur le bouton “GET CODE” …. la petite fenêtre disparaît alors. Descendez la page à l’aide de la barre de navigation… vous verrez un code écrit dans une boîte rectangulaire…. sous cette boîte, il vous suffit de cocher “SELECT” et d’aller le copier dans votre WIDGET/GADGET.

ETAPE 3 : TEST DU BOUTON DE LIEN

Après avoir bien entendu sauvegardé votre gadget/Widget…. regardez le résultat que vous avez obtenu…. c’est joli ? qu’en pensez-vous ?

Si jamais quelque chose avait l’air anormal vérifiez que :

1. la dimension de l’image est correcte
2. vous avez utilisé le format GIF
3. l’adresse URL de l’image est correcte.

Voilà le bouton de lien tel qu’il apparaît chez les Blogueurs/webmasteurs qui l’ont affiché…. tout ça pour vous dire qu’ils n’ont pas de code sur leur propre BLOG/site…

MONTREZ MOI VOS REUSSITES 

SVP…. Faites moi part de votre succès….grâce à ce tutoriel

Comment ?

c’est simple il vous suffit d’aller poster un lien vers votre Blog dans les commentaires de http://www.zalinka.com en bas de cet article et de me dire si ce “tutoriel de bouton de lien” vous a servi/aidé …. comme ça, en plus,  vous serez directement référencé sur mon Blog et en plus, j’aurai la joie d’aller voir le résultat directement sur votre Blog….

Pour finir, je voulais vous adresser tous mes vœux de succès pour votre Blog

Bises et à bientôt

Zalinka

P.S : si vous avez aimez ce tutoriel de bouton de Blog… SVP faites une lien vers ce tutoriel pour en faire profiter d’autres… voici le lien raccourci http://www.zalinka.com/?p=2083 

Si vous préférez afficher un de mes boutons sur votre Blog…. Allez choisir le votre parmi les 6 boutons de liens avec leurs codes que j’ai crée en l’espace de 30 minutes (j’avais déjà les images)

Merci de votre gentillesse et de l’intérêt que vous avez porté à ce “tutoriel de bouton de Blog”.