Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
A tout petit point...
18 février 2012

Petits tutos Canalblog ou Canalblog pour les nuls..

Je ne sais pas si vous avez remarqué mais il y a eu quelques petits changement sur mon blog dans la nuit de jeudi à vendredi...

J'ai mis à profit une petite insomnie pour transformer certains liens en bannière, en image quoi.

Je trouve ça plus sympa, c'est un peu fastidieux à faire mais une fois que l'on connaît la marche à suivre, ce n'est pas compliqué du tout.

Hier matin, j'ai proposé chez les Breizh de faire un tuto et comme certaines étaient intéressées, je me lance....

Et ce n'est pas un tuto mais deux tutos que je vais vous présenter! Et oui je suis comme ça deux pour le prix d'un..

Commençons par le premier ou

Comment faire un lien en image dans son texte? 

Pour celles qui maîtrisent je vous invite à vous rendre au second point.

Pour les autres, je vais tenter de vous expliquer comment insérer dans son texte, une photo sur laquelle on peut cliquer pour accéder directement au site correspondant.

La meilleure illustration c'est le cas d'un poste sur un site collectif que vous souhaitez signer de votre logo avec le lien sur votre blog.Comme ici par exemple, en cliquant sur ma mini bannière, on arrive sur mon blog.

Alors comment fait on.

Première étape, on choisit sa bannière, généralement, il s'agit de la bannière de son blog réduite pour qu'elle fasse une jolie signature.

Moi j'utilise le logiciel XN view mais n'importe lequel fera l'affaire...

Une fois cette bannière enregistrée quelque part sur votre ordinateur, vous ouvrez un nouveau message sur votre blog. Vous le nommez signature par exemple et vous insérez juste votre mini bannière. Vous l'enregistrez en tant que brouillon.

Ce qui va permettre de récupérer une adresse canalblog pour cette image.

message image

 

Seconde étape, récupérer cette adresse. Pour cela, cliquer sur  Outils, Gestion des fichier, images. Cliquer deux fois sur date pour que les images soient classées de la plus récente à la plus ancienne:

image dans outils 

 Moi je l'avais nommé "bannière a tout petit point miniature".

On clique et une nouvelle fenêtre s'ouvre, avec l'adresse de cette image. On la garde bien ouverte et on passe à la suite...

Troisième étape, on rédige son article, et on moment de signer, on copie colle le code suivant:

<p><a href="lien" target="_blank"><img src="adresse de l'image" /></a>
</p>

ça restera toujours le même, je vous invite à le garder à porté de main, prêt à être copier coller. Personnellement, je me suis envoyée un mail avec ce code que je garde bien en vue.

Bref, on a pas terminé. IL va maintenant falloir remplacer les termes "lien" et "adresse de l'image".

Quatrième étape, on copie l'adresse de son blog et on le colle à la place de lien, attention, juste les mot, il faut bien conserver toute la ponctuation qui a son importance en HTML.

Et puis on copie colle, l'adresse de l'image à la place de... de.. adresse de l'image.

Vous voyez rien de compliqué, il suffit juste de connaître les lignes de code. Ensuite on peut décliner à l'infini, avec différents liens, différentes images...

Passons maintenant à l'objet principal de ce message:

Comment transformer ses liens préférés en sublimes bannières? 

Alors juste une petite parenthèse pour vous dire que cela me trottait en tête depuis un bon moment mais lorsque j'avais fait des recherches sur la toile, je n'avais trouvé que des explications super compliquées et pas claires du tout!

Et cette nuit, je ne sais pas pourquoi, j'ai relancé une recherche, et je suis arrivée sur le sésame, un petit code tout bête mais qui change tout!

Voici donc la marche à suivre.

Je vais vous passer mes loupés, et vous donnez exactement les dimensions des bannières que j'ai utilisé. C'est assez long à faire et lorsqu'on se rend compte que le résultat est bof bof car les bannières ne sont pas du tout homogènes, il y a de quoi être un peu dégoûtée... Mais lorsqu'on a toute la nuit, on recommence depuis le début et puis voilà.

Donc, première étape, récupérer les bannières des liens qui nous intéresse. Dans mon cas, les blogs collectifs auxquels je participe. Pour certains comme pour Japan Couture Addcits, un bouton est fournis. Cela facilite vraiment la vie, c'est la raison pour laquelle j'ai aussi créée un bouton chez les Breizh:

bouton breizh 

Sinon il faut ruser, j'en ai trouvé beaucoup grâce à Google en tapant le nom du blog et en cherchant dans les réponses en image.

Seconde étape, une fois la bannière trouvée, ce serait trop facile si elles étaient toutes de la même taille. Il va donc falloir déterminer une taille et les redimensionner.

Là encore j'utilise Xn View, un programme très facilement téléchargeable mais n'importe lequel fera l'affaire. 

J'ai choisi de formater toutes mes bannières en 177 par 54 pixel.

Ensuite on reprend la même manip. que le tuto précédent pour attribuer une adresse canalbog à ces bannières.

On ouvre un nouveau message, on colle toutes nos bannières redimensionnées. Et on enregistre en brouillon.

Voilà, on a tout....

Passons à la troisième étape, modifier les liens pour que les images apparaissent à la place des noms:

On édite le lien que l'on souhaite convertir, à la place du nom du site, on tape:

<img src="adresse de l'image">

On remplace alors l'adresse de l'image par l'adresse que l'on a récupéré:

Sans titre

 

L'adresse internet ne change pas.

Validé et vous pouvez admirer votre nouveau lien en image!

Reproduir autant de fois que nécessaire...

J'espère avoir été clair, si ce n'est pas le cas, dites le moi...

Publicité
Publicité
Commentaires
C
ça marche!! J'ai bien suivi toutes les étapes et cette fois ça marche!!! yes, yes, yes! <br /> <br /> Merci mille fois pour ces explications. <br /> <br /> Canalblog pour les nuls, très bien pour moi!
C
Wahoo, merci, merci, merci!!! A la 1e lecture j'ai pas tout compris, mais en faisant en meme temps petit à petit c'est trrrrès clair!
B
Merci beaucoup pour ce tuto très utile. Je n'avais pas vraiment tout compris en lisant les explications mais en faisant c'est en fait très simple!
S
Génial! Merci beaucoup ton tuto est très clair et j'ai enfin réussi à insérer un bouton.
T
Ho ben je pensais que c'était plus simple que ça! ça me prendrais 3j là! Tant pis! Mais merci quand même!
A tout petit point...
Publicité
Newsletter
557 abonnés
Archives
Visiteurs
Depuis la création 934 376
Publicité