5202

ein Blog über technische Fragen zu Blogger

Blogger: Neuer/Älter Link mit jQuery

von
Blogger Blogs sehen sich auf einer bestimmten Art alle sehr ähnlich, weil es gewisse funktionale HTML-Tags gibt, die in blogspot.com eben nur so und nicht anders arbeiten. Zu diesen HTML-Tags gehören etwa die Neuer/Älter Links am Fuß der Posts beziehungsweise am Fuß der Index-Seiten. Diese Tags arbeiten nur innerhalb des Blog-Gadgets und ob man die nun mit weißem Hintergrund und schwarzer Schrift oder als Bild o.ä. gestaltet - trotzdem bleiben diese Tags unten am Fuß der Posts beziehungsweise am Fuß der Index-Seiten.
Das ist innerhalb eines blogspot.com Blogs derart üblich, das einem das vielleicht schon gar nicht mehr auffällt - diese Anordnung ist so zusagen ein untrügliches Zeichen, dass es sich um ein Blogger Blog handelt.
Minimalismus
Ich betreibe z.Z. verschiedene Studien zu extrem 'minimalistischen' Layouts und dort habe ich mich u.a. unter anderem gefragt, ob es nicht andere Lösungen für Neuer/Älter Links gibt, als nur unten am Fuß einer Seite. Um diese Links 'frei' platzieren, habe ich eine jQuery Lösung gebaut, die die URL der vorherigen Seite/nächste Seite ausliest und einen Link einbaut. Vielleicht ist das ja für den ein oder anderen interessant ...

Demo

View Demo
Erläuterung
Ihr könnt mit den Links innerhalb der Indexseite oder auf der Postseite navigieren - nicht benötigte Links werden ausgeblendet. Die Seite ist mit und ohne Javascript benutzbar - als Fallback für 'Kein Javascript' werden die ursprünglichen Links angezeigt. Das 'mitscrollen' der Links ist ein eigenes Thema ... das Layout ist übrigens nicht 'Simpel', sondern vollständig neu geschrieben.

Markup

Das HTML für diese Demo besteht aus zwei Zeilen, that's all:
<a id="newer_link" href="">«« Neuer</a>
<a id="older_link" href="">Älter »»</a>

Script

Das Script ist simpel - es fragt ab, ob es einen Neuen/Älter Link im Dom gibt und wenn "JA", wird das in den entsprechen Anker geschrieben, wenn "NEIN" wird der Anker nicht angezeigt:
<!-- newer/older link -->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#blog-pager').hide();
var older = $('.blog-pager-older-link').attr('href');
var newer = $('.blog-pager-newer-link').attr('href');
if ( $('#blog-pager-older-link').length > 0)  {
$('#older_link').attr('href', older).show();
}
else {
$( '#older_link' ).hide();
};
if ( $('#blog-pager-newer-link').length > 0)  {
$('#newer_link').attr('href', newer).show();
}
else {
$( '#newer_link' ).hide();
};
});
//]]>
</script>

Fallback

Der Fallback ist mit Modernizr gebaut - die original Blogger Älter/Neuer Links werden nur mit der Klasse .js [der Besucher _hat_ Javascript] ausgeblendet, ansonsten werden die Links angezeigt. Alles in allem also 'Unobstructive' Javascript, auch ein Besucher mit abgeschaltetem Javascript kann die Seite ohne Einschränkung nutzen.
Nachtrag
Ein Leser hat sich dafür interessiert, wie dieser Fallback für Besucher ohne Javascript funktioniert, deswegen gebe ich als Nachtrag noch mal eine genaue Beschreibung:

Sucht in eurem Layout als erstes nach dem httpequiv -Header (findet sich ziemlich weit oben):
 <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
Direkt _darunter_ legt ihr ein sehr, sehr kleines Modernizr-Script - ihr könnt es entweder direkt aus meiner Dropbox streamen, oder ihr holt euch ein eigenes:
<script src='http://dl.dropbox.com/u/12178319/javascripts/modernizr.custom.86389.js'/>
Dann sucht ihr in eurem HTML Tag (3. Zeile von oben) diese Stelle:
<html b:version='2' class='v2' ...
Gebt eurem HTML-Tag nun eine neue Klasse no-js:
<html b:version='2' class='v2 no-js' ...
Fertig! Ihr habt nun eine Klasse no-js in eurem Wurzelelement, das vom Modernizr-Script in eine Klasse js umgeschrieben wird. Das heißt, ihr könnt ab jetzt mit vorangestellten .no-js beziehungsweise .js jedes Element anzeigen/verbergen abhängig davon, ob eure Besucher Javascript eingeschalten haben oder nicht :=).

Kommentare

Ich gehe mal davon aus, dass wenn jemand so etwas zu bauen versucht, gewisse Grundkenntnisse in HTML und Javascript vorhanden sind - deswegen habe ich meine Erläuterung sehr kurz gehalten. Scheut euch aber nicht nachzufragen, falls ihr mehr Informationen dazu braucht oder ihr irgendwo stecken bleibt.