Linkliste 06 Gestaltung Grafik + Text als Link
    
 HomeVerweise • Linkliste 06 Quellcode  Demo 

 Linkliste 06  (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 (Grafik + Text) mit CSS

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 hoch bewertet. Für Ihre Seite besonders wertvoll: 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!


   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 (Liste06)

Eine solche Linkliste könnte ebenso als Einstiegsseite und Übersicht eingesetzt werden. Ein kurzer Trailer mit Bild dient als kurzer Anriss des Themas. Klicken würde dann zur entsprechenden Seite weiterleiten.

Die gesamte Linkliste und jeder einzelne Link stehen in einem <div>-Container
Hervorhebung bei MouseOver: Text- und Randfarbe der Grafik.



Linkliste 06 - Formatierung durch CSS

Die gesamte Linkliste steht in einem <div>-Container (Liste06) dessen Breite und Rand mit CSS-Angaben formatiert wurde. Jeder einzelne Link inklusive Grafik steht in einem weiteren <div>-Container (Link6). Die Grafik ist mittles CSS-Anweisung formatiert (margin, padding, Rand) und erhielt dazu eine eigene CSS-Klasse (rand). Auch der Beschreibende Text hat eine eigene CSS-Klasse (Lbesch).

HTML-Code im Body-Bereich:

<div class="Liste06">

<div class="Link6">
<a href="#">
<img class="rand" src="grafiken/014.jpg" alt="Foto 1" width="150" height="113">
<span class="Lbesch">
<b>holzige Pflanze aus einer Wurzel</b><br>
Als Baum wird im allgemeinen Sprachgebrauch eine holzige Pflanze verstanden, ...
</span></a>
</div>

weitere Links hier

</div>
CSS-Anweisungen im Head-Bereich:

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

/* Linkliste Liste06 */


#Liste06 {
margin: 0px;
padding: 10px;
border: 1px solid #0090E0;
width: auto;
float: left;
}

.Link6  {
float:left;
border: 0px solid #000000;
height: 140px;
width: 500px;
float: left;
}

#Liste06 img.rand {
float:left;
padding:1px;
height: 113px;
width: 150px;
background-color:#FFFFFF;
border: 6px solid #5F5F5F;
margin: 0px 10px 0px 0px;
}

#Liste06 a:hover img.rand {
padding:1px;
background-color:#FFFFFF;
border: 6px solid #00AFFF;
}


.Link6 .Lbesch {
margin: 0px 0px 0px 10px;
font-family: Verdana,Arial,sans-serif;
font-weight: normal;
font-size:12px;
margin: 0px;
text-transform: none;
text-decoration: none;
height:130px;
}

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

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

-->
</style>













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

Linkliste 02 - Linksammlung für die Webseite

Linkliste 03  (auch als Browser-Startseite)

Linkliste 04 - Eine gruppierte Linkliste für Ihre Webseite








NACH OBEN