Pour accéder à votre tableau de bord :

Connectez-vous

Connexion S'inscrire

Connexion

Organisme de formation N°11 91 07318 91
Mon compte Statut
Logo NosyWeb
Réussir sur Internet
Marketing Digital - Google - Joomla

Certains webmasters se demandent comment masquer l'icône de lien externe SEF Advance.

Rappelez-vous, c’est l’icône placée à côté de certains liens. Vous pouvez même en voir différentes variantes sur certains grands sites, comme celui de la BBC.

Certains préfèrent cependant adopter un look conventionnel pour leurs liens externes.
Dans ce didacticiel, vous apprendrez d'où proviennent ces icônes de liens externes et comment les masquer. Nous nous baserons sur site Web reposant sur le template JS Elan.

 

 

Dans notre exemple, l’icône de lien externe en question ressemble à la capture d'écran ci-dessous :

01 external link icon

Et voici l'image de l'icône au format .png :

02 the icon image

Ai-je besoin de masquer cette icône ?

Lorsque l’on nous demande comment cacher cette icône, j'ai eu un sentiment mitigé.

Les avantages de l'icône de lien externe

D'une part, elle ajoute une touche supplémentaire à votre design, ce qui le rend esthétiquement plus professionnel et attrayant.

De plus, cette petite icône sert également de mini Call-to-Action. Elle a été spécialement conçue pour améliorer la visibilité d’un lien HTML conventionnel et inviter au clic.

Et nous aimons tous quand nos visiteurs interagissent avec nos pages Web. Nous sommes tous heureux de les voir cliquer sur les liens que nous avons placés pour eux.

C’est certainement pour ces raisons que les sites de référence, par exemple, celui de la BBC, l'utilisent sur leurs sites :

09 this icon on bbc site

Comme vous pouvez le voir sur cette image, la BBC a même placé l'icône avant le texte du lien.

Ils s’appuient sur le fait que l'icône ressemble en fait à un bouton et sera plus susceptible de provoquer un clic que le texte seul.

Même Google propose cette icône dans sa bibliothèque Font Awesome :

10 external link icon in fontawesome gallery

Les inconvénients de l'icône de lien externe

Une esthétique agréable et une facilité d'utilisation peuvent sembler être des arguments convaincants.

Cependant, certains souhaitent tout de même cacher cette icône de lien externe. Logique. Les éléments graphiques sont des gouffres en termes de ressources.

Les meilleurs sites comme celui de la BBC font tourner leurs sites Web sur des serveurs dédiés et puissants. Leurs ressources leur permettent d'ajouter des éléments graphiques supplémentaires sur leurs pages sans effet perceptible sur les performances du site.

La majorité d'entre nous font très probablement fonctionner ses sites Web sur des serveurs partagés ou virtuels. Avec nos ressources limitées, nous devons surtout être minimalistes et moins ambitieux quand il s'agit d'ajouter des éléments graphiques. Sinon, nos sites subiront une augmentation de leur temps de chargement. Et Google reflétera cette baisse de performance en nous classant en conséquence.

Pour résumer, le choix d’afficher ou de masquer l'icône de lien externe dépend de vous et de votre situation.

Il existe des avantages et des inconvénients à cela. C’est à vous de décider.

Comment puis-je cacher cette icône ?

Comme nous l'avons mentionné dans l'introduction, cette icône provient de votre composant SEF Advance.

Il affiche cette icône dans l’interface du backend utilisateur comme suit :

03 external url icon backend

Si vous inspectez le code de cette icône, vous découvrirez que :

  1. la classe CSS, responsable de l'affichage de cette icône est a.ext
  2. le fichier où réside cette classe CSS est /media/sef_advance/css/extlink.css
  3. la propriété CSS affichant cette icône est background

06 the icon css

Pour cacher l’icône sur les pages de votre frontend, basé sur JSElan, ou un autre template, suivez les étapes suivantes.

  • Allez dans Extensions > Templates > Templates :

04 go to extensions templates templates

Vous serez redirigé vers l'écran templates : Templates (Site).

  • Cliquez sur Js_elan Details and Files :

05 click js elan details and files

Vous verrez l'écran Templates : Customise (Js_elan).

  1. Cliquez sur css
  2. Cliquez sur custom.css

07 click css custom css

Remarque : si vous n'avez pas de fichier custom.css dans votre dossier css, créez-le.

  • Ajoutez dans votre custom.css le code CSS personnalisé suivant :
/** Hide the extlink.png external link icon - Start **/
.ext {background: none; padding: 0;}
/** Hide the extlink.png external link icon - Finish **/



08 add css

  • Cliquez sur Enregistrer.

Voilà.

Cet article est une libre traduction de How to Hide the SEF Advance External Link Icon par Alex Smirnov pour JoomlaShack.

Cet article vous a plu ? Abonnez-vous à la newsletter NosyWeb !


L'auteur : un expert à votre service
Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis l'avènement de la version 1.5 de Joomla! pour le marketing digital, je mets mon expertise au service des professionnels. A la recherche d'une stratégie digitale avec ou sans le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-moi via https://www.jeancharlesgautard.com

Articles qui devraient vous intéresser

Où trouver les meilleurs templates Joomla 3.8 gratuits ou Pro Où trouver les meilleurs templates Joomla 3.8 gratuits ou Pro
Il existe plusieurs type de template, du plus simple souvent gratuit, on parle alors de template Joomla gratuit ou...
Créer une nouvelle position dans votre template Joomla Créer une nouvelle position dans votre template Joomla
Il n'est pas rare que lors de l'élaboration d'un site Joomla, on se retrouve coincé à cause d'une position...

Ajouter un commentaire
  • Aucun commentaire trouvé
Assistance

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

×

 

Restez à l'affut de l'actualité NosyWeb ! :-)

×
Dernier article sur la même thématique
Explorer les caractéristiques d’un templateExplorer les caractéristiques d’un template
Savez-vous que vous pouvez inspecter un élément html, pré-appliquer un style sur votre site ou ajouter et supprimer un bloc html sans avoir à modifier un fichier ? Avez-vous déjà voulu...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok