Forum - Externe Links mit Symbol - Links deutlicher darstellen!

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Das neue Template Xobor (v6) � Externe Links mit Symbol - Links deutlicher darstellen!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Externe Links mit Symbol - Links deutlicher darstellen! datum

07.04.2020 13:24 (zuletzt bearbeitet: 11.01.2025 17:52)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3472
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Externe Links mit Symbol - Links deutlicher darstellen!
Aktualisiert 11.01.25

Um Links in Texten deutlicher darzustellen, werden sie oft unterstrichen, farblich verändert oder wenn es ganz dezent sein soll, nur mit einem "Mouseover" verändert!
Soll der Lesefluss nicht gestört werden, sind Links oft minimalistisch gekennzeichnet, hat aber den Nachteil, dass sie kaum zu erkennen sind.
Nicht so störend können Grafiken sein! Auch hier muss man abwägen und es ist auch Geschmackssache, wie stark die Grafiken ins Gewicht fallen sollen!

Lösungen 1: ⇗

Die einfachste Art funktioniert über "Unicodes", die normal formatiert, gleich mit Schriftgröße und Farbe eingebaut werden können. Sie werden einfach in den Textfluss eingebaut! Funktioniert bestens!

Wichtig! In den "Xobor-Foren" ist es bei der Vorschau so, dass beim ersten Klick die Unicodes normal angezeigt, beim zweiten Klick umgesetzt und dann erst angezeigt werden!
Beim Speichern eines Beitrages muss mindest einmal die Vorschau angeklickt werden, damit die Unicodes umgesetzt und als Symbol gespeichert werden können!

Die Unicode-Zeichenfolge wird ganz normal in den Textfluss eingebunden und kann, wie Text auch, frei formatiert werden!
Somit kann ganz nach Belieben ein Link hervorgehoben werden oder nicht!

Unicode: ↗

↗ ↗ ↗ ↗ Hier geht es zur Bildergalerie ↗

Unicode: ⇗

⇗ ⇗ ⇗ ⇗ Hier geht es zum Blog ⇗

Unicode: ⬀

⬀ ⬀ ⬀ ⬀ Hier geht es zur Portal ⬀

Schließen

Lösung 2:

Link-Symbole können auch als kleine "Background-Grafiken" eingesetzt und in ihrer Größe beliebig angepasst werden!
Will man die Grafiken nicht selber erstellen, kann man sie suchen und bestens mit dem Suchbegriff "External Link Icon", "External Link Symbol" oder "External Link Grafik" finden!
Viele Grafiken haben allerdings einen weißen Hintergrund, der nicht für jedes Forum passt.
Sucht man Grafiken mit der Endung *.png, sind sie fast immer ohne farblichen Hintergrund!

//files.homepagemodules.de/b104774/a_257_5cf3b1f1.png

//files.homepagemodules.de/b104774/a_258_066ab7ea.png

//files.homepagemodules.de/b104774/a_259_908f34a7.png

//files.homepagemodules.de/b104774/a_260_b36ae9bf.png

//files.homepagemodules.de/b104774/a_263_4f65c07f.png

//files.homepagemodules.de/b104774/a_264_c4413b27.png

//files.homepagemodules.de/b104774/a_265_a72f2d2b.png

//files.homepagemodules.de/b104774/a_262_69fd276a.png

//files.homepagemodules.de/b104774/a_256_a1b4bc38.png

//files.homepagemodules.de/b104774/a_271_068ff447.png

//files.homepagemodules.de/b104774/a_269_a3547a82.png

//files.homepagemodules.de/b104774/a_266_42760735.png

//files.homepagemodules.de/b104774/a_267_5e485335.png

//files.homepagemodules.de/b104774/a_270_cc6839b6.png

//files.homepagemodules.de/b104774/a_268_e999beb2.png

//files.homepagemodules.de/b104774/a_272_77a06e7d.png

//files.homepagemodules.de/b104774/a_273_04da5ea6.png

Schließen

