Door een klein icoontje achter een externe link te plaatsen, vertel je bezoekers dat de link die wordt getoond verwijst naar een andere website dan die van jou en dat er een nieuw scherm opent als de link wordt gevolgd.
Wanneer je een link maakt naar een pagina op je eigen website, is het gebruikelijk dat de pagina opent in hetzelfde venster. Een link naar een andere website opent doorgaans altijd in een nieuw venster zodat jouw eigen website beschikbaar blijft.
Een afbeelding toevoegen aan je externe link
Om bezoekers te waarschuwen dat de link leidt naar een andere website en wordt geopend in een nieuw venster, kun je achter de link een afbeelding (icon) plaatsen. Door hiervoor een stukje CSS code te gebruiken, hoef je niet steeds handmatig een afbeelding te positioneren. Door eerst de code te plaatsen in je css en vervolgens, via een class, de code aan te roepen, verschijnt steeds hetzelfde icoontje naast een externe link in je artikel.
Het CSS bestand aanpassen
Open je template.css bestand en plak onderaan het bestand de volgende code:
a.external {
background: url(../images/external.png) center right no-repeat;
padding-right: 19px;
}
Afbeelding uploaden
Kies een eigen afbeelding of gebruik de afbeelding hieronder en plaats de afbeelding in de images map van je template. Let op: dus niet de Joomla images folder, maar die van je template! Download deze afbeelding:
(rechtermuisknop: afbeelding opslaan)
Class gebruiken
Wanneer je een link aanmaakt, kun je door het toevoegen van een class de afbeelding laten verschijnen. Hieronder beschrijf ik hoe je dit kunt doen met de JCE-editor.
Stap 1: de link maken
Selecteer de tekst die je wilt linken aan de externe website. Klik in de editor op het link icoontje, waarmee de pop-up verschijnt om de link in te voeren.
Stap 2: De link laten openen in een nieuw venster
Om de link te laten openen in een nieuw venster, selecteer je onderaan (op het tabblad ‘link’) de optie ‘Open in new window’
Stap 3: Class toevoegen
Nadat je de link hebt ingevoerd, ga je naar het tabblad ‘Advanced‘ en selecteer je uit de lijst ‘Class list‘ de optie external. Kun je deze optie niet terugvinden in de lijst, type dan achter de optie ‘classes’ het woord external.
Als je dit gedaan hebt, sla je de link op en controleer je natuurlijk even of het icon wordt getoond achter de externe link. Als dit het geval is, weten ook jouw bezoekers wat ze mogen verwachten, wanneer ze klikken op een externe link.