Réaliser une image cliquable

Nous venons de voir dans le précédent message comment faire une image cliquable.

C'est la méthode pour ceux qui veulent se casser la tête ;-)

Pour les besoins de tous les jours, nul besoin de faire aussi compliqué !

Vous savez insérer une image ?

Vous savez introduire un lien ?

Vous savez donc faire une image cliquable toute simple.

Insérer l'image

Je ne vais pas rentrer dans le détail ici de comment faire. C'est suffisamment basique pour ne poser de problème à personne. 

A tout hasard, voici le sujet précédemment traité dans un mode opératoire.

Sélectionner l'image

Dans un second temps, il faut cliquer sur l'image pour voir apparaître une barre de liens supplémentaire.

Pour le détail, consulter ce mode opératoire.

Introduire le lien de redirection

Ensuite cliquer sur le bouton Associer en haut du menu.

Préciser le lien de destination.

Pour ceux qui auraient oublié comment faire, lire ici.

Voilà, c'est terminé, vous avez une image qui renverra au clic vers une nouvelle page.

A+

Réaliser un lien à partir d'une image

Faire une image cliquable qui renvoie vers un site ou un message ?

Dans l'absolu, ce n'est pas compliqué :

<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>

Si vous avez besoin que je vous décortique l'affaire :

1 - Hébergement de l'image

Il vous faut commencer par choisir l'image qui servira de lien sur votre blog.

Ensuite il vous faut cliquer sur le lien Insérer une image.

Positionner l'image au bon endroit.

Puis dimensionner l'image à la taille désirée.

Une fois tout ceci réalisé vous devez avoir une image telle que celle çi :

Si je regarde ce que j'obtiens par l'onglet HTML, j'ai le résultat suivant :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s1600/boite_outils.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg" width="200" /></a></div>

2 - URL de l'image

Dans ce que j'ai obtenu plus haut ce qui m'intéresse c'est l'adresse précise de l'hébergement de l'image, sa dimension et son nom, ce sont les données suivantes :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s1600/boite_outils.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg" width="200" /></a></div>

Je retiens donc ceci :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg

3 - URL du site de destination

Il me faut trouver l'adresse précise (URL) vers lequel je veux que mon image pointe.

Pour l'exercice, je veux que mon image pointe vers mon blog :  

http://mestrucspourblogger.blogspot.com/

4 - Message sur l'image

Je dois réfléchir au message que je veux voir affiché lorsque mes lecteurs survoleront cette image.

Je pense qu'il est souhaitable de leur indiquer l'action offerte et le résultat.

En l'occurence :

Pour accéder à Mes trucs pour Blogger 

me semble un bon compromis.

5 - Et voici le résultat

Je reprends ma proposition du début :

<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>

et je remplace avec les données précédemment mises de côté.

Ce qui donnera au final :

<a href="http://www.mestrucspourblogger.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg" title="Pour accéder à Mes trucs pour Blogger" /></a>

soit en image cliquable le résultat suivant :

Quelle utilisation pour tout ceci ?

On pense bien évidemment aux colonnes de widget où des affichages peuvent être égayés de cette manière si on veut faire des présentations personnelles sur une extraction de ses libellés par exemple.

On peut penser aussi à des images pour remplacer les titres des menus ou onglets.

A+

Ouvrir un lien dans une nouvelle fenêtre

La possibilité d'ouvrir un lien dans une nouvelle fenêtre a déjà été présentée ici.
Nous pouvions le faire en intégrant à la mimine le fameux target="_blank" dans le formulaire de rédaction du message.

C'est désormais beaucoup plus facile.

Et surtout c'est intégré dans Blogger ; donc plus rien à écrire !

[1] : le premier point est d'écrire son texte

[2] : ensuite il faut surligner la zone cliquable qui renverra donc vers le lien choisi

[3] : un clic sur le lien Associer et une fenêtre supplémentaire s'ouvre en pop-up (surimpression)

[4] : le texte de la zone cliquable est reporté

[5] : indiquer l'adresse du lien de destination

[6] : et voici la nouveauté, la case à cocher Ouvrir ce lien dans une nouvelle fenêtre

ensuite les opérations classiques, le OK [7] pour enregistrer les modifications, le choix du libellé, de l'heure de publication et l'enregistrement [8]

A+

Intégrer des liens à côté des pages

L'intégration des pages statiques dans Blogger a rendu de nombreux services à ceux qui voulaient rapidement intégrer des informations stables en complément des messages. Et tout ceci sans toucher au code du blog.