Mit dem folgenden Eintrag können komplette Kategorien und Bereiche, wie Beiträge, Bildergalerie, Blog u.s.w. mit Link-Grafiken versehen werden!
Wichtig ist, welcher Bereich mit den Link-Grafiken versehen werden soll!
Über die rechte Maustaste und "Untersuchen" kann man die zuständige "class" ausfindig machen!
Im Beispiel sind für das Business-Template, die Beiträge, die Aktivity-Feeds, Letzte Beiträge und der Blog bedacht!
Eingetragen wird alles in Eigener CSS Code!
In Zeile 3 wird die Größe der Grafik eingestellt.
In Zeile 4 der Abstand zwischen Verlinkung und Link-Symbol.
In Zeile 5 der Abstand zwischen Link-Symbol und fortlaufenden Text.

1
2
3
4
5
6
 
.xquoteable a, .cmhsp a, .fdetail a strong,  .blog-article-body a{
background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat;
background-size:10px;
padding-right:15px !important;
margin-right:5px;
}
 

Im V6 & Mobil ist der Eintrag minimiert!
Hier sind nur die Beiträge mit Link-Grafiken bedacht!
Eintrag in CSS / SCSS!

1
2
3
4
5
6
 
.xquoteable a {
background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat;
background-size:10px;
padding-right:15px !important;
margin-right:5px;
}
 

Schließen

HTML-Links können über "style" gezielt mit Link-Grafiken versehen werden!
Anpassung erfolgen wie bereits beschrieben!

<a style="background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat; background-size:10px; padding-right:15px;margin-right:5px;" href="https://www.server.de">External - Link - Grafik</a>

Schließen

Umschlossene Foren-Links können über " ... " gezielt mit Link-Grafiken versehen werden!
Anpassung erfolgen wie bereits beschrieben!

