Linkliste 01 Gestaltung Grafik + Text als Link
    
 Home • Verweise • Linkliste 01 Quellcode-01  Quellcode-02  BEISPIEL 

 Linkliste 01  (Suchmaschinenfreundlich)

Sie planen eine Linkliste für Seiten, die im Gegenzug auch Ihre Seite verlinken. Das ist nicht nur eine Nettigkeit. Wenn Sie andere Seiten verlinken soll die Auflistung übersichtlich sein und ihren eigentlichen Zweck (Bewertung verbessern) erfüllen.
Gestaltung einer Linkliste mit CSS

UPDATE  02.11.2011  neues Beispiel Liste01 - CSS-Formatierung

Themenähnliche Webseiten, die einen Link auf Ihre Web-Präsenz gesetzt haben, unterstützen Ihre Seite bei der Bewertung durch Suchmaschinen. Für eine Bewertung (Page-Ranking) zählt neben anderen Kriterien besonders die Anzahl der Verweise von inhaltsgleichen / themenähnlichen Seiten. Keyword-Verwandtschaften werden neuerdings ebenfalls hoch bewertet. Für Ihre Seite besonders wertvoll (Google): Wenn von Seiten, deren Page-Ranking mindestens 4 ist, verwiesen wird.

Aber belassen Sie es nicht bei einem Grafik-Verweis. Ein kleines Banner ist zwar schick, hilft der verlinkten Seite bei der Bewertung durch Google aber weniger als ein aussagekräftiger Textlink. Ich schlage eine Kombination vor! Bei Grafiken ist ein aussagekräftiger Eintrag für das alt-Attribut Pflicht (sagt Wilhelm).


   Optische Gestaltung

Ein kleines Piktogramm hilft dem Besucher interessante Themen / Seiten gleich zu erkennen.

Schließlich werden wir ja dazu erzogen immer mehr auf kleine Buttons und Bildchen zu achten. Webseiten werden nicht mehr gelesen sondern 'geschaut'. Hätten Sie ihre Maus nicht fest in der Hand, wären Sie sogar versucht das kleine Piktogramm mit dem Finger zu berühren.


Beispiel einer Linkliste (Liste01)

Die gesamte Linkliste steht in einem <div>-Container.
Jeder einzelne Link inclusive Grafik steht in einem Absatz <p>.
Hervorhebung bei MouseOver: Text- und Randfarbe der Grafik.

Schmetterlinge in Südeuropa Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.

Fachwerkhäuser am Niederrhein Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.

Linkbeschreibung Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.

Linkbeschreibung Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.

Linkbeschreibung Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.


Links wurden zuletzt am 31.07.2011 überprüft


Liste01 - Formatierung durch CSS

Die gesamte Linkliste steht in einem <div>-Container (Liste01). Jeder einzelne Link inclusive Grafik steht in einem Absatz (<p>). Die Grafik ist mittles CSS-Anweisung formatiert (margin, padding, Rand). Elemente die als Verweis dienen erhalten ebenfalls CSS-Formatierungen (Text, Grafikrand).

Alternative Notierung der einzelnen Links in <div>-Containern siehe Linkliste06 
<div class="Liste01">

<p class="linkliste">
<a target="_blank" href="http://www.domainname.de">
<img src="pictos/233.gif" width="42" height="42" border="0" alt="">
Schmetterlinge in Südeuropa Ne vero prompta ...
</a>
</p>

</div>

<style type="text/css">
<!--

/* Linkliste Liste01 */

.Liste01  {
width:480px;
margin: 0px 0px 10px 0px;
padding: 0px 0px 10px 10px;
border:1px solid #0090E0;
}

.Liste01 p.linkliste {
clear:left;
margin: 10px 0px 0px 0px;
padding: 5px 0px 0px 0px;
height:60px;
}

.Liste01 img {
height: 42px;
width: 42px;
margin: 0px 15px 0px 0px;
padding: 3px;
border: 10px solid #000000;
}

