5202

ein Blog über technische Fragen zu Blogger

Sitemap und Blogger

von

Im Blogger-Hilfeforum ist die Frage gestellt worden, was in Webmaster-Tools bei einem Blogger Blog eigentlich als Sitemap eingetragen wird?

Die Frage ist aus zwei Gründen interessant. Blogger hatte bis vor kurzen keine generischen Sitemaps und deswegen finden ihr im Internet unzählige Posts zum Thema sitemaps und blogger, die allesamt irgendwelche irren Hacks empfehlen, um eine Pseudo-Sitemap zu kreieren.

Blogger besitzt seit November 2014 nun echte Sitemaps als .xml Dokument und damit sind sämtliche Tricks & Tips für eine Pseudo-Sitemap hinfällig. Leider hat Blogger das bis jetzt nicht in seiner Blogger-Hilfe dokumentiert … uuuuh, die Blogger-Hilfe bei Sitemaps ist 2008 stehengeblieben? Blame on you, Blogger :)!

Ich denke daher, es ist sinnvoll, das Thema Blogger und Sitemaps mal auf dem neuesten Stand zusammenzufassen.

Beliebig viele Seite-Gadgets möglich

von

Eine Leserin hat mich darauf aufmerksam gemacht, dass ihr in Blogger seit neuesten beliebig viele Seiten-Gadgets über das Blogger-Dashboard einfügen könnt. Das ist bemerkenswert und zwar deswegen, weil das zwar schon immer ging, aber nur als Hack und nicht über das Dashboard.

Außerdem wurde ein Bug im Seiten-Gadget gefixed, das Nutzer seit Jahren in die Verzweiflung getrieben hat. Bei einen neuen Blog war das Seiten-Gadget zwar vorhanden, wurde aber nicht angezeigt, solange keine Seiten erstellt worden sind. Gleichzeitig war das Gadget im Layout über das Blogger-Dashboard ausgegraut, weil ja ein Seiten-Gadget bereits vorhanden war ... ein Bug aus der Hölle!

Interessant ist, dass das der dritte oder vierte Fix von uralten Problemen innerhalb kürzester Zeit ist. Irgendetwas scheint in Blogger gerade in Bewegung zu geraten. Ich bin gespannt wo das hin führt und ob das über reine Bug-Fixes hinaus geht.

Ich habe auf jeden Fall beschlossen, die nächsten Monate den Code von Blogger zu beobachten und über etwaige Änderungen zu schreiben. Könnte spannend sein, was sich da tut.

Yo - ein experimentelles Blogger-Layout

von

Um verschiedene Techniken in Blogger auszuprobieren, habe ich ein experimentelles Layout gebaut - Yo!

Yo kommt außer beim Ladebildschirm ganz ohne Javascript aus - der Ladebildschirm [der loading screen mit dem Spinner beim Aufruf der Seite] ist nötig, weil sonst die großen Hintergrundbilder 'Schicht für Schicht' geladen werden. Das schaut seltsam aus ... deswegen beim Seitenaufruf der Layer über den Blog.

Yo eignet sich nicht zum bloggen - es ist ein Experiment, zum testen. Mir macht's mehr Spass, etwas konkretes zu bauen ... also habe ich Yo geschrieben.

Postlisten mit Ajax erzeugen

von

Ich hatte die Woche eine spannende Diskussion um die Frage, wie man in Blogger Listen von Blog-Elemente erzeugen kann, etwa eine Liste aller Post-Titel.

Das geht prinzipiell über den JSON-Feed und ist in den einschlägigen Tutorials&Tricks Blogs schon zigmal beschrieben worden - nach meinem Gefühl schreiben dabei alle von Scorpy ab. Scorpy ist ein sehr, sehr kreativer Top-Beitragender aus dem englischsprachigen Blogger-Help-Forum und sein Post zeigt zugleich das größte Problem, wenn ihr mit dem Feed arbeitet, nämlich dass das alles wenig intuitiv ist.

