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).

Advertisements

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.