.Liste01 .linkliste a, .Liste01 .linkliste a:visited {
font-family: Verdana,Arial,sans-serif;
font-size: 12px;
color: #445555;
text-transform: none;
text-decoration: none;
}

.Liste01 .linkliste a:hover {
color: #0090E0;
text-decoration: none;
}

.Liste01 a img {
border:10px solid #000000;
}

.Liste01 a:hover img {
border:10px solid #0090E0;
}

-->
</style>



Beispiel einer Linkliste - Liste02  (ohne Hervorhebung der Grafik)

Schmetterlinge in Südeuropa Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.

Fachwerkhäuser am Niederrhein Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.

Linkbeschreibung Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.

Linkbeschreibung Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.

Linkbeschreibung Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit.

Links wurden zuletzt am 31.07.2011 überprüft





kostenlose Piktogramme

ca. 300 dieser Piktogramme 42 x 42 Pixel finden Sie in meiner MINI-Image-Box



Beispiel einer Linkliste - Liste03  (ohne Hervorhebung der Grafik)

Hier geht es um die Haltung von Meerschweinchen.
Saskia kommt aus Karlsruhe.

Susas Netzwerk für Wissensweitergabe. Das wissenschaftlich fundierte Verzeichnis Wissen, Lernen, Geschichte, Politik, Mittelalter, Wissensmanagement

IGV-Pokal, das Volleyballturnier für Hobby-Teams Damen, Herren, Mixed mit ganzjährig laufender Vorrunde und einer Endrunde zum Ende des Jahres

Interessantes über Loitz und Vorpommern Bahnhof Loitz Daten, Bilder, Gleisplan, H0-Modell Bahnerlebnisse Eisenbahn

private Seite über Hunde und Rennmäuse, Kritiken über Hundebücher Webmaster: Tanja Valentin

Tischtennis Abteilung des FC Rhenania Immendorf 1910 e.V., Geilenkirchen, Verein, Termine, Spielbetrieb, Mannschaften, Trainingszeiten, Berichte usw.

Haustiercafe: Informationen rund um Haustiere, vom Züchterverzeichnis über Tierheime bis zum Kleinanzeigenmarkt.

Anke-Art: Fonts Kunst Fotos private art gallery with free original fonts and fun stuff

Dieter Geigers Home YamahaTT600, JFC-Oberstenfeld e.V., Oberstenfeld bei Stuttgard

HTML-Workshop
HTML Tipps, Design, Layout, Browserspezifisch, Useability, Lexikon

Inliner Forum Kassel, Inline-Skaten in Nordhessen,
Infoboard für Skater

Links wurden zuletzt am 31.07.2011 überprüft



Liste02 + Liste03 - Formatierung durch CSS

Jeder einzelne Link inclusive Grafik steht in einem Absatz (<p>). Die Grafik ist mittles CSS-Anweisung links angeordnet und hat einen rechten Abstand zum Text von 15 Pixel.

<p class="linkliste">
<a target="_blank" href="http://www.kassel-inline.de">
<img src="pictos/233.gif" width="42" height="42" border="0" alt="">
Inliner Forum Kassel, Inline-Skaten in Nordhessen Infoboard für Skater
</a>
</p>

<style type="text/css">
<!--

.linkliste {
 width:450px;
 height:50px;
 margin: 0px 0px 10px 0px;
}

.linkliste img {
 float: left;
 height: 42px;
 width: 42px;
 margin: 1px 15px 1px 1px;
}

.linkliste a, .linkliste a:visited {
 font-family: Arial, sans-serif;
 font-size:12px;
 color: #445555;
 text-transform:none;
 text-decoration: none;
}

.linkliste a:hover {
 color: #9000E0;
 text-decoration: none;
}

-->
</style>










Linkliste 02 - Linksammlung für die Webseite

Linkliste 03  (auch als Browser-Startseite)

Linkliste 04 - Eine gruppierte Linkliste für Ihre Webseite

Linkliste 06 - Eine Linkliste für Ihre Webseite - Grfik + Text

NACH OBEN