Wenn man seine Links mittels Icons kennzeichnen will, kann man dies durch CSS erreichen. Neben dem eigentlichen Link erscheint dann ein Symbol, das den Link noch einmal als solchen hervorhebt.
Werbung
Mittels CSS haben Sie vielfältige Möglichkeiten, Links zu formatieren. So könnte Ihr Link auf einer Webseite z.B. so aussehen:
https://www.interaktive-fundgrube.de
Mittels CSS läßt sich leicht das Erscheinungsbild anpassen:
https://www.interaktive-fundgrube.de
Die hierfür angelegte CSS Klasse sieht so aus:
<style>
a.formatierterLink{
font-family:Arial, Helvetica, Sans Serif;
font-weight:bold;
font-style:italic;
color:#aa00ff;
text-decoration:none;
border-bottom:dashed;
}
</style>
Der HTML -Quelltext sieht dann so aus:
<a class="formatierterLink" href="https://www.interaktive-fundgrube.de"> https://www.interaktive-fundgrube.de </a>
Interessant wird es jedoch, wenn man einen Link zusätzlich durch eine kleine Grafik kennzeichnen möchte, die z.B. vor oder nach dem Text steht, ohne bei jedem Link ein Grafiksymbol manuelle mit in den Code zu schreiben. Da sieht dann z.B. so aus:
… Interessante Tipps finden Sie auf https://www.interaktive-fundgrube.de rund um die Uhr…
Der HTML -Quelltext für den Link sieht dann so aus:
<a class="extern" href="https://www.interaktive-fundgrube.de">https://www.interaktive-fundgrube.de</a>
Sie sehen, dem Link wurde die CSS Klasse ‘extern’ zugeordnet. Nun muss nur noch mittels CSS dafür gesorgt werden, dass Links der Klasse ‘extern’ ein Icon anzeigen. Das kann man so erreichen:
<style>
a.extern {
...
/*Gibt das Icon an, welches neben dem Link stehen soll.*/
/* Dieses wird hier als Hintergrundbild gesetzt.*/
background-image: url(pfad/zum/bild/iconlink.gif);
/*Gibt an, dass die Hintergrundgrafik nicht wiederholt wird*/
background-repeat: no-repeat;
/*Gibt an, dass die Hintergrundgrafik links ausgerichtet ist*/
background-position: left;
/*Abstand vom rechten Rand. Dieser sollte etwas breiter sein als das Icon*/
padding-left: 15px;
}
</style>
Fertig! Nun erhält jeder Link der Klasse ‘extern’ ein Symbol vorangestellt.
Beispiel:
Besuchen Sie mein Blog auf www.ahomedia.de oder vielleicht auch mein Blog über Affiliate Marketing
