Externe Links per CSS kennzeichnen

Externe Links per CSS kennzeichnen

Um Links auf Affiliate-Seiten transparent zu kennzeichnen, probiere ich momentan mit ein paar Ideen in CSS. Aktuell werden externe Links auf Awin, booking, tripadvisor (tidd.ly) und pixelschmitt.de/goto/ (Cloaking per Plugin) mit einem Euro-Zeichen, dunklerem Hintergrund und fetter Schrift hervorgehoben.

Ich bin noch nicht zufrieden damit und werde noch daran arbeiten. Aktuell erscheint dieser Style überall: Im Inhaltsverzeichnis, in der Breadcrumb-Navigation – das muss ich noch in den Griff bekommen. 

Unten findest Du den CSS-Code, den ich  verwende.

Zuerst wird geprüft, ob die Links auf eine der 4 URLs gehen (Liste muss ich noch erweitern). Wenn ja, dann gibt es eine Hintergrundfarbe, Abstände nach links und rechts und ein Hintergrundbild (das Euro-Zeichen).

Du kannst den Code gerne kopieren und für deine Seite anpassen. 

a[href^="https://www.awin1.com"],
a[href^="https://pixelschmitt.de/goto/"],
a[href^="https://www.booking.com/"],
a[href^="https://tidd.ly/"]{
    background-color: #ededed;
    padding-right: 5px;
    padding-left:20px;
    background:url(https://pixelschmitt.de/wordpress/wp-content/uploads/2021/09/affiliate-icon.png) no-repeat left center;
}

In vielen Artikeln aus dem Reiseblog findest Du diese Links. Dort verlinke ich zum Beispiel auf Seiten bei tripadvisor. Im aktuellsten Artikel „Gardasee Tipps: Sirmione – Hotel und Restaurants“ sieht das dann so aus:

Affiliate Links per CSS kennzeichnen
Die per CSS gekennzeichneten Links mit dem € davor sind Affiliate Links
nv-author-image

Thomas pixelschmitt

Aus Erlangen und seit 2000 im Online Marketing unterwegs. Solide Ausbildung als Mediengestalter, verschiedene berufsbegleitende Weiterbildungen und Stationen in Agenturen und Unternehmen unterschiedlichster Größe. Hier blogge ich über alle digitalen Themen, die mich interessieren und beschäftigen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.