5202

ein Blog über technische Fragen zu Blogger

Mobile Blogger Vorlage: Wischgesten ausschalten

von

Blogger hat bekanntlich eine mobile Vorlage für Smartphones & Co. im Programm. Auch dort hat sich in letzter Zeit einiges getan, unter anderem wurden Wischgesten eingeführt, um innerhalb eines Posts zu neueren/älteren Posts zu wechseln.

Das Problem ist, diese Wischgesten sind nicht besonders gut implementiert. Bei jeder Berührung, die nicht strikt horizontal ist, wechselt ihr auf der mobilen Vorlage den Post. Das ist ... nervig! Unabhängig von einander haben mich nun verschiedene Blogger gefragt, wie man diese Wischgesten ausschalten kann. Das geht, ist aber nicht ganz trivial ...

Blogvorstellung: tupamaro design

von

Was ich in der Blogosphäre seit jeher bedauere, dass sich im deutschsprachigen Bereich keine Blogs zu Design oder Tutorials für Blogger entwickelt haben, die sich explizit an 'normale' Blogger richten. Nachdem Mira jetzt seit einiger Zeit nur noch über Mode bloggt, ist der einzige relevante Blog dazu leider über die Wupper gegangen.

Gründe dafür sehe ich viele - zum einen hat das Interesse an Blogs generell stark nachgelassen. Facebook, Instagram & Co. geben viel schneller und einfacher Belohnungen in Form von Kommentaren, Likes und Klicks als ein eigener Blog. Blogs sind ihrer Natur nach ja eher langatmig und erfordern Aufmerksamkeit, und werden immer 'langweiliger' im Gegensatz zur permanenten Reizüberflutung der sozialen Netzwerke sein.

Eine ganze Klasse von Blogs scheint sich auch gerade in Richtung Youtube zu bewegen, nämlich die ganzen Schmink.-, Mode.- und Lifestyle-Blogs. Jemand fünf Minuten auf dem Blog zu halten ist schwieriger als fünf Minuten vor einem Video und insofern lässt sich YT einfacher monetisieren als ein geschriebener Blog.

Insofern finde ich es bemerkenswert und es freut mich sehr, das ein neuer Blog zu Blogger Blogdesign gestartet hat, nämlich TupameroDesign. Dahinter stecken wohl 'drei Hobby-Webdesignern aus dem schönen Bergischen Land'.


Der Name lässt drauf schließen, dass die Wurzeln in Uruguay liegen, das ganze wirkt sehr erwachsen und ambitioniert auf mich. Der Blog gibt es seit etwa zwei Wochen, beziehungsweise die Beschäftigung mit Blogger ist noch sehr frisch.

Freunde, schaut doch mal rüber auf den Blog und sagt 'Hallo'. Jeder Anfang ist schwer und ich würde mich freuen, wenn sich das Projekt weiter entwickelt.

Von meiner Seite alles Gute und herzlich willkommen in der Blogger Blogosphäre!

Blogger Bild-Gadget ohne Überschrift

von

Bei Blogger brauchen bekanntlich einige Gadgets eine Überschrift. Etwa das Bild-Gadget. Mir ist ein Rätsel, wozu das gut sein soll, bis jetzt habe ich noch keine Begründung gefunden. Vor allem, da andere Gadgets ja eben keine Überschrift brauchen.

Die Frage, wie ihr ein Gadget mit 'Zwangsüberschrift' ohne Überschrift veröffentlichen könnt, ist mir wirklich oft über den Weg gelaufen. Teilweise habe ich da schon wahnsinnig kreative Lösungen gesehen. Eine der witzigsten war, als Überschrift einen Punkt zu nehmen und diesen Punkt dann die gleiche Farbe wie der Hintergrund zu geben.

Die ultimative Lösung!

Auf jeden Fall gibt es eine ultimative Lösung dafür, die irgendwie nur nicht sehr bekannt ist. Deswegen dieser kleine Post.

Schreibt in die Überschrift einen HTML-Kommentar, Inhalt ist egal, Kommentare werden eh nicht angezeigt. Beispiel:

<!-- Zwangsüberschift -->

Das ist alles ... keine CSS zum Verbergen der Überschriften nötig, keine Punkte und Umfärben, keine Grafiken über die Überschriften drüber legen ... Fertig!

Cookies-Benachrichtigung bei Blogger anpassen/aussschalten

von

Seit gestern, 27. Juli 2015 findet ihr eine Nachricht in eurem Blogger-Dashboard, dass ihr ab 1.9.2015 eure EU-Besucher über die in eurem Blog verwendeten Cookies informieren müsst.

Dies soll dem 'Datenschutz' dienen, was ja bekanntlich nach Lesart deutscher Juristen lediglich eine formale Unterlassenspflicht ist - eure Daten werden selbstverständlich dadurch genauso wenig 'geschützt' wie vorher ... aber lassen wir das :D.

