Geld verdienen mit Social Media
Geld verdienen mit TextenNatürlich kann man auch mit einem (span) und dem (title) Tag arbeiten. Der Nachteil dabei ist aber, dass man diesem kein Design verpassen kann. Da aber Design ein Alleinstellungsmerkmal von Webseiten ist, nutzen wir eben CSS3 um einem TooltipEin Tooltip ist das, was Du gerade siehst, wenn Du mit der Mause über den Link fährst. Dieser wurde nur mit CSS3 erstellt. ein schönes Design zu verpassen.
Tooltip erstellen
Wir brauchen dazu die CSS3 Techniken aus mehreren Tutorials, die ich hier bereits veröffentlicht habe. Wir kombinieren mehrere Styles und erstellen damit ein Top Design, das individuell auf den eigenen Blog zugeschnitten werden kann. Folgende Tutorials kommen zum Einsatz:
- Runde Ecken mit Border-RadiusRunde Ecken kann man mit CSS3 erstellen – Hier erfährst Du wie es funktioniert!
- Verläufe im Hintergrund mit CSS3Gradient Backgrounds Tutorial
- Rgba Farbwerte mit CSS3
- Sprechblasen mit CSS3
- Dreiecke mit CSS3
An dem Beispiel in der Liste kannst Du sehen, dass man auch Links schöner beschreiben kann. Das einzige was mir dabei nicht gefällt, ist, dass man das (title) Attribut wie im zweiten Beispiel der Liste weglassen sollte. Damit ist die Notation nicht mehr valide. Das ist zwar nicht schlimm, stört mich aber. Auf der anderen Seite, wenn ich das (title) Attribut hinzufüge, wie im ersten Beispiel, dann habe ich eine unschöne doppelte Beschreibung des Links.
Wir beginnen mit der HTML Notation. Diese ist recht simpel und besteht aus lediglich zwei Elementen.
HTML
Wir benötigen einen Anker. Aber nur, weil der Internet Explorer 6 mit der :hover Pseudo Klasse nicht zurecht kommt. Er kennt sie zwar, aber nur in Verbindung mit dem Anker Element. Wenn man keine Anker nutzen möchte, dann muss eine Lösung für den Internet Explorer her, die dann wie folgt aussieht:
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('span').show();
}).mouseout(function(){
$(this).children('span').hide();
})
}
});
</script>
Wer sich aber keinen Abbruch mit Ankern tut, der kann folgende Syntax für das HTML Konstrukt benutzen:
Die Klasse Tooltip definieren wir nun im CSS. Sie sorgt für das styling der Tooltips. Anpassungen kann man hier machen wie man das gerne möchte. Vor allem bei den Farben sollte man darauf achten, dass diese zum eigenen Blog passen.
CSS3 Code
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover span
{
visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}
Die einzelnen Schnipsel im Code sind in den vorher erwähnten Tutorials sicherlich ausreichend erklärt, weshalb ich da nun nicht näher drauf eingehen werde.
Beispiele für Tooltips
Falls Du es noch nicht bemerkt haben solltest: Hier im Text sind schon diese Tooltips verbaut. Das Beispiel “Affiliate” im Fazit habe ich hier noch einmal als komplette HTML Notation aufgeführt:
Natürlich nutze ich dabei die gleiche Klasse, wie oben beschrieben, allerdings mit angepassten Farbwerten.
CSS3 Tooltips – Fazit
Warum braucht man so etwas? Eigentlich gar nicht, aber man sollte immer daran denken, dass nicht jeder den Wissenstand von einem selber hat. Auch wenn ich Beispielsweise das Wort AffiliateEin Affiliate ist jemand, der Waren anderer im Internet verkauft und dafür Provisionen erhält. verstehe, heißt das noch nicht, dass jeder Leser das versteht.
Deswegen kann man solche Tooltips sehr schön nutzen, um Worte zu erklären und sich quasi ein Glossar in den Texten aufzubauen. Wir erhöhen damit enorm die Usability der Seite.
Im nächsten Tutorial basteln wir dann ein weiteres nützliches Gimmick zusammen, dass ebenfalls den Blog wieder ein Stückchen verbessern kann. Also dran bleiben und RSS-Feed abonnieren.
So steigert man die Adsense Einnahmen – Section Targeting
Perfekte SEO Texte schreiben – Erfolgreich in den SERPs platzieren
Favicon mit Photoshop erstellen - ICO Format auch für Photoshop dank Plugin
CSS3 Tutorial – Thumbnails mit Hover Effekt- Wie viele Google Anzeigen darf ich einbauen?
Ich schreibe hier mit Leib und Seele über das Geld verdienen im Internet, das Thesis Theme für Wordpress und alles was mich weiter interessiert.
Sascha hat bisher 523 Artikel geschrieben.
{ 1 comment… read it below or add one }
Hi,
schön erklärt, nur dein Fazit finde ich etwas merkwürdig, du sagst ja dass man Tooltips eigentlich nicht braucht. Aber man kann sie ja nicht nur für (Fremd-) Wörter einsetzen, sondern zum Beispiel auch für Icons, die für den ein oder anderen vielleicht nicht selbsterklärend sind.
{ 1 trackback }