5202

ein Blog über technische Fragen zu Blogger

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!