Damit ihr diese neuen rechtliche Bestimmungen einhalten könnt, hat Blogger ein Script in jeden Blogger Blog eingebaut, mit einem Hinweis über die verwendete Blogger- und Google-Cookies, einschließlich Cookies für Google Analytics und AdSense.

Dieses Script ist automatisch in eurem Blog vorhanden. Ihr müsst nichts weiter dazu tun. Vor allem braucht ihr keine Scripte von irgendwelchen Drittanbieter. Falls ihr solche Scripte bereites verwendet, empfehle ich diese auszubauen, schlichtweg weil eure Besucher ansonsten doppelt zustimmen müssten.

Darüber hinaus könnt ihr eure Cookies auch komplett deaktivieren, beziehungsweise den Hinweis personalisieren.

Retrieving labels from Blogger JSON feed

von

Ich wurde gefragt, wie man Post-Labels aus dem Blogger JSON Feed zieht. Das Problem dabei ist, dass ein Post mehr als ein Label haben kann, ihr folglich nicht ein einzelnes Objekt, sondern ein ganzes Array als Rückgabe habt.

Starten wir mit einer Liste von Post-Titel aus dem JSON Feed:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var posttitle = data.feed.entry[i].title.$t;
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Wie definieren nun ein leeres Array als Variable:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

In einer weiteren Schleife iterieren wir jeden Post durch alle Labels:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      for(var j = 0; j < data.feed.entry[i].category.length; j ++ ){
      }
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Wir hängen nun jedes Label in das Array ein:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      for(var j = 0; j < data.feed.entry[i].category.length; j ++ ){
        labels.push(data.feed.entry[i].category[j].term); // append the label to collection
      }
      htmlCode  = "<li><h3 class='posttitle'>"  + posttitle +  "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Letzter Schritt - wir lesen das Array aus und fügen es in die Liste ein:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      for(var j = 0; j < data.feed.entry[i].category.length; j ++ ){
        labels.push(data.feed.entry[i].category[j].term);
      }
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3><h5 class='label'>" + labels.join(', ') +  "</h5></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Ich habe außerdem ein funktionierendes Beispiel auf CodePen gebaut.

See the Pen labels from Blogger json-feed by oliver (@5202) on CodePen.

Fehler, weiter Beispiele, Probleme - schreibt einfach einen Kommentar!

Blogger: Sitemap für statische Seiten

von

Seit einigen Monaten hat euch Blogger bekanntlich eine automatisch erstellte Sitemap spendiert. In der Standard robots.txt für jeden Blogger Blog ist diese Sitemap eingetragen

Diese Sitemap bezieht sich aber nun nur auf den Inhalt eurer Posts. Ich wurde vor einigen Monaten gefragt, ob man bei einem Blogger Blog auch statische Seiten mit einer Sitemap indexieren kann und damals war ich der Meinung, das geht nicht.

Wie ich nun erfahren habe, war das falsch. Blogger besitzt auch eine Sitemap für statische Seiten. In der allgemeinen Form schaut die so aus:

http://www.euerBlog.blogspot.com/sitemap-pages.xml

Falls ihr auf euren Blog statischen Seiten mit Inhalt habt, die ihr von Google indexieren wollt, könnt ihr also diese Sitemap mit in eurer robots.txt eintragen - wenn nicht, könnt ihr euch den Eintrag auch sparren.

Den Eintrag macht ihr im Blogger Dashboard unter Sucheinstellung > Crawler und Indexierung > Benutzerdefinierte robots.txt > Benutzerdefinierten robots.txt-Inhalt aktivieren?

Ihr kopiert den Inhalt euerer bestehenden robots.txt in das Feld und tragt als letzten Punkt neu ein:

Sitemap: http://www.euerBlog.blogspot.com/sitemap-pages.xml

Alternativ dazu könnt ihr auch die Sitemap bei bei Webmaster Tools anmelden.

Blogger & Material Design Lite Layout

von

Vor etwa einer Woche hat Google sein neues Framework Material Design Lite vorgestellt - mdl ist quasi die Implantation von Googles Material Design in CSS, HTML und Javascript für das Web.

Ich habe nun - just for fun - das Blog-Template von mdl in einem Blogger-Template zum laufen gebracht. Es ging mir dabei hauptsächlich darum, die verschiedenen Komponenten, wie etwa die 'cards', für die Startseite in Blogger Data-Layout-Tags darzustellen.

Das Template ist in Blogger voll lauffähig, ist aber kein fertiges, einsatzfähiges Layout. Ich habe es geschrieben, um grundsätzlich zu zeigen, wie ich mdl in Blogger umsetzen würde. Daraus kann wer will ein eigenes Template bauen, vielleicht hilft es je jemand weiter.

Ihr findet den Code für den Test-Blog auf Github. Falls jemand an etwas ähnlichem arbeitet, würde mich das sehr interessieren, meldet euch doch einfach in den Kommentaren. Fragen und Anregungen könnt ihr hier oder in den Issues auf Github loswerden.

Gadgets nur auf bestimmten Seiten anzeigen

von

In Blogger könnt ihr jedes Gadget entweder auf allen Seiten, oder nur auf einer bestimmten Seiten, wie etwa einer spezifischen statischen Seite, anzeigen lassen. Das geht einfach mit CSS, oder etwas komplexer dafür besser mit Blogger Layout Daten-Tags.

Die Version mit Daten-Layout-Tags ist deswegen besser, weil das Gadget damit wirklich nur auf der spezifischen Seite und nicht global auf jeder Seite geladen wird. Das verringert den Overhead und kommt der Ladezeit zu gute.

Ich beschreibe beide Techniken am Beispiels des Kontaktformular-Widgets. Manchmal möchten Blogbetreiber ja eine Kontaktseite mit eigenem Kontaktformular haben und nehmen dazu eine externe Lösung, weil sie nicht wissen, dass bei Blogger das Kontaktformular auch auf einer statischen Seite funktioniert.

Blogger: Seitenaufrufe für eigene Domain nicht zählen

von

Es wurde eine Frage zu einem der ältesten Blogger Fehler überhaupt gestellt und zwar, wie man der Blogger Statistik klar macht, die eigenen Aktivitäten auf dem Blog nicht zu zählen.

Normalerweise ist das simpel und geht im Blogger Dashboard unter Statistik mit den Schalter Eigene Seitenaufrufe nicht verfolgen. Das funktioniert aber nur mit einer blogspot.com Subdomain. Falls ihr auf eurem Blogger Bog eine eigene Domain benützt, ergibt sich mit diesem Schalter nur ein endloser Ladebildschirm - die Statistik selber wird weiter gezählt.

Wie könnt ihr es nun erreichen, dass eure Seitenaufrufe mit einem Blog mit eigener Domain nicht gezählt werden?

Blogger: new conditional tags

von

Blogger hat die Syntax für seine Layouts erweitert beziehungsweise verändert. Hier in dem Post versuche ich die wichtigsten Änderungen zusammenzufassen.

Die Änderungen sind mir erst seit ein paar Tage aufgefallen, das scheint mir alles sehr neu zu sein. Es kann sein, dass euch das Blog1 Widget abschmiert, falls ihr beim ausprobieren von der neuen Syntax etwas fehlerhaft formuliert. Setzt in dem Fall das Widget zurück und fangt von vorne an. Die falsche Syntax zu löschen reicht nicht aus!

Post-Listen mit Post-Titel und Teaser-Bild erzeugen

von

Myri hat einen sehr lesenswerten Post darüber geschrieben, wie ihr Listen aus Posts mit Vorschaubild, Überschrift, Link auf den Post usw. automatisch erstellen könnt.

Es stimmt was Myri schreibt, das viele [die meisten] Blogger so etwas manuell machen. Ihr kennt dass bestimmt - ihr ladet kleine Bildchen hoch, verlinkt die auf einen Post, schreibt was dazu und so weiter. Ich finde das per Hand zu machen ist viel zu aufwändig und im Grunde auch nicht nötig, weil es wirklich - wie Myri zeigt - mit Ajax verblüffend einfach geht.

In diesem Post greife ich die Idee von Myri mit einer Änderung auf - statt die Listenelemente aus dem Blog selbst zu nehmen, finde ich es einfacher, dafür über die Blogger API zu gehen.

In Natura könnt ihr das Ergebnis hier sehen. Der Code von Codepen scheint auf externe Seiten blockiert zu werden - ich kann es leider nicht hier auf der Seite einbinden!

Terminal, Vim & Blogger

von

Ich bin ein großer Fan von Markdown. Texte schreibe ich normalerweise im Terminal, in Vim. Beides zusammen sind hervorragende Tools zum bloggen.

In dem Screencast zeige ich einen Workflow mit Vim, Markdown und Blogger. Ich meine, klar das ist nicht für jeden was, aber ich wollte einfach mal zeigen, wie leicht sich Blogger an den eigenen Arbeitsstil anpassen lässt.



Wen jemand näher was zu den benutzten Tools wissen will, schriebe ich gerne was dazu. So ist es einfach nur eine Demo zu den vielen Möglichkeiten, die Blogger bietet.

Update: Es wurde die Funktion zum veröffentlichen eines Posts aus dem Editor gewünscht ... gesagt, getan, ich hole nur etwas weiter aus.

ShareButtons im Flat-Design

von

Im Web wird alles flach, oder denglish flat. Die originalen Freigabeschaltflächen von Facebook, G+ oder Twitter mit ihren Schatten & Schnörksel wirken inzwischen arg altbacken.

Modernere ShareButtons gehen eher in diese Richtung:



Im Post beschreibe ich, wie ihr solche flachen shareButtons in Blogger einbaut.