Fancy Zoom für blogger.com, jetzt aber richtig

Bei Cashy bin ich mal wieder auf eine spannende Sache aufmerksam geworden, die jedes Blog und jede Website ungemein pimpt: Fancy Zoom.

Dabei handelt es sich um ein Skript, das aus schnöden Bildchen aufregende Vergrößerungseffekte zaubert. Macht so richtig Spaß, wenn man WordPress auf einem eigenen Server benutzt. Denn da kann man die JavaScripte aus dem Installationspaket direkt ablegen und hat keine Sorgen. Was aber, wenn man so eine arme Wurst ist, die ihr Blog auf Blogger.com (blogspot) hostet und außer Bildern und Videos eigentlich nichts hochladen kann?

Dann muss man eben zur Selbsthilfe greifen. Und die gibt’s nicht bei Google, denn man sucht sich die Finger blutig, um eine Einbauanleitung in Blogger-Blogs zu finden; es gibt einfach keine. Aber trotzdem kann man diesen hübschen Effekt nutzen, wenn man ein bißchen um die Ecke denkt. Und wie das geht, beschreibe ich Euch mal. Aber Vorsicht: erst lesen, dann machen. Ist erstmal nicht ganz profan, aber später wird’s dann sehr entspannt.

1. Man muss sich ein Blog oder eine Seite suchen, die Fancy Zoom benutzt. Zum Beispiel die des Programmierers. Dann mit der rechten Maustaste „Quelltext anzeigen“ auswählen und nach sowas hier suchen:

2. Dann fragt man den Autor der Seite gaaanz lieb, ob man diese beiden Zeilen in seiner eigenen Vorlage einbinden darf. Wenn derjenige das OK gibt, ist das schon mal ganz prima.

3. Jetzt begibt man sich in den Quelltext seiner Blogvorlage: blogger.com -> Dashboard -> Layout -> HTML bearbeiten. Hier werden direkt oberhalb des abschließenden HEAD-Elements (s. Bild oben) die beiden kopierten Zeilen eingefügt, allerdings mit komplettem Pfad, also auch dem „http://www.blablabla.com“, der Domain. Puh! Kann man das noch verstehen..?

4. Direkt unterhalb des abschließenden HEAD füge man nun die hier ebgebildete Zeile ein. Auch hier ist ein Blick auf den Quelltext dieser Seite, die Du jetzt gerade anschaust, hilfreich, aber auch das Bild sollte Dich weiterbringen.

5. Das ist schon die halbe Miete. Denn jetzt ist die Vorlage vorbereitet respektive umgefrickelt und man muss sich nur noch darum kümmern, die Bilder künftig korrekt einzubinden. Auch keine Hexerei.

6. Wenn Du fortan Bilder in Dein Blog einbinden willst, die mit Fancy Zoom vergrößert werden sollen: das gewünschte Bild mit dem Button „Bild hinzufügen“ erstmal nach alter Väter Sitte hochladen, und zwar mit der Einstellung „Bildgröße: mittel“

7. Der Quelltext, der jetzt automatisiert von Blogger.com eingefügt wurde, muss noch ein klitzekleines bißchen bearbeitet werden. Dazu gehst Du in die Ansicht „HTML bearbeiten“, die im Post-Editor oben rechts angezeigt wird. Dann siehst Du nämlich das ganze Elend 😉 Und jetzt suchst Du nach dem Ausdruck „-h“, den Du getrost löschen solltest (tust Du es nicht, dann bricht das nackte Chaos aus, ich verspreche es). Alles andere kannst Du so lassen, nur dieses nichtsnutzige „-h“ muss weg.

Und dann: Posting speichern und sich an dem geilen Effekt erfreuen, der von nun an beim Klick auf ein Bild erscheint!

Also, nochmal zusammenfassend:

· Suche Dir eine Seite, die Fancy Zoom benutzt und frage den Autor, ob Du seine Codezeilen einbinden darfst. Schließlich ist es sein Traffic, den Du verursachst, indem Du Code von seiner Seite lädst.

· Füge dann diese Zeilen mit vollständigem Pfad genau an der richtigen Stelle in Deine Blogger-Vorlage ein. Das musst Du nur 1x machen!

· Wenn Du künftig Bilder in Dein Posting einbaust, dann entferne das „-h“, das im Bilder-Quelltext auftaucht, indem Du in die HTML-Ansicht wechselst und es manuell rausschmeißt.

Mit dieser Methode können Deine Besucher den Effekt sowohl im Internet Exploder als auch im Firefox und in Opera genießen (Safari sollte auch gehen). Allerdings sind die kleinen Bildchen, die an den Ecken des vergrößerten Bildes ein „X“ anzeigen, nicht sichtbar. Die kann man sicher auch „fremdeinbinden“, aber ganz ehrlich: ich bin jetzt zu müde, um mir darüber Gedanken zu machen, denn es funktioniert auch so 🙂 Vielleicht ein andermal. Gute Nacht.

@Cashy: vielen lieben Dank für die Anregung! Wie man sieht, kann man alles passend hinbiegen 😉

@meine Besucher: wer Fragen dazu hat, einfach einen kurzen Kommentar schreiben, ich antworte gerne. Auch ein Blick auf die Seite von Fancy Zoom ist hilfreich, wenn es um das Verständnis des Prinzips geht. Es ist sehr wahrscheinlich, dass meine Anleitung recht kompliziert klingt für Einsteiger. Deshalb: FRAGEN! Wenn was unklar ist.