Zur Navigation Zum Inhalt Zum Seitenende

Blogheader auf Startseite verlinken

textmate - screenshot

Was gibt es schöneres, als nach einem Tag im Rechenzentrum nach hause zu kommen und einen hübsch geekigen Beitrag zu verfassen?! Also, Obacht!

Wir ihr links seht, habe ich hier keinen in <h1>-Tags gefassten Blognamen eingebaut, sondern lediglich ein Logo, und zwar aus ästhetischen Gründen. Aus praktischen Gründen möchte ich allerdings, dass dieses Logo auf die Startseite verlinkt. Und zwar valide und ohne ein <img> im Quelltext.

Bevor man jetzt aber anfängt mit a’s und div’s rum zu dilettieren, greift man lieber auf eine handliche Lösung zurück, die ich bei WordPress Max gefunden habe: Der onClick-Ansatz.

Dafür baut ihr folgendes in euren Header:

<div onclick="location.href='http://www.blog-url.tld';" class="logo"><h1>Blog-Name</h1></div>

Dazu packt ihr folgende CSS-Formatierung in euer Stylesheet:

.logo {
width: 00px;
height: 00px;
background: #FFF url('logo.png') 0 0 no-repeat;
border: none;
cursor: pointer;
}

.logo h1 {
display: none;
}

Nun habt ihr einen schlanken, validen Quelltext und ein Logo, das auf die Startseite verlinkt. Der in <h1>-Tags gefassten Blognamen wird natürlich auch eingebaut und per display: none; unsichtbar gemacht, damit der Google-Bot weiß wo er ist. Das einzige, was ihr noch anpassen müsste, sind die Maße eures Logos. Außerdem steht es euch natürlich frei, eine border zu benutzen.

Geschrieben am 05. August 2008 von Herschel, abgelegt in Nützliches


Schreib einen Kommentar