Inhaltsverzeichnis

Externe Links per CSS kennzeichnen

Thomas pixelschmitt® Schmitt
LinkedIn Certified Marketing Insider / Digitales Marketing
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

Zuletzt aktualisiert vor 3 Jahren von pixelschmitt

* Mit einem * (Stern) markierte Links sind sogenannte Affiliate-/Empfehlungslinks. Über diese Links gelangst du auf die Seite eines Anbieters. Dieser Anbieter zahlt mir ein kleine Provision. Für dich entstehen dabei keine zusätzlichen Kosten.

Das interessiert dich bestimmt auch

Schreibe einen Kommentar

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