Ich denke, deswegen verwendet das auch keiner :(.

Aus der oben erwähnten Diskussion ist nun eine neue, simple Idee entstanden - ihr könnt über ein XMLHttpRequest auch nur Fragmente eures Blogs laden - zB. nur die Post-Titel.

Probiert das in der Demo aus. Die Links in dem grünen Alert laden alle Post-Titel oder nur die Post-Titel eines bestimmten Labels. In der Demo sind zwar nur vier Post-Titel - funktionieren würde das natürlich auch mit mehr Titel!

Pong Myri

von

Dieser tolle Post von Myriam Kreatif soll der Ping sein ... von mir jetzt ein Pong dazu!

Zur Erinnerung: Myri hat zwischen 2. und 3. Post mit jQuery ein HTML-Element eingefügt - in Blogger geht das auch mit konditionalen Tags, ohne Javascript!

Das grüne Alert in der Demo wird zwischen 2. und 3. Post angezeigt - no Javascript!

Blogger: removing “/p/” and “.html” from page URL

von

Update! Im Seiten-Gadget funktionieren jetzt externe und interne Links auf nicht-statische-Seiten!

Seit Blogger 2009 die statischen Seiten eingeführt hat, finden viel Nutzer die Seiten-URL mit dem obligatorischen “/p/” zwischendrin und “.html” am Ende hässlich. Ich bin sogar der Meinung, dass die Wahrnehmung von Blogger als ‘unprofessionell’ a bisserl was mit dieser URL Struktur zu tun hat. Von WP ist man reine, klare Links gewohnt und das ist Standard und wer das nicht hat, is bucklig und doof :).

Auf jeden Fall verfolgt mich seit Jahren die Frage, ob man ein Seiten-URL nicht auch ohne dieses “/p/” und “.html” schreiben kann.

Was soll ich sagen, es geht! Ihr könnt mit a bisserl Ajax und der coolen HTML5 API praktisch beliebige URLs schreiben. Testet das in der Demo:

Klickt im Seiten Gadget auf die Links und öffnet damit die Seiten - schaut euch die URL im Browser an - verlinkt auf eine ‚reine‘ URL - geht in der Browser-History vor und zurück. All das funktioniert ‚normal‘ und wie ihr es gewohnt seid. Für Asbach-Uralt Browser gibt es einen Fallback, in der sich die Seiten ‚klassisch‘ in der Form /p/foo.html öffnen.

Blogger: Globally conditional data tags for all page types

von

Ich habe mir die Mühe gemacht, alle konditionalen Tags für die verschiedenen Seite-Typen in Blogger zusammenzufassen. Das gibt's auch anderswo im Netz - nur ist das entweder veraltet oder unvollständig.

Ihr findet in diesem Gist die konditionellen Tags für die index_page[= Übersichtsseite}, item_page [Postseite], archiv_page, label_page, search_page, error_page und static_page.

Was neu ist und was es noch nirgendwo gibt, wie ihr eine spezifische statische Seite in allgemeiner Form ansprechen könnt:


<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'> 
  <!-- a specific static page with name 'foo' -->
</b:if>

Das ist ein konditionaler Tag für eine statische Seite mit dem Seitennamen 'foo' und das Äquivalent zur canonischen URL www.euerBlog.blogspot.com/p/foo.html. Ihr müsst beachten, dass Seitennamen case-sensitiv sind, d.h. foo =! Foo.

Ich habe außerdem die logischen Verknüpfungen AND, OR & NOT mit konditionellen Tags beschrieben.


#AND
 
<b:if cond='data:blog.pageType == "index"'>
  <b:if cond='data:blog.searchQuery'>
    <!--search_page AND index_page-->
  </b:if>
</b:if>
 
 
#OR
 
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl   &quot;p/foo.html&quot;'> 
  <!-- static_site foo OR static_site bar -->
      <b:else/>
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl   &quot;p/bar.html&quot;'> 
  <!-- static_site foo OR static_site bar -->
   </b:if>
</b:if>
 
 
#NOT
 
<b:if cond='data:blog.pageType != "index"'>
  <!-- all pages NOT index pages -->
</b:if>
 
<b:if cond='data:blog.url != data:blog.homepageUrl'> 
  <!-- all pages NOT homepage -->
</b:if>

Diese konditionalen Tags solltet ihr immer dann anwenden, wenn ihr ein HTML-Element beziehungsweise Markup zB. auf der Startseite wollt und auf der Postseite nicht. Ihr solltet es _nicht_ dazu nehmen, um diese Elemente zu gestalten. Dazu gibt es CSS und die Klassen .index, .item, .static_page, .error_page ...

Ich gebe es zu, ich habe das hauptsächlich geschrieben, weil ich selber diese Tags immer wieder brauche und die einfach mal übersichtlich auf einen Haufen wollte. Sie sind höchst nützlich und ihr braucht sie für jeden Umbau im eigenen Layout!

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.

Bilder mit nativem Javascript auf Postbreite vergrößern

