Est-ce que cela vous ferait plaisir d’afficher un joli bouton de lien pour que vos ami(e)s Blogueur/Blogueuse/ Webmasters fassent la promotion de votre Blog/site ou échange des liens esthétiques avec vous ?
Aujourd’hui, je suis heureuse de partager avec vous un petit secret pour bien organiser les liens de votre Blog… Je vais vous montrer 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 partage “Grab it Buttons” .
Ecoutez… en plus… ça marche sur Blogger, WordPress, Typepad et toutes les plateformes de Blogs qui utilisent l’HTML et notamment ceux pourvus de Gadgets ou des 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 que j’ai suivi 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 pour déplacer le texte de haut en bas et de droite à gauche.
Difficulté ★
Ce tutoriel 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.
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 égales
à 200 px X 200 px.
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)
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…il y aura juste des barres de navigations pour déplacer le texte de haut en bas et de droite à gauche.L5 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;… le Blog restant à disposition….. 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
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 :
- la dimension de l’image est correcte
- vous avez utilisé le format GIF
- l’adresse URL de l’image est correcte.
Voilà le bouton 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….
Comment ?
c’est simple il vous suffit d’aller poster un lien vers votre BLog dans les commentaires et de me dire si ce tutoriel 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 cet article… n’hésitez pas à faire une lien vers ce tutoriel ou vers le Blog. Merci de votre gentillesse.