[style=background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat; background-size:10px; padding-right:15px !important;margin-right:5px;][url=https://www.server.de]External - Link - Grafik[/url][/style]

Schließen

Umschlossene Foren-Links können über neu erstellte "Foren-Codes" gezielt mit Link-Grafiken versehen werden!
Unter "Admin > Layout > Iconbar > Iconbar bearbeiten", Reiter "Foren-Code " aufrufen!
"Erweiterter Foren-Code " muss eingeblendet sein (Grundstellung)!
Unter Ersetze: und Mit: folgendes eingeben!
Anschließend speichern nicht vergessen!
Erstellten Foren-Code in "nicht sichtbar " (linke Seite) verschieben!

1
2
3
4
5
 
Ersetze: 
[Link] ... [/Link]
 
Mit:
<span style="background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat; background-size:10px; padding-right:15px !important;margin-right:5px;"> ... </span>
 

[Link][url=https://www.server.de]External - Link - Grafik[/url][/Link]

Schließen

Nachtrag für die mobile Funktion:

1. Damit die Link-Grafiken in den Templates V1-4 auch Mobil funktionieren, muss der Eintrag auch in "" erfolgen!
2. Adresse der Background-Grafik ohne "HTTPS" muss unbedingt in Anführungszeichen gesetzt werden!
3. Wichtig! Beim Test-Wechsel der Templates immer CSS und CSS / SCSS überprüfen!

https://files.homepagemodules.de/b104774/a_263_4f65c07f.png

Bis dann und viel Spaß

Wolfgang

Hans58, ichwersonst und Kipper-Spedition finden das Top!

Antworten

Moderations-Kommentar:

Beitrag aktualisiert, Anleitung überarbeitet!

#2 | RE: External - Link - Grafik: Links deutlicher darstellen! datum

12.07.2023 12:00 (zuletzt bearbeitet: 12.07.2023 19:54)

Kipper-Spedition

Informationen anzeigen

Beitr�ge:	219
Registriert seit:	09.10.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Stier
Likes	159

Hallo Wolfgang,
ich hab die Link-Grafik im CSS eingefügt.

1
2
3
4
5
6
 
.xquoteable a{
  background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat;
  background-size:10px;
  padding-right:15px;
  margin-right:5px;
}
 

Schlie�en

Wie bekomme ich denn die Linkzeichen bei den Zitaten weg, oder die Zeichen weiter nach hinten gerückt? So sieht es nicht gerade schön aus. Ich brauche das Linksymbol eigentlich nur in den Beiträgen.

Wie immer vorab ein großes Dankeschön!

Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang und Hans58 finden das Top!

Antworten

#3 | RE: External - Link - Grafik: Links deutlicher darstellen! datum

12.07.2023 21:37 (zuletzt bearbeitet: 12.07.2023 21:44)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3472
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Zitat von Kipper-Spedition im Beitrag #2
Hallo Wolfgang,
ich hab die Link-Grafik im CSS eingefügt.

.....

Wie bekomme ich denn die Linkzeichen bei den Zitaten weg, oder die Zeichen weiter nach hinten gerückt? So sieht es nicht gerade schön aus. Ich brauche das Linksymbol eigentlich nur in den Beiträgen.

Wie immer vorab ein großes Dankeschön!

Arndt

Hallo Arndt.

Das sollte nicht so aussehen!

Lösung 1:

Fehler behoben!
Für die Grafik wird mit "padding-right" Platz gemacht und hier hat es im Zitat nicht funktioniert!
Habe "padding-right" ein "!important" spendiert, jetzt geht es (siehe Zeile 4)!
Im Beitrag #1 ist bereits alles nachgetragen!

1
2
3
4
5
6
7
 
/* Linksymbol für Links in Beiträgen */
.xquoteable a {
  background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat;
  background-size:10px;
  padding-right:15px !important;
  margin-right:5px;
}
 

Lösung 2:

Linksymbol im Zitat ausblenden.
Muss nach dem CSS-Eintrag "Linksymbol" eingetragen werden!

1
2
3
4
5
6
 
/* Linksymbol ausblenden */
/* Zitate */
.xquotecont a {
  background:none !important; 
  padding-right:0 !important;
}
 

PS:

Das Linksymbol macht sich nicht in allen Bereichen nützlich, manchmal passt es einfach nicht!
Hier können die Classes ausfindig gemacht und das Linksymbol ausgeblendet werden!

Besten Dank fürs Testen und Feedback
Wolfgang

Kipper-Spedition findet das Top!

Antworten

#4 | RE: External - Link - Grafik: Links deutlicher darstellen! datum

13.07.2023 03:31

Für das testen gehe ich gerade noch so.
Und stimmt, manchmal muss ich bei meinen Angestellten auch mal was rot und mit Ausrufezeichen schreiben... und schon klappt das,,,,

Wolfgang!

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

FAQ verbessern und interessanter gestalten - (v4, v6 + Mobil) � � Xobor-Spenden-Button - In der Foren Übersicht, im Profil, im Beitrag, im Portal und in der Mitgliederliste!

�hnliche Themen

Antworten

Letzter Beitrag

externe Links mit Symbol kennzeichnen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Hans58 1 11.01.2025 18:01
Wolfgang • Zugriffe: 44

Das Plugin "Externe Inhalte einbinden" - Cookie Abfrage erweitern
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

12.03.2024 10:08
von

Kipper-Spedition • Zugriffe: 447

Präsentationskalender - Darstellung interessanter Themen - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

09.04.2024 00:35
von

Wolfgang • Zugriffe: 1956

YouTube Video-Link in Embed-Link konvertieren (Video-Konverter)!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

09.07.2019 19:17
von

Wolfgang • Zugriffe: 1519

Fehlerhafte Darstellung und Verlinkungsfehler mit dem Samsung-Browser im S5
Erstellt im Forum Tricks & Tipps f�r Smartphones und iPhones von Wolfgang 0 23.06.2018 23:31
Wolfgang • Zugriffe: 739
Kopieren von Symbolen und Bildern erlaubt?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 11.05.2018 18:31
Wolfgang • Zugriffe: 595
Windows 10 Symbol aus der Taskleiste entfernen
Erstellt im Forum Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps von Wolfgang 0 22.07.2015 19:36
Wolfgang • Zugriffe: 1511

Syntax-Highlighting - Quellcode im Forum farbig darstellen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

21.02.2015 21:29
von

Wolfgang • Zugriffe: 1381

Forum-Codes nicht ausführen, Forum-Codes farbig darstellen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

07.01.2009 00:45
von

Wolfgang • Zugriffe: 1663

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

58%

Externe Links mit Symbol - Links deutlicher darstellen!Aktualisiert 11.01.25

Externe Links mit Symbol - Links deutlicher darstellen!
Aktualisiert 11.01.25