5202

ein Blog über technische Fragen zu Blogger

Blogger: Gelöschte Seite wiederherstellen

von

In Blogger besitzt jede statische Seite einen eindeutigen Namen - ihr könnt Beispielsweise nur eine Seite 'Kontakt' nennen. Falls ihr diese Seite löscht, bleibt der Name 'Kontakt' trotzdem gesperrt. Das liegt daran, dass Blogger eine 'gelöschte' Seite nicht wirklich löscht, sondern lediglich nicht mehr angezeigt.

Editor-Link

Aus diesem Umstand - keine 'gelöschte' Seite wird wirklich gelöscht - folgt, dass ihr jede statische Seite in Blogger - egal ob gelöscht oder vorhanden - immer über ihren Editor-Link anzeigen könnt. Die allgemeine Form dieses Links schaut so aus:


https://www.blogger.com/blogger.g?blogID=eureblogID#editor/target=page;pageID=eurepageID

Das Problem ist nun die pageID - im Regelfall besitzt ihr sie für eine gelöschte Seite nicht. Wie kommt ihr daran?

pageID

Es gibt zwei Möglichkeiten - zum einen euer eigener Browser. Dieser hat einen Verlauf und kann durchsucht werden. Wenn ihr etwa 'Kontakt' und 'Blogger' sucht, ist die Wahrscheinlich hoch, dass ihr einen Editor-Link mit pageID findet. Klickt diesen Link an und eure gelöschte statische Seite ist zurück im Editor.

Die zweite Möglichkeit ist, dass ihr eure Seite im Google Cache findet. Sucht nach eurer Seite bei Google und wenn ihr sie findet, seht ihr euch mit Rechtsklick 'Element untersuchen' den Quelltext an. Mit der Taste STRG und F durchsucht ihr diesen Quelltext nach pageID [und blogID]. Ihr tragt sie oben in die allgemeine Form ein .. ruft den Link auf und habt eure Seite wieder im Blogger Editor.

.... uuuh ist das kompliziert ...

Falls euch das alles zu kompliziert ist, dann hinterlasst mir in den Kommentaren ein Link auf eure Seite im Google Cache und ich gebe euch den Editor-Link zurück. Ist keine große Mühe.

Regen & Wald

von

Ich habe eine spannende WP-Demo gesehen - ein verregnetes 'Fenster' mit Blick auf ein Waldstück als Vordergrund und im Hintergrund der Text.

Ich habe mich gefragt, ob so etwas auch auf Blogger zum laufen bekommen ist ... es ist :D

Das ist nur eine Demo mit einem Nachmittag Arbeit dahinter - erwartet also keine Performance-Wunder. Die Demo läuft nur auf dem Desktop und da am besten in Chrome und Firefox. Viel Spaß!

miscellaneous no3: Bildschirmfüllende Hintergrundbilder

von

Hintergrundbilder in voller Bildschirmgröße können sehr eindrucksvoll sein. Das ganze hat nur einen Hacken, nämlich um auch auf großen Bildschirmen zu wirken, muss das Hintergrundbild in sehr großer Auflösung vorliegen. So ein Bild in hoher Auflösung kostet euch natürlich viel Bandbreite & Ladezeit.

Damit Besucher mit kleineren Bildschirmen nicht sinnlos große Bilder laden müssen, könnt ihr euer Hintergrundbild an die Bildschirmgröße eurer Besucher anpassen. Dabei gibt es zwei Weg, einmal mit CSS und einmal mit Javascript.

miscellaneous no2: responsive images

von

Das Problem

Bilder sollten grundsätzlich nur in der Größe geladen werden, in der sie in der jeweiligen Situation gebraucht werden. Zu diesem Problem gibt es viele verschiedene Ansätze aber noch keine abschließende Lösung - hier eine Idee für den Fall, das die Bilder auf einem Google-Dienst liegen.

Der Hintergrund

Bilder auf Google-Diensten besitzen eine s Attribut, mit dem sie in einer bestimmten Größe ausgeliefert werden:

Beispiel:

http://2.bp.blogspot.com/-38ohwYpapXc/Uwj14-U2ZeI/AAAAAAAAAF0/gnP17buJU6k/s800/tumblr_mxrv4js70F1st5lhmo1_1280.jpg 

Das Attribut ist hier s800, d.h. das Bild hat eine Breite von 800px.

Blogger

Ein wichtiges Problem ist das in Blogger. Dieser Tag gibt etwa das erste Bild in einem Post mit einem s Attribut von s1600 zurück:

<img expr:src='data:post.firstImageUrl' /> 

Ihr könntet zwar das Bild mit Javascript kleiner rechnen, trotzdem ruft ihr das Bild mit voller Bandbreite auf.

Die Lösung

Meine Idee ist nun, das Bild statt mit src mit data Attribut zu schreiben - das bedeutet, dass das Bild beim Aufruf der Seite zunächst gar nicht geladen wird:

<img expr:data-url='data:post.firstImagelUrl' /> 

Aus dem data Attribut errechnet ihr mit Javascript die passende Bildgröße und übergebt diesen Wert an das src Attribut. Dieser ruft das Bild dann in der richtigen Größe auf.

Beispiel

Ich habe ein Beispiel auf CodePen gebaut. Das data Attribut mit einem Wert von s1600 wird ausgelesen, auf eine Größe von 400px gerechnet, an das src Attribut übergeben und dann geladen.

See the Pen Responsive Image by oliver (@5202) on CodePen.

Diese Idee von mir stammt aus der Entwicklung für ein Blogger-Layout - die Startseite war mir zu langsam. Beim Aufruf von neun Bildern auf der Startseite spare ich jetzt insgesamt 300ms Ladezeit. Das ist rund ein Drittel - der Geschwindigkeits-Gewinn ist enorm!

Ausblick

Die Idee lässt sich natürlich für jede Art von Seite umsetzen, solange die Bilder auf einem Google Dienst liegen [Drive, G+ oder Picasa]. Falls ihr eine professionelle Umsetzung für ein Projekt braucht, sprecht mich über mein Kontaktformular an.

Einen Blogger-Post mittels Text-Link teilen

von

Social Buttons kennt ihr. Das sind die G+, Facebook oder Twitter Buttons, mit denen ihr einen Post teilen, liken oder sonst was anstellen könnt.

Diese Buttons arbeiten zweiseitig, d.h. sie bringen nicht nur eure ‘Likes’, ‘Plus’ whatever in die entsprechenden sozialen Netze, sondern setzen aus diese Netzwerken Cookies, fragen Daten ab und stellen allen möglichen Unsinn an. Unanhängig von der Frage, ob ihr das zB. aus ‘Datenschutzgründen’ nicht wollt [Anm: Ich sehe darin kein Problem!], machen diese Buttons eure Seite langsamer.

Falls ihr die bidirektionale Funktion der Buttons nicht braucht, sondern euren Besuchern nur eine einfache Möglichkeit zum Teilen eines Posts geben wollt, könntet ihr statt Buttons auch simple Textlinks ohne Script anbieten.

  • kein Javascript, kein FB oder Twitter Plugin nötig
  • Textlinks lassen sich beliebig gestalten
  • statt Text könnt ihr auch einen Icon-Font oder eigene Bilder einbinden

In dem heutigem Post geht es nun darum, wie ihr solche Textlinks in Blogger erzeugt.