von

Ich bin ja nicht so der visuelle Typ. In der Regel benütze ich im Blog keine Bilder. Trotzdem mag ich Blogs mit Photos. Was mich gerade bei Blogger immer wieder irritiert, wie schlecht dort die Bilder präsentiert werden.

Das liegt zum einen am mangelhaftem Backend und miesen Blogger-Editor - zum anderen aber auch an den Bloggern selber, die Photos teilweise chaotisch anordnen. Mal Bilder mit 400px, mal 350px, am besten alles wild gemischt ... die Posts sehen dementsprechend aus.

Ich bin davon überzeugt, dass Bilder, um im Blog zu wirken, eine gewisse Größe brauchen und möglichst klar im Post eingebunden werden sollten. Ich habe dazu schon vor einiger Zeit ein jQuery Script geschrieben, das die Bilder automatisch auf 100% Postbreite bringt.

Dieses Script habe ich nun in nativem [plain] Javascript neu geschrieben. Wie es dazu kam und die Überlegung dahinter, geht es in diesem Post!


Ein Bilder-Slider in 30s erstellen

von

Dies ist die zweite - völlig überarbeitete - Version von einem Post, in dem es darum geht, wie ihr schnell & simpel einen Bilder-Slider in euren Blogger Blog bringt. Die erste Version war mit dem Bootstrap-Slider und der hat sich irgendwie als zu komplex erwiesen.

Probieren wir es jetzt mit dem Nivo Slider™. Selbiger ist für Wordpress ein kostenpflichtiges Plugin, die jQuery Version für Blogger steht dagegen unter der MIT-Lizenz und ist Open-Source. Vorteil Blogger :D!

Ich habe eine Demo mit vier Galerien und jeweils unterschiedlichen Skins gebaut - default, dark, light und bar:

Layout: Questa Volta

von

Ein Appetizer auf ein neues Layout: Questa Volta!


Das Layout wird voraussichtlich Ende Mai fertig sein. Ich suche noch zwei bis drei Beta-Tester, die Lust haben, bei der Entstehung von dem Layout ihren Senf dazu zu geben. Wenn ihr Interesse am testen von Questa Volta habt, meldet euch über die Kommentare, G+ oder meinem Kontaktformular. ^^

Freigabeschaltflächen durch Twitter, Facebook und G+ Buttons ersetzen

von

Blogger nennt die Links zu den die sozialen Netzen bekanntlich Freigabeschaltflächen und diese sehen so aus:


Meiner bescheidenen Meinung nach wirken die Schalter sowohl a bisserl altbacken, als auch benutzt die niemand, weil sie von dem, wie der durchschnittliche Besucher solche Buttons kennt, relativ stark abweichen. Das hier dagegen wären die Standardbuttons für Twitter, Facebook oder G+:


Machen wir heute ein kleines Tut, bei dem es darum geht, wie ihr bei Blogger die Freigabeschaltflächen durch solche Buttons ersetzen könnt.

Bilder automatisch auf 100% Postbreite bringen

von

Update! Ich habe das Script in nativem Javascript neu & besser geschrieben!

Ich bin immer mehr davon überzeugt, dass Bilder auf 100% Postbreite einem Blog ein professionelleres Gesicht geben.

Grundsätzlich könnt ihr in einem Blogger Blog kein Bild auf exakt 100% Postbreite bringen, ohne es händisch anzupassen. Das liegt einerseits an einem Attributen innerhalb des img Tags, andererseits daran, dass wenn ihr Bilder vergrößert ohne die Auflösung anzupassen, diese pixelig werden. Jedes Bild im Blog einzeln umzuschreiben ist natürlich nicht so prickelnd - ich denke ein Script ist die bessere Option.

Ich habe dazu so ein Script geschrieben, dass in jedem Blogger Standardlayout alle drei Bildtypen [mit und ohne Untertitel + Bilder aus der HTML-Ansicht vom Editor] automatisch auf 100% Breite bringt.

Praktisch sieht das ganze so aus - beachtet, dass die Bilder im Original nur 10px groß sind [sic!]:

Update: Bilder-Galerie für Blogger

von

Wer sich noch erinnert - vor einiger Zeit hatte ich ein Script für eine Bilder-Galerie vorgestellt. Seither gab's einige Rückmeldungen, was zu verbessern wäre. Ich habe mir natürlich selber auch Gedanken gemacht und letztlich das ganze Script neu geschrieben.