Nous avons vu, par ailleurs, qu'il était possible d'ajouter à cette barre des liens, au prix de quelques manipulations.

Nous arrivions petit à petit à personnaliser nos blogs au prix quelquefois de belles suées...

C'est désormais beaucoup plus simple.

Avec la version de Blogger in Draft (NB), on intègre un lien dans la barre des pages en 3-4 clics seulement.

Qu'est-il possible d'en tirer ?

► On peut tout d'abord faire un lien vers un autre de ses blogs, vers son Google+ (ou Facebook)...

► On peut aussi tirer parti de cette fonctionnalité pour afficher ses messages triés par libellés. En gros, comme un menu.

On doit avoir comme adresse dans ce cas quelquechose comme :

http://ADRESSE_DE_MON_BLOG.blogspot.com/search/label/INTITULE_DE_MON_LIBELLE

Les caractères majuscules doivent être personnalisés en fonction des éléments de votre blog.

Comment faire ?

L'accès se fait par le menu Pages puis Nouvelle page.

Ensuite il suffit de cliquer sur Adresse Web.

Une nouvelle fenêtre se pose par dessus l'écran précédent permettant de préciser le titre que l'on veut donner à cette page ainsi que l'adresse web de redirection :

Puis, on enregistre.

Dernière étape, si l'on n'a déjà intégré des pages, il faut préciser leur disposition.

Ici, en, l'occurrence, on veut des liens qui se présentent comme des onglets :

Enfin pour terminer, on enregistre la disposition.

C'était simple et rapide n'est-ce pas ?

A+

NB : cette fonctionnalité a désormais quitté le cercle restreint des utilisateurs de Blogger in Draft pour être généralisée à l'ensemble des utilisateurs.

Ajouter un lien dans la liste des onglets

Une fois que nous avons mis en place des onglets par l'intermédiaire des pages, l'envie de rajouter des liens pointant vers des sites se fait sentir.

Comment, par exemple, donner l'envie depuis un blog de passer vers un autre, ou même, de sauter vers sa propre page de Facebook ?

Le point de départ est le même que celui présenté dans ce message relatif à un pseudo menu rajouté à la suite des pages.

Reprendre les explications développées dans ce message.

Puis, entre

</b:loop>

et

</ul>

Il faut intégrer le code suivant :

<li>
<a href='http://NOMDUBLOG.blogspot.com/' target='_blank' title='TEXTE AU SURVOL DE L'ONGLET'>TITRE DE L'ONGLET</a>
</li>

Il ne vous restera plus qu'à personnaliser l'adresse de votre lien, le texte au survol et le titre de l'onglet.

Celui-çi s'intégrera à la suite des autres onglets et en respectant le modèle du blog.

Vous pouvez aussi supprimer target='_blank' si vous acceptez que le lien s'ouvre dans la même fenêtre.

A+

Le dernier onglet de ce blog reprend l'explication présentée ci-dessus. Un clic sur le lien permet d'accéder à mon autre blog : De tout et du reste.

Mise à jour : il existe, depuis, une autre fonctionnalité permettant d'ajouter sans peine un lien dans la barre de menu : Intégrer des liens à côté des pages

Supprimer : Messages les plus récents portant le libellé...

Si vous voulez effacer le message suivant :

Messages les plus récents portant le libellé... (Nb2)

qui apparaît lors d'une sélection des libellés ou lorsqu'un menu est rajouté à la suite des pages, vous devez :

- cliquer sur le menu Présentation (Nb1) puis Modifier le code HTML
- ensuite vous allez dans la partie Modifier le Modèle
- dans la zone de code, vous recherchez :

]]></b:skin>

et juste avant, vous rajoutez :

.status-msg-wrap
{
display: none;
}

Ensuite vous pouvez cliquer sur Enregistrer le modèle.

A+

Nb1 : suite à évolution de l'interface le menu est devenu Modèle (et non plus Présentation)

Nb2 : autr mention qui peut apparaître aussi : Affichage des messages dont le libellé est .... Afficher tous les messages

Utilisation des ancres

L'utilisation des liens hypertexte permet de sauter d'un point d'un message à un autre point très précis par un simple clic.

On peut en trouver l'intérêt lors de la création d'une table des matières ou d'un lexique par exemple, ou pour insérer des retours vers le haut de la page (autre exemple). Nous sommes ici dans le cas de renvoi sur la même page.

On peut, tout aussi bien, sauter directement sur un point situé dans un autre message ou même carrément vers un autre site.

Le lien qui servira de référence, est appelé une ancre.

Par exemple, toute cette ligne peut comporter une ancre appelée home.

ce qui donnera en code :

<a href="http://adressedelapagedublog.html name=home>toute cette ligne peut comporter une ancre appelée home.</a>

Lien hypertexte sur une ancre de la même page

Lorsque l'on a créé une ancre, il est donc possible de poser un lien dans le même message pour renvoyer vers cette ancre.

Par exemple, dans la page de ce message il y a une ancre fin déposée à la fin du message.

Pour l'atteindre, il me suffit de mettre la ligne suivante :

Vous pouvez aller directement à la
<a href=http://adressedelapagedublog.html#fin>fin de ce message</a>.

Ce qui donnera :

Vous pouvez aller directement à la fin de ce message.

Liens hypertexte sur une autre page

Maintenant que l'on a compris le principe du lien dans la même page, il suffit de voir comment faire la même chose pour un lien vers un autre message.

Par exemple, si je dis :

Vous pouvez consulter cet
<a href=http://adressedelapagedublog.html>autre message</a>.

Cela donnera :
Vous pouvez consulter cet autre message.

Une fois cette page du nouveau message consultée, on peut vous faire reprendre le fil de cette lecture depuis cette ligne où l'on a inséré l'ancre retour.

Liens hypertexte sur le Web

Ici, pour atteindre une autre page hébergée à une autre adresse, vous pouvez vous servir tout simplement de la fonctionnalité intitulée Associer dans l'interface de rédaction d'un message sous Blogger.

Ainsi pour dire :

Rendez-vous sur mon autre blog De tout et du reste

le système écrira de lui-même :

Rendez-vous sur mon autre blog
<a href="http://detoutetdureste.blogspot.com/">De tout et du reste</a>

_
_
_
_
_
_
_
_
_
_
_
_
_
_
_

Vous êtes à la fin du message

Vous pouvez retourner au début du message en utilisant l'ancre home avec un lien codé ainsi :

<a href="http://adressedelapagedublog.html#home>Retour au début du message</a>

qui donnera en lien actif :
Retour au début du message

Nota : Pour ne pas vous arracher des cheveux, il faut commencer avec un article déjà publié c'est à dire avec des références absolues (l'adresse complète) et non celle du brouillon qui vous sert à travailler.

A+

Lien hypertexte sur une autre page

Après avoir cliqué sur le lien d'un message, on peut arriver, comme ici, sur un nouveau message, c'est à dire hébergé à une autre adresse html.

Le lien a donc bien fonctionné.

Mais on peut aussi prévoir de revenir au message d'origine, après cette consultation, à l'endroit précis que nous avions quitté.

Dans l'exemple précédemment vu, nous avions créé à cette fin une ancre retour et nous voulons tout simplement reprendre la lecture à cet endroit précis.

Il suffit alors dans la page actuelle de créer un lien :

<a href="http://adressedelapagedublog.html#retour>Retour à la page précédente</a>
Ce qui donne :
Retour à la page précédente

A+

Supprimer le lien Accueil

Des bloggeurs demandent quelquefois comment faire pour supprimer le lien "Accueil" que l'on trouve en bas de page à la fin du dernier message.

Personnellement, je trouve dommageable pour la navigation cette suppression.

Mais bon, si cela les satisfait. Chacun fait comme il veut...

Il suffit d'aller en Présentation puis Modifier le code HTML.

et juste avant :

]]></b:skin>

de coller ceci :

.blog-pager
{
display: none;
}

A+

Insérer une ancre

Une fonction qui s'avère intéressante à la longue, surtout lorsque l'on a de longs messages : celle consistant à déposer des ancres.

Il s'agit tout simplement de liens qui facilitent la navigation dans le sens où l'on permet au lecteur de se déplacer vers une autre partie du message ou d'une page html.

Bien évidemment, on pense aussitôt au lien qui permet d'aller directement en bas de page (ou inversement de revenir en haut de page). Mais cela peut s'avérer tout aussi pratique lorsque l'on veut créer un sommaire avec un lien sur le titre renvoyant au développement de la partie correspondante.

Concrètement comment cela se passe ?

Dans l'onglet html de rédaction du message il faut entrer la syntaxe suivante :

<a href="#nom de l'ancre">départ : lien et messsage incitant à cliquer pour pointer vers votre ancre</a>

<a name="nom de l'ancre">destination : mot ou phrase vers lequel votre lien pointera</a>

Par exemple, ce lien renverra vers le haut de la page.

Lorsque l'on veut faire un lien vers une ancre se situant sur un autre message la syntaxe est pratiquement la même en prenant tout simplement la précaution de citer la bonne page html du message.

- Sur le message d'origine on mettra :

<a href="http://lenomdemonblog.blogspot.com/nomdesapage.html#nom de l'ancre">départ : lien et messsage incitant à cliquer pour pointer vers l'ancre du second message</a>

- Sur le message de destination, on mettra :

<a name="nom de l'ancre">destination : mot ou phrase vers lequel votre lien pointera</a>

Important : Si vous prenez les références d'un message qui est encore à l'état de Brouillon, vous devrez penser à corriger ses coordonnées une fois que cet article sera publié.

D'autre part, il est tout à fait possible de laisser une ancre vide. Ainsi dans l'exemple cité précédemment, un retour vers le top de la page peut être fait sur une zone vide. Et l'occurrence voici le code html de ma première ligne :

<a href="" name="up"></a>

A+

Retour vers le haut de la page

Insérer des liens : Vous aimerez peut être

L'attention de votre lecteur s'est portée vers un article que vous avez publié. Vous souhaitez sûrement le retenir plus longtemps et notamment lui montrer d'autres réalisations.

Un utilitaire peut vous aider dans cette opération : Linkwithin.

Ce petit programme permet d'insérer à la fin de chacun de vos articles une sélection de 3 (à 5) vignettes et titres d'autres articles.

Pour insérer tout cela, c'est très simple.

Procédure

Vous devez vous connecter au site Linkwithin.

Vous saisissez les données mail, adresse du blog, sélectionnez plateforme Blogger et indiquez le nombre de liens que vous voulez intégrer. Puis vous cliquez sur le bouton Get Widget.

Une nouvelle fenêtre s'ouvre.

Vous cliquez sur le bouton Install Widget.

Vous revenez automatiquement dans l'interface Blogger avec l'écran suivant.

Vous sélectionnez le blog sur lequel vous voulez implanter le gadget et vous cliquez sur le bouton Ajouter un gadget.

Vous êtes basculé dans les Eléments de la page du menu Mise en page.

Votre gadget s'est positionné dans une colonne.

Pour une meilleure efficacité, il est recommandé de déplacer ce gadget en dessous du bloc de message.

Ensuite Enregistrer vos modifications.

Et voici le résultat.

A la fin de chaque message, une vignette et un titre de message permettra à votre lecteur d'être renvoyé vers la lecture d'un autre article s'il le désire.

A+

Associer un lien dans un article et faire une citation

Mise à jour 2012

Vous pouvez exprimer le besoin dans un article de citer vos références de lecture ou même de signaler qu'une partie de ce que vous publiez en est un extrait.

L'association

Vous commencez par écrire votre article [1] en ayant pris la peine auparavant de le faire dans l'onglet Rédiger.

Dans l'exemple qui suit, on compte renvoyer vers le lien du journal Libération. On sélectionne le morceau de texte qui sera actif (dans l'exemple ci-dessous : Dans la presse [2]) et permettra le lien direct avec la page du journal.

Puis vous cliquez sur le lien Associer [3].

Une nouvelle fenêtre s'ouvre par dessus la précédente [4].

Le Texte à afficher reporte les caractères que vous avez surbrillés dans l'écran précédent [5].

Vous allez prendre la référence de la page du lien que vous comptez reporter. Ici notre page sur le quotidien Libération.

Et vous collez le lien dans le champ Adresse Web [6].

Puis vous validez votre opération en cliquant sur OK [7].

De cette manière, votre lecteur aura l'information que, s'il veut des informations supplémentaires (en l'occurence ici, retrouver l'article cité dans son intégralité et dans son contexte), il lui suffira de cliquer sur le lien.

La citation

Nous pouvons continuer avec l'exemple précédent.

Vous sélectionnez le texte [1] dont vous voulez préciser qu'il s'agit d'une citation que vous avez empruntée.

Puis vous cliquez sur l'icone " [2].

Le texte se met aussitôt en forme.

Le résultat des 2 opérations combinées décrites ci-dessus donne l'affichage suivant, si je clique sur Aperçu.

La citation [3] se signale par un lien (le mot est souligné) actif qui renvoie automatiquement vers la source.

La référence [4], quant à elle, est caractérisée par une mise en retrait du texte qui le met bien en relief.

A+