5202

ein Blog über technische Fragen zu Blogger

Blogger: 404-Fehlerseite anpassen

von
Seit ein paar Wochen Monate könnt ihr auf blogspot.com Blogs die 404 Fehlerseite individuell gestalten. Yeah ... Begeisterung ... auf-die-Tische-spring ... Jubel :D!

Ernsthaft: Die 404 Seite wird öfters aufgerufen als ihr denkt, nämlich bei allen Seitenaufrufen, wo-aus-welchem-Grund-auch-immer der Link gebrochen ist. Da a bisserl Arbeit rein zu stecken ist also gar nicht verkehrt.

Der Editor

Das überraschende (und für mich unverständliche) ist, es funktioniert zwar sonst nichts im neuen Dashboard GUI, aber Blogger hat euch einen komplett neuen Editor spendiert, in dem ihr HTML, CSS und Javascript für die 404 Fehlerseite anwenden könnt. Und das klappt sogar!

Ihr findet diesen Editor unter Dashboard > Einstellungen > Sucheinstellungen > 'Benutzerdefinierte Seite für "Seite nicht gefunden"'

HTML

Wenn ihr's einfach haben wollt, könnt ihr in diesen Editor einen kurzen Text reinschreiben und das wird dann bei der Fehlermeldung in einem kleinen grauen Kästchen angezeigt .. nicht besonders eindrucksvoll :(.

Ihr wollt was, das a bisserl mehr hermacht? Dann schreiben wir doch einen kleinen Text mit HTML:
<h3 style="font-size: 72px; color: red; margin-top: 40px">Oooops</h3>
<span style="font-size: 42px">... da ist wohl etwas schief gelaufen ...</span>
<br /><br /><br />
<span style="font-style:italic; font-size: 30px">Du wirst in 4 Sekunden zurück auf die Startseite geleitet!</span>
Erklärung
Im <h3> Tag liegt die Überschrift. Mit einer Inline Style Anweisung macht ihr sie 72px groß und gebt ihr die Farbe rot. Ihr könnt das natürlich weiter Anweisungen schreiben wie ihr lustig seid, ein guter Ausgangspunkt ist mein Post CSS für Schrift.

Im <span> Tag kommt der Text ... die Style Anweisung dazu setzt die Schriftgrüße auf 42px.

Danach kommt ein Zeilenumbruch mit zwei Leerzeilen und zwar schreiben wir das direkt in das HTML mit <br /> Tags.

Als letztes kommt noch mal ein <span> Tag mit Schriftgröße 30px und Schriftart kursiv.

CSS

Um klar zu machen, dass die 404-Seite keine normale Blogseite ist, blenden wir mit CSS alle normalen Blogelemente aus. Dazu nehmen wir diese CSS und setzen sie in eine <style> </style> Anweisungen:
<style> 
aside, .blog-pager, .blog-feeds, footer, .Attribution, .Header, .tabs{
display: none
}
.main-inner .columns {padding: 0}
.status-msg-border {
border: none
}
.status-msg-bg {
background: transparent
}
</style>
Ich habe das im 'Simple' Layout getestet und dort sind tatsächlich alle Elemente ausgeblendet - falls das in irgendeinem Layout schräg ausschaut, meldet euch, ich trage dann die entsprechende CSS nach.

Javascript

Als letztes noch ein kleines Goodie, nämlich eine automatische Weiterleitung auf die Startseite nach 4 Sekunden mit Javascript:
<script type = "text/javascript"> 
redirect= setTimeout(function() { window.location.replace("/")
}, 4000); 
</script>
Achtung: Macht besser keine Umleitung mit location.href - dabei wird die URL im Browser gespeichert und falls euer Besucher im Browser 'zurück' geht, kommt er in eine endlose Schleife ... erzeugt keine positive 'Besucher-Erfahrung' :).
Anpassung
Die Weiterleitung erfolgt nach 4000 Zeiteinheiten, das sind 4s. Falls ihr einen größeren oder kleineren Wert haben wollt, könnt ihr das in dem Script anpassen.

Zusammenfassung

Alles zusammen könnte eine 404-Fehlermeldung so ausschauen:
<style> 
aside, .blog-pager, .blog-feeds, footer, .Attribution, .Header, .tabs{
display: none
}
.main-inner .columns {padding: 0}
.status-msg-border {
border: none
}
.status-msg-bg {
background: transparent
}
</style>
<h3 style="font-size: 72px; color: red; margin-top: 40px">Oooops</h3>
<span style="font-size: 42px">... da ist wohl etwas schief gelaufen ...</span>
<br /><br /><br />
<span style="font-style:italic; font-size: 30px">Du wirst in 4 Sekunden zurück auf die Startseite geleitet!</span>
<script type = "text/javascript"> 
redirect= setTimeout(function() { window.location.replace("/")
}, 4000); 
</script>
Zum anwenden packt ihr das - so wie es hier steht - in den Editor bei 'Benutzerdefinierte Seite für "Seite nicht gefunden"', speichert und schaut euch das Ergebnis an.

Ihr ruft irgend eine Seite auf die es nicht gibt - etwa http://euerBlog.blogspot.com/p/blogger-ist-doof.html und schaut euch das Ergebnis an ... ich bin sicher, ihr findet das eindrucksvoller als ein kleines graues Kästchen ...

Anmerkungen, Fragen

Wenn ihr weitere Ideen habt und euch die CSS/HTML fehlt, fragt einfach nach. Wenn ihr irgendwelche Wunderwerke an 404-Seiten gebaut habt und eure Umwelt dran teilhaben lassen wollt, dürft ihr die hier gerne verlinken.