Die größten Änderungen zum ursprünglichen Script sind, dass ihr aus dem Blogger Editor heraus jetzt jede Art von Bilder zu einer Galerie verarbeiten könnt, dass bei den Bildern das Verhältnis Länge zu Breite erhalten bleibt und das sich die Abstände der Bilder untereinander definieren lassen.

Wie das letztlich ausschaut, seht ihr in der Demo:

Facebook Open-Graph-Tags für Blogger

von

Teilt ihr auf Facebook einen Blogger Post und möchtet für diesen Post eine Vorschau mit Bild erzeugen ... habt ihr unter Umständen ein Problem.

Facebook sucht das Bild für die Vorschau nämlich nicht zwingend im Post selber, sondern nimmt, wenn es nicht anders definiert ist, das erste Bild nach dem html-Element. Dieses erste Bild kann das Post-Bild sein, aber auch ein Image-Gadget, wenn dieses Gadget technisch gesehen 'vor' dem Post liegt.

Um Facebook zu sagen, 'das ist ein Post, nimm daraus das Bild für die Vorschau' müsst ihr euren Post in eine für FB lesbare Form semantisch klassifizieren und zwar mit dem Microformat-Protokoll Open-Graph. Was furchtbar technisch klingt, ist letztlich sehr einfach - schauen wir uns das ganze im Detail an!

Blogger: no-reply Kommentare ändern

von

Ich wurde gefragt, wie sich bei Blogger ein 'no-reply' Account ändern lässt.

Wait - was ist überhaupt ein 'no-replay' Blog? Wo liegt das Problem dabei? Und falls ihr einen 'no-replay' Blog habt, wie könnt ihr ihn zurück setzen?

Archiv-Gadget automatisch schließen

von

Eine Leserfrage:

Normalerweise ist bei Blogger im Archiv-Gadget in der Ansicht 'Hierarchie' immer der letzte Monat aufgeklappt. Lässt sich das Gadget auch so konfigurieren, dass es beim Aufruf des Blogs zugeklappt bleibt?

Die Antwort drauf ist 'Nein'. Blogger sieh wohl kein Bedarf dafür. Wobei ich mir durchaus ein Nutzen vorstellen könnte, vor allem wenn das aufgeklappte Archiv-Gadget viel Platz wegnimmt.

Was geht, dass ihr das Gadget mit jQuery schließt. Dazu sucht ihr den schließenden </body> Tag relativ tief unten im Blog. Direkt _darüber_ kopiert ihr:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
  //<![CDATA[
    $(document).ready(function () {
     $('.archivedate').removeClass('expanded').addClass('collapsed');
     $('.zippy').replaceWith('<span class="zippy">►&nbsp;</span>')
    });
  //]]>
</script> 

Falls ihr jQuery bereits an anderer Stelle im Blog drin habt, könnt ihr die Zeile ...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
... auch weglassen.

Ansonsten speichern und Fertig! Das Snippet schließt das Archiv-Gadget automatisch beim Aufruf eures Blogs .. ansonsten ändert es nichts.

Freut mich, wenn es für jemand nützlich ist!

Tutorial: Eine statische HTML-Seite auf Github-Pages hosten #4

von

Ich hatte mal wieder Lust auf ein Video-Tutorial - ich beschreibe hier einen Workflow zur Erstellung von statischen HTML-Seiten mit Jekyll. Es geht nicht darum, eine ausgefuchste Seite zu bauen, sondern das Prinzip dahinter zu zeigen.

Blogger: In 30s eine Bilder-Galerie erstellen

von

Heads up! Ich habe das Script weiterentwickelt!

Update: Ein Fehler in der Regex, der dazu geführt hat, dass in der Galerie 'leere' Platzhalter statt Bilder angezeigt werden, wurde behoben.

Der Blogger-Editor hat leider kein eigenes Tool, um Bilder nebeneinander in Galerie-Form anzuordnen. Da ist Tumblr Blogger weit voraus.

Ich habe immer wieder erlebt, wie schwierig es für Leute ist, die in HTML nicht sehr erfahren sind, auch nur zwei Bilder mit Tabellen oder CSS nebeneinander zu stellen.

Als grundsätzliche Lösung für das Problem habe ich jetzt ein kleines Script geschrieben, mit dem ihr in ein paar Sekunden im Blogger-Editor beliebigen viele Galerien in jeder gewünschten Form bauen könnt: Anzahl der Bilder, Anzahl der Spalten, Bildformat ... alles ist frei wählbar!

So sieht das ganze aus: