5202

ein Blog über technische Fragen zu Blogger

Dynamische Ansichten: 'Loading Gear' personalisieren

von
Die dynamischen Ansichten laden vor dem eigentlich Inhalt eine ganze Reihe von Scripten in den Browser und während dieses Ladevorgangs wird ein kleines animiertes .gif mit dem Blogger Logo angezeigt. Wer die dynamischen Ansichten verwendet, kennt das bestimmt, es ist das Logo oben. Aus reiner Spielerei habe ich mir überlegt, wie ihr das personalisieren könntet. Dabei war die größte Schwierigkeit, an die Klasse .blogger-gear von dem .gif ranzukommen - das wird ja nur ein oder zwei Sekunden eingeblendet. Nun, auf jeden Fall habe ich da was neues ausprobieren können und mit dem Pseudoelement ::after konnte ich dann das Blogger Logo gegen etwas eigenes ersetzen.

Kochrezept

Altes Dashboard-Layout
Dashboard > Design > Vorlagendesigner > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden
Neues Dashboard-Layout
Dashboard > Vorlage > 'Live im Blog' anpassen > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden

Code

.blogger-gear {
  width:0;
  height:0;
}
.blogger-gear::after {
  content: url(http://goo.gl/l0ODv);
}
http://goo.gl/l0ODv ist das Beispiel aus meiner Demo, ihr könnt es natürlich gegen euren eigenen Code ersetzen.

Demo

Ich habe eine Demo davon gebaut - ihr seht je nach Ladezeit das .gif für eine knappe Sekunde. Das ist natürlich nur eine Spielerei, aber ich mag solche kleinen 'Ester Eggs'.