5202

ein Blog über technische Fragen zu Blogger

Blogger: Zwei Bilder nebeneinander mit Javascript

von

Update: Vergesst diesen Post - hier findet ihr mein aktuellstes Script!

Ich glaube die häufigste Suchanfrage für 5202 ist, wie man in Blogger zwei Bilder nebeneinander bekommt. Ein Post dazu ist also immer eine sichere Bank :D.

Heute eine ultra-einfache-Lösung für dieses Problem mit Hilfe von ein paar Zeilen Javascript - als Bonus spiele ich den Erklärbär in einem neuen Screencast.

Frohe Weihnachten!

von
Ich mach ja kein großes Gewese drum, aber ich blogge hier aus einem sehr katholischem Hintergrund - Weihnachten steht vor der Tür und worum es dabei geht, wird leider immer tiefer versteckt.

To make a long story short - Gott ist Mensch geworden!

Allen meinen Leser, Verfolgern, Freunden whatever - ob ihr jetzt an diese Geschichte glaubt oder nicht - wünsche ich bei allem Trubel, Hektik, Freude (und vielleicht auch a bisserl Traurigkeit) der nächsten Tage Gottes Segen.

Blogger: Downloadbereich bauen

von
Es kommt immer mal wieder die Frage auf, wie ihr auf Blogger einen 'echten' Downloadbereich einrichten könnt - seit neuestem geht das sehr elegant mit den WebViewLinks von Google Drive.

In dem Post beschreibe ich Schritt für Schritt, wie ihr so einen Downloadbereich bauen könnt - so schaut das ganze am Ende aus:

Leserlichkeit von Text

von
Ich hab's in meinem Leben ja zu keinem formalen Abschluss in rein gar nichts gebracht, noch nicht mal zum QA hat's gereicht :( --- mit anderen Worten, unter euch Leser gibt's bestimmt welche mit Bachelor oder Master in Gestaltung, Frontenddesign whatever und insofern lehne ich mich sehr weit aus dem Fenster, wenn ich da über die Leserlichkeit von Texte doziere ... dazu gibt's bestimmt von qualifizierterer Seite massig Zeug dazu.

Nuuuuur ... das schöne am Internet ist, jeder kann über alles schreiben, er muss es einfach nur machen, oder? Also schreibe ich jetzt einfach mal über die ein oder andere Beobachtung zum Thema Leserlichkeit von Text und damit das ganze nicht gar so fad wird, habe ich meine kleinen Anmerkungen mit a bisserl Form aufgepeppt - aber seht selbst.

Ein Keyframe Menu

von
Heute mal wieder Zeit für eine Skizze - Thema: Bewegung!

Seid bei Bewegung auf Websites vorsichtig - unsere Wahrnehmung gibt Bewegung immer Priorität, insofern lenkt ihr mit dauerhaften Bewegung vom Inhalt ab (animierte .gifs sind etwa no-go > my oppinnion).

Die Idee hinter dieser Skizze ist einfach - beim öffnen der Seite wird durch das 'reinfliegen' der Tabs die Aufmerksamkeit auf das Menü gelenkt. Durch das klar definierte Anfang und Ende der Animation, wirkt das ganze trotzdem entspannt.

Zuwachs in der Blogosphäre!

von
Ein sehr erfreulicher Trend geht um - immer mehr Blogs beschäftigen sich mit der 'technischen' Seite von Blogger. Heute ist ein neuer IT-GemeinschaftsBlog an den Start gegangen, auf dem vier Bloggerinnen über Bildbearbeitung, HTML, Design whatever schreiben wollen.

Was die vier vorhaben klingt ziemlich ambitioniert ... GIMP, PhotoScape, paint.net, PhotoFiltre, Magix Grafik Designer, Photoshop, HTML ... von meiner Seite auf jeden Fall ein herzliches Willkommen in der Blogger-Blogosphäre :D.

Leute, schaut's doch mal bei Selfdesign vorbei und sagt 'Hallo' ... jeder Anfang ist schwer!

Mehr Mut zur Farbe!

von
Ich habe die letzten Wochen auf Blog Zug relative viele Blogs gesehen - die meisten davon im 'Simple Weiß' Layout. Eins ist mir schon immer aufgefallen - nach einer gewissen Zeit schauen 'Simple Weiß' Blogs irgendwie alle gleich aus.

Eine Website in Google Drive hoosten

von
Freunde, wie versprochen mein 'How-to-host-a-website-on-Google Drive' Screencast. Witzigerweise hat Google inzwischen selber so ein 'How to' in's Netz gestellt, das euch zeigt, wie ihr das mit 'Zeug-was-ihr-gerade-so-an-der-Hand-habt' machen könnt.

Obwohl das natürlich viel toller ist als mein Homemade Screencast, präsentiere ich euch meine Version trotzdem ... möglicherweise sind die Google Ingenieure nicht so die Erklärbären :).


Nachgelegt: Website auf Google Drive veröffentlichen

von
Weil ich das Thema gerade so spannend finde, bin ich der Frage nachgegangen, ob es auch auf Google Drive möglich ist, Websites zu veröffentlichen - bei Google Devlopers habe ich entdeckt, dass das tatsächlich auch in Google Drive funktioniert.

Wer sich mal selber in diese phantastische Dokumentation einliest, wird merken, wie einfach & klar da alles beschrieben wird ... hat bei mir nur eineinhalb Tag gedauert, bis ich's kapiert habe (/Sarkasmus).

Demo-Seite simpel hosten

von
Ihr bietet euren Leser Skizzen, Demos oder Tutorials an und seit genervt, wie kompliziert das mit blogspot.com Blogs geht?

Ihr sucht eine simple, kostenfreie Lösung um eine One-Side-Website schnell mit jemand zu teilen? Da hätte ich eine Idee - ihr braucht dazu keine Server-Space, keine Domain, kein rein gar nichts.

Offiziell: Google Friend Connect wird eingestellt!

von
Lange Zeit war es nur ein Gerücht - nun hat Blogger im offiziellen Blogger Blog angekündigt, Google Friend Connect nur noch für 'foreseeable future [=absehbarer Zeit] zu unterstützen, d.h. wohl für die nächsten 6-8 Monate und dann ist Schicht im Schacht.

Was bedeutet das für Nutzer und wie geht es weiter?

Sidebar Tabber ohne Javascript

von
Tabber (oder Wechselseiten) sind eine zweischneidige Sache ... einerseits sind sie Platzsparrend ... andererseits wirken sie in vielen Layouts auf mich wie Fremdkörper.

Tabber kommen ursprünglich aus der Desktop-Windows-Welt und sind für das Web adaptiert worden - vielleicht ist dass das Problem :).

Ich habe mich auf Bitten eines Lesers auf jeden Fall mal an so ein Tabber gewagt und eine Wechselseite ganz ohne Javascript gebaut - die Skizze funktioniert auch in mobilen Browsern!

Blogger: Menü-Gadget 'sticky' fixieren

von
'Sticky' [=klebrig] meint ein HTML Element, das bis zu einem bestimmten Punkt auf der Seite mitscrollt und dann irgendwo 'festklebt' - etwa unterhalb der Blog-Oberkante.

Falls ihr euch nichts darunter vorstellen könnt, schaut euch meine Skizze an - die 'Sidebar' scrollt mit und bleibt dann 'hängen'.

'Elastisches' Menü

von
Bewegung erzeugt auf einem Blog Aufmerksamkeit - es darf nur nicht zu zappelig wirken, dann nervt's.

Heute eine simple Idee, wie ihr ein Menü zum bewegten 'elastischen' Menü aufpeppen könnt ... je reduzierter das Layout, desto interessanter finde ich solche Effekte.

Farbfilter für Bild-Hover

von
Heute mal was für die Freunde des gepflegten Hoverns - viele Blogger finden ja Transparenz-Effekte (opacity) beim Hovern ihrer Bilder schick und mit zunehmender 'Durchsichtigkeit' werden die Bilder dabei heller. Warum eigentlich?

Antwort: Weil der Bildhintergrund 'weiß' ist und wenn ein Bild sagen wir mal zu 70% Transparent ist, scheinen eben 30% weiße Hintergrund durch.

Was passiert nun, wenn man dem Bild statt eines weißen einen farbigen Hintergrund gibt? Dann ergibt das Hovern einen Farbfilter-Effekt.

Werkstatt - eure Meinung ist gefragt!

von
Ich bin ehrlich, seit meinem Layout 'Zwei' gab's hier relativ viel Kritik an der Nutzerfreundlichkeit von meinem Konzept :(.

Leben ist Veränderung - wenn ihr wollt, könnt ihr mal einen Blick in meine Werkstatt werfen und sehen, was mir als nächstes vorschwebt. Zurück kommt ihr über den Rider'5202':

Blogger: Linke Sidebar fixieren

von
Zu kaum etwas existieren so viele schlechte Tutorials wie zum Thema 'Sidebar fixieren' und wenn ich fünf Cent von jedem Blogger bekommen würde, der sich dabei sein Layout zerstört hat, hätte ich ein Haus am Meer :).

Ernsthaft: Ich erkläre euch heute, wie ihr eure linke Sidebar 'richtig' fixieren könnt, dass die danach nicht irgendwo mitten im Blog rumhängt - sozusagen die ultimative Lösung!

Tooltip in einer Imagemap bauen

von
'Tooltips' sind Kurzbeschreibungen in einem Pop-Up Fenster - wie könnt ihr solche Tooltips für einzelne Bildteile definieren?

In der Skizze liegen zwei Tooltips und zwar ein rotes 'Herzchen' auf dem Vulkan Fuji und ein grüner Punkt auf dem Vorschiff des ersten Bootes links außen. Fahrt mit der Mause drüber und seht das Pop-Up Fenster!

Blogger: 404-Fehlerseite anpassen

von
Seit ein paar Wochen Monate könnt ihr auf blogspot.com Blogs die 404 Fehlerseite individuell gestalten. Yeah ... Begeisterung ... auf-die-Tische-spring ... Jubel :D!

Ernsthaft: Die 404 Seite wird öfters aufgerufen als ihr denkt, nämlich bei allen Seitenaufrufen, wo-aus-welchem-Grund-auch-immer der Link gebrochen ist. Da a bisserl Arbeit rein zu stecken ist also gar nicht verkehrt.

Schwarz/weiß Effekt auf Bilder mit CSS

von
Neulich kam die Frage auf, wie man ein s/w Bild per Hover auf farbig setzt. Statt super-kompliziert das Bild in einer Bildverarbeitung zu bearbeiten und dann mit Javascript ein zweites Bild nachzuladen, geht das natürlich auch mit CSS.

Ich habe das damals wohl pädagogisch schlecht rübergebracht und deswegen wurde mir das nicht geglaubt - als Beweis, dass das tatsächlich auch mit purer CSS funktioniert, könnt ihr euch meine Skizze anschauen.

Der Effekt ist in Chrome, Firefox, Internet-Explorer ab Version 7 und Safari ab Version 6 sichtbar:

Wasserstandsmeldung

von
Freunde - ein kurzes Lebenszeichen von mir. Die letzten zwei Wochen war's hier auf dem Blog sehr ruhig ... aber ich war nicht faul, sonder hatte endlose Anfrage zu Blogger-Problemen, Layout Desastern und Blog Verschönerungen.

Alles was noch aussteht, will ich am Wochenende abarbeiten und ab nächste Woche geht's hier weiter - ich hoffe mit ein paar spannenden Themen.

Avantgardistisches 'Simple Weiß' Layout

von
Update: Das Layout ist inzwischen in der Version 2.01 angekommen. Ein Fehler bei großen Blogs (größer als 300 Posts) wurde beseitigt.

Eine Leserin hatte eine ziemlich avantgardistischen Layout Wunsch - auf der Startseite sollen nur Vorschaubilder, wie in einem Memoriespiel, zu sehen sein.

Gesagt getan, hier ein angepasstes, ansonsten normales 'Simple Weiß' Layout - mit Klick auf das Bild kommt ihr zum jeweiligen Post.

Texte 'smooth' ausblenden

von
Für's Wochenende eine kleine, sehr subtile Idee, die sich aus der Frage einer Leserin ergeben hat - wie kann man den Blog 'smooth' mit einem Gradienten abschließen?

Könnt ihr euch nichts darunter vorstellen, schaut euch die Demo an -der Text wird am unteren Ende sanft 'ausgeblendet' :)!

Blogger: Drop-Down Menü [neue Version!]

von

Update 27.5.2014! Funktioniert jetzt in allen Blogger Layouts - auch in Awesome!


Neulich hatte ich ein nettes Gespräch mit Leserin superhero-film-news, wo sich herausgestellt hat, dass sie meinen alten Drop-Down-Post um eine dritte Ebene erweitert hat - Hut ab!

Dankenswerterweise stellt sie diese Erweiterung zu Verfügung und ich habe mir gedacht, bei der Gelegenheit könnte ich das Menü komplett überarbeiten. Also: Noch mal Danke an superhero-film-news für die Arbeit an der dritten Ebene!

Außerdem habe ich hier in der neuen Version Probleme mit der Blogger-Lightbox beseitigt, die HTML wesentlich vereinfacht, die CSS teilweise neu und für das Drop Down Menü eine Erweiterung des Blogger Vorlagen Designers ganz neu geschrieben

Das Dropdown kann ab dieser Version direkt im Vorlagen Designer angepasst werden.

Mit HTML5 drei Bilder nebeneinander stellen

von
Ich hatte gestern ein nettes Gespräch mit einer Bloggerin, die das uralte Problem 'drei-Bilder-nebeneinander' plagt und der Tabellen zu kompliziert waren - habe ich mir überlegt, schreibe ich mal was, wie's einfach[er] mit HTML5 geht!

So schaut am Ende das Ergebnis aus:

Die Hölle
Das Paradies
Himmlisches Jerusalem

Aktuelle, bekannte Probleme in Blogger II

von
Gibt mal wieder neue Probleme mit Blogger - es gab die letzten beiden Tage einige Fälle, wo ein Blog nach kurzer Zeit auf eine andere Seite weitergeleitet worden ist. Das ist eigentlich typisches Malware Verhalten - im aktuellen Fall ist der Schuldige aber das Instagram Gadget. Lösung: Löscht das Gadget und ihr seid die Umleitung los (wobei böse Zungen sagen, nicht mal drei Monate nach der Übernahme durch Facebook war so etwas zu erwarten :=D).

HTML5 Boilerplate als Blogger-Layout verwenden

von
Ich weiß, das einige Blogger davon träumen, sich ihr eigenes Layout von Grund auf selber zu scchreiben und auf der Suche nach so 'ner Art 'Roh'-Layout für blogspot.com Blogs sind.

Wer hier schon länger mitliest, erinnert sich vielleicht, das ich vor einiger Zeit mal einen ziemlich ambitionierten Post dazu geschrieben habe ... der nur einen ganz kleinen Nachteil hat, dass das im neuen Blogger Editor inzwischen nicht mehr funktioniert (damn new dashbord gui ...}

Statt beim Thema 'Layout' das Rad neu zu erfinden, habe ich nun einen besseren Vorschlag - nehmt für eure Blogger Layout-Projekt etwas bewährtes & solides, nämlich die HTML5 Boilerplate.

Rahmenlinie um Blog bauen

von
Ihr kennt das bestimmt von vielen stylischen Wordpress Layouts, dass die oben und unten kleine Begrenzungslinien haben, die den Inhalt sozusagen zusammenklammern - könnt ihr euch nichts darunter vorstellen, schaut euch mal meine Skizze an:

HTML5 Fader ohne Javascript

von
Vor langer Zeit habe ich hier auf 5202 einen reinen CSS-Fader vorgestellt.

Der war a bisserl wackelig auf den Beinen, vieles hat gefehlt und deswegen habe ich einem lieben Leser versprochen, bei Gelegenheit völlig neu drüber nachzudenken

Tröööt ... heute das Ergebnis davon - ein grundsolider HTML5 Fader:

3D Galerie ohne Javascript

von
Könnt ihr euch an die endlosen Stunden im Matheunterricht erinnern, wo ihr euch mit Tangenten, Matrizen und Vektoren rumgequält habt? Habt ihr euch je gefragt, zu was das wohl nützlich sei?

Heute die Antwort: Das braucht ihr, um coole 3D-Galerien zu bauen - schaut euch die Demo an, öffnet die Galerie mit Click auf den goldenen Layer.

Einfacher Slider mit :hover

von
Make it simple, stupid! Eine meiner Grundüberzeugungen - alles so einfach wie nur immer möglich machen!

Ich sehe in blogspot.com Blogs oft gigantische Javascripts an triviale Aufgaben werkeln, etwa ein paar Bilder zu 'sliden' ... ich meine, in vielen Fällen würden da auch ein paar Zeilen CSS reichen.

Heute mal eine von diesen 'simplen' Ideen und zwar wie man Bilder mit einem stink-normalen Hover sliden kann, d.h. wenn man mit der Mause über einen Link fährt, wird das entsprechende Bild 'eingeslidet' ... yeah, good denglish, isn't it?

Fahrt in der Skizze mit der Mause über die Links und das entsprechende Bild wird angezeigt - auch wenn ihr mit der Mause nicht über dem Link seid, bleibt das Bild stehen.

Funktioniert in allen richtigen Browsern - im IE ab 9+.

Social Media, Facebook & der ganze Rest

von
Wozu haben 99% aller Blogs diese Buttons von Facebook, Google+, Twitter &.Co. unter jedem Post? Die meisten Blogger bauen das ja völlig automatisch ein und denken, ihr Blog profitiert in-irgendeiner-nicht-näher-zu-benennenden-Form davon ... aber was genau passiert eigentlich durch diese 'Knöpfe'?

CSS für Schrift

von
Ich find's ganz nützlich, mal die wichtigsten CSS Eigenschaften für Schrift gesammelt vor sich zu haben. Ich gebe im Skizzenbuch für jede Eigenschaft ein Beispiel, der Link zurück führt zum jeweiligen Unterpunkt hier im Post.

Dropout-Menü ohne Javascript

von
Stay foolish! Dropdown Menüs kann inzwischen jeder und hat inzwischen jeder - ist irgendwie kein wirklicher Hingucker mehr.

Deswegen heute eine neue Variation zum unendlichen Thema ein-Menü-mit-vielen-Unterpunkten und zwar als Dropout. Schaut euch die Demo an, das Dropout fährt per Klick aus!

Menü mit "negativem" Hover

von
Manchmal habe ich nur Blödsinn im Kopf - gestern Abend etwa ein Menü mit 'negativem' Hover.

Wenn man mit einer Mouse über ein HTML-Element fährt und damit eine Veränderung auslöst, ist das der 'Hover'. Was aber wäre, statt dieses einen Elements, alle anderen Elemente zu verändern? Das ist dann der 'negative' oder umgekehrte Hover. Der Effekt ist frisch und [für Blogger] neu.

Blogger: Kommentar "Bubbles" mit CSS

von
Rechts neben meinen Überschriften seht ihr die Zahl der Kommentare in kleinen Symbolen, so genannte 'Bubbles'. Das ist auf vielen Foren, Blogs und Seiten inzwischen üblich - ich denke also, der Besucher versteht intuitiv, was damit gemeint ist.

Auf besonderen Wunsch hin erkläre ich heute, wie das gemacht ist (und noch ein paar Hintergründe dazu ...)

Experimentell: Post als Fullscreen

von
Ein Post erzählt immer eine Geschichte. Diese Geschichte kommt üblicherweise als fortlaufender Text plus Bilder oder mal mit Video daher - so weit so normal.

Um zu demonstrieren, was in Blogger möglich wäre, habe ich einen experimentellen Post in Fullscreen gebaut. Die Demo ist nicht gemogelt, sondern liegt tatsächlich in einem 'echten' Blogger-Post:

'Smooth' scroll back to Top

von
Interne Links, mit denen ihr vom Ende einer Seite zurück nach oben 'springen' könnt, benützen ja inzwischen viele Blogger. Ich zeige euch heute, wie ihr statt mit einem harten 'Sprung', sanft nach oben scrollen könnt. Außerdem ist der Link ja relativ sinnlos, wenn eure Besucher noch ganz oben auf der Seite sind - also blenden wir den Link erst ab einer gewissen Abstand auf die Oberkante beziehungsweise Unterkante ein.

Blogger: Spalten im Zeitungsstil

von
Texte lassen sich nur bis zu einer bestimmten Textbreite flüssig lesen. Grund ist, dass das Auge am Ende einer Zeile zur nächsten Zeile 'zurückspringen' muss - ist die Zeile zu lang, kann das Auge den Zeilenwechsel verfehlen und das wird auf Dauer anstrengend.

Zeitungen benützen deswegen seit jeher den Spaltensatz - im Web ist das Äquivalent dazu das CSS3 Layout Konzept Multi-Column.

Neues Layout "Zwei" ist online!

von
Seit ein paar Stunden ist jetzt mein neues Layout online - ich hab's, kreativ wie ich bin, "Zwei" genannt. Das Layout habe ich von der ersten bis zur letzten Zeile neu geschrieben, ist also kein abgewandeltes 'Simple' oder so. Es ist noch nicht in allen Details funktionsfähig und hier und dort knirscht es bedenklich, aber ich denke, im großen und ganzen funktioniert es erst mal.

Blogger: Gadgets zeigen und verbergen

von
Ich beobachte seit einiger Zeit ein paar Blogs, die sich im weitesten Sinn mit der technischen Seite von Blogger beschäftigen und von denen ich überzeugt bin, dass sie ein großes Potential haben - und zwar wegen "wie-sie-es-machen", nämlich mit viel Herz und Leidenschaft für HTML und CSS.

Für einen davon habe ich ein Gast-Tutorial geschrieben - was ich bekanntlich ja sonst nie mache :=).

Blogger: Layout-Designer designen

von
Von vielen seltsamen Dingen, die in blogspot.com Blogs möglich sind, hat der normale Blogger-User noch nie etwas gehört - ich schreibe heute über so eine schräge Idee, nämlich wie ihr die Layout-Vorlage im Dashboard designen könnt

Texte schwer kopierbar machen

von
Teil 2 meiner kleinen Reihe von Posts, die ich-schon-länger-versprochen-habe. Eine Leserin hat mich gefragt, wie sie das kopieren von Texten aus ihrem Blog verhindern kann. Antwort: Gar nicht! Das ist wie Photos, wenn jemand wirklich dein Zeug mopsen will, dann schafft er das auch. Das einzige was geht, ist es _schwerer_ zu machen. Hier eine total simple Idee mit der fast unbekannten CSS-Eigenschaft User-Select

Blogger: Neuer/Älter Link mit jQuery

von
Blogger Blogs sehen sich auf einer bestimmten Art alle sehr ähnlich, weil es gewisse funktionale HTML-Tags gibt, die in blogspot.com eben nur so und nicht anders arbeiten. Zu diesen HTML-Tags gehören etwa die Neuer/Älter Links am Fuß der Posts beziehungsweise am Fuß der Index-Seiten. Diese Tags arbeiten nur innerhalb des Blog-Gadgets und ob man die nun mit weißem Hintergrund und schwarzer Schrift oder als Bild o.ä. gestaltet - trotzdem bleiben diese Tags unten am Fuß der Posts beziehungsweise am Fuß der Index-Seiten.

Bilder linksbündig am Text ausrichten

von
Bilder lassen sich in Blogger nicht linksbündig am Text ausgerichtet - ihr könnt das ausprobieren und im Vorlagen-Designer > Breite anpassen die Blogbreite verkleinern wie ihr wollt, trotzdem werdet ihr es nicht schaffen, eure Bilder links ohne Rand zu bekommen. Die Frage wurde schon wirklich sehr oft gestellt (unter anderem x mal im Blogger Hilfe-Forum) und meines Wissen noch nie ernsthaft beantwortet. Heute also mal wieder eine Premiere :=)

Eine Content-Menü im Kacheldesign

von
Ich wurde gebeten darüber zu schreiben, wie man ein Menü baut. Ich denke, für einfache Menüs gibt's genug Anleitungen im Netz, muss ich ja nicht auch noch was schreiben - um's nicht allzu langweilig zu machen, werde ich heute also über etwas schreiben, was eher 'unüblich' ist, nämlich ein Content-Menü im Kachel-Design. Content-Menü meint, das der Inhalt des Menüs keine Links sind, sondern kurze Texte, Bilder oder Grafiken.

Benutzerdefinierte Suche personalisieren

von
Vor einiger Zeit habe ich mal was über die benutzerdefinierte Suche in Blogger geschrieben. Eine tolle Suchfunktion, gar keine Frage - um Welten besser als das 'offizielle' Blogger Suchgadget. Das einzige was mich an dem Teil ernsthaft gestört hat, das es hässlich ausschaut und brutal schwer zu personalisieren ist. Ein Bekannter wollte etwas 'cooleres' und vor allem simpleres und è voilá, hier ist es:

Ein jQuery Audio-Player für Blogger

von

Update

Funktioniert jetzt auch im FF!!

Früher haben viele Blogger zum Abspielen von Musik den Youtube-Player bis auf eine Höhe von 25px verkleinert und den Player quasi als "Audio-Player" benützt. Youtube war das wohl ein Dorn im Auge und heute leitet der Link auf die YouTube Seite weiter, das macht also keinen Sinn mehr - ich habe nach einer Möglichkeit gesucht, wie man eigene Audio-Dateien in Blogger abspielt und das ist alles andere als einfach.

Blogger: Hover-Effekte mit CSS-Filter

von
Vor einigen Wochen wurde eine neue CSS3-Filter Klasse vorgestellt, mit denen sich die Bildinformationen in Fotos wie in einer Bildverarbeitung manipulieren lassen. Ob das nun wirklich sinnvoll ist oder nicht sei mal dahingestellt - auf jeden Fall lassen sich damit nette Spielereien machen. Ich habe mal einige der neuen Filter in einer Hover-Spielerei verarbeitet.

Blogger: Startseite einrichten

von
Ein seit Jahren nachgefragtes Feature - endlich ist es da, ihr könnt auf Blogger eine 'echte' Startseiten einrichten! Die Funktion ist leider derart versteckt, das man nicht sofort drauf kommt, das sich damit eine Startseite bauen lässt - aber es funktioniert! Als 'Startseite' könnt ihr ab jetzt eine beliebige statische Seite definieren und statt wie bisher auf der 'Homepage', landet ihr beim öffnen eures Blogs auf dieser statischen Seite.

Blogger: Link-Listen Gadget gestalten

von
Das Link-Listen Gadget von Blogger ist im Ausgangszustand eine simple ungeordnete Liste - alles in allem toootal langweilig. Ich habe Lust gehabt, daraus mit CSS3 was spannenderes zu machen. Ich beschreibe die einzelnen Arbeitsschritte, vielleicht motiviert das den einen oder anderen, mal selber was auszuprobieren. Ich gebe immer nur die CSS von den einzelnen Schritten - am Ende dann eine Zusammenfassung, wo ich auch die Vendor-Präfixe für die verschiedenen Browser ausschreibe.

Blogger: Picasa-Alben direkt einbinden

von

Vorbemerkung

Ich habe diesen Post schon mal vor einigen Tagen veröffentlicht, dann aber festgestellt, dass die Darstellung von dem 'Test' Picasa-Album nicht ganz einwandfrei erfolgt. Ich habe daraufhin den Post zurückgezogen und noch mal neu überarbeitet. Jetzt sollte es funktionieren. Ich bin kein Perfektionist, aber das über was ich schreibe, sollte natürlich schon funktionieren und auch einsetzbar sein.

Archiv-Slider via JSON-Feed I

von
Ich habe mich am Wochenende - nach längerer Zeit - neu mit dem Thema 'Slider' beschäftigt. Mein Ziel war einen universalen Content-Slider für die Blogger-Sidebar zu bauen - leider hat sich rausgestellt, dass alle mir bekannten Slider die ein oder andere Macke haben. Hoch.- und Querformat sauber miteinander zu mischen, ist Beispielsweise irgendwie noch nirgendwo richtig gelöst worden :=).

Blogger: Fotos in Hoch- & Querformat auf gleiche Breite bringen

von
Ich wurde per Mail gefragt, wie man seinen Blogger-Fotos im Quer- und Hochformat die gleiche Breite geben kann - wobei natürlich die Skalierung beibehalten und die Bilder-Größen automatisch angepasst werden soll :=). Und das ganze soll sich auch auf alle Fotos im Blog nachträglich anwenden lassen. Ich muss zugeben, Bilder im Hoch.- wie Querformat die gleiche Breite zu geben hat schon was leicht ... hmhm ... verschrobenes? ... aber es soll ja nicht mir gefallen, sondern der Fragestellerin. Es ist auf jeden Fall ein interessantes Problem und ich denke ich hab's lösen können.

Blogger: Posts für einzelne Labels personalisieren

von
Okay, ich habe die letzten Tage nicht viel geschrieben - ich geb's zu, die ersten schönen Sommertage wollte ich nicht vorm Rechner verbringen :=). Als Ausgleich werde ich heute über etwas spannendes schreiben - was die letzten Wochen per Mail/Kommentare hier öfters angefragt worden ist - ob man nämlich einen Post mit einem bestimmten Label individuell gestalten, d.h. 'personalisieren' kann.

Blogger: Spezielle CSS-Formatierungen für einzelne Posts

von

Update

Peter Burkes hat als Kommentar ein sehr viel sinnvolleren Post-Titel als meinen ursprünglicheren vorgeschlagen - ich habe das gerne aufgenommen und umgesetzt. So wird klarer, um was es geht.

Normalerweise passt ihr mit CSS das Aussehen eures Blogs 'global' an - ihr gestaltet also nicht nur einen einzigen Post-Hintergrund, sondern alle Post-Hintergründe, nicht nur die Textfarbe für einen einzigen Post, sondern für alle Posts usw... Manchmal möchte man aber wirklich nur in einem einzigen Post den Hintergrund, Textfarbe oder whatever ändern und zwar sowohl auf der Startseite als auch auf der Postseite. Das ist relativ tricky und meines Wissens noch nie beschrieben worden, heute also mal wieder eine absolute Premiere :)!

Blogger: Layout für spezifische Label anpassen

von
Eine Leserin möchte oberhalb eines bestimmten Labels ein Text-Gadget einblenden - also statt "Posts mit dem Label BlaBla werden angezeigt" möchte sie dort ihren eigenen Text stehen haben. So etwas ist mit konditionellen Tags relativ einfach möglich, ich beschreib's trotzdem detaillierter, vielleicht ist es für den ein oder anderen Leser hilfreich.

Blogger: Kommentare durchnummerieren

von
Weil das inzwischen so oft gefragt worden ist: Das folgende funktioniert nur, falls ihr eure Kommentare auf 'Eingebettet' stehen habt - für alle anderen Einstellungen könnt ihr keine eigene CSS definieren.

Heute am Karsamstag gibt's eine kleine Idee, die ich nützlich finde, nämlich die Kommentare mittels einer simplen CSS durchzunummerieren.

Inzwischen gibt's ja schon einige Zeit 'threaded Comnments' auf Blogger und auch einige Anleitungen, wie man die Kommentare mit Javascript durchnummerieren kann. Ich bin der Meinung, Javascript sollte immer nur dann verwendet werden, wenn es keine CSS-Lösung gibt und è voilá, so ein Lösung gibt es! Nämlich mit dem Pseudoelement :before und der CSS3 Eigenschaft counter-increment. Das funktioniert sogar im IE7+, also ist fast schon eine Standardeigenschaft.

Profilfoto beliebig vergrößern

von
Eine Leserin möchte ihr Profilfoto im Profil-Gadget ("Über mich") vergrößern. Ich verwende das Gadget nicht, aber das Profilfoto ist tatsächlich a bisserl klein und vielleicht interessiert die Lösung auch noch andere Leser, deshalb dieser Post. Vorneweg, das ist keine triviale Sache, weil in dem Profil-Foto eine style Anweisung geschrieben ist, durch die ihr die Größe des Profilfotos nicht einfach durch CSS ändern könnt. Ihr braucht dazu Javascript, einen anderen Weg gibt es nicht. Bei abgeschaltetem Javascript wird trotzdem ein Profilfoto in 'normaler' Größe angezeigt, das Javascript ist also 'unaufdringlich'.

Dynamische Ansichten: Layout auf Deutsch

von

UPDATE

Wie ich die letzten Tage rausgefunden habe, funktioniert die folgenden Anweisung nur im _alten_ Dashboard Gui, nicht im neuen. Warum auch immer - Blogger hat nur für das alte Dashboard GUI einen HTML-Editor für die dynamische Ansichten spendiert. Im neuen Editor könnt ihr die dynamische Ansichten leider nicht bearbeiten. Falls sich daran etwas ändert, werde ich es hier nachtragen.

HTML der dynamischen Ansichten editieren

von
Es gibt große Neuigkeiten von den dynamischen Ansichten. Diese Vorlage lassen sich ab jetzt im Vorlagen Designer editieren. Bis gestern brauchte es noch ein irren Hack dazu, seit heute Nacht geht das im _alten_ Dashboard Design über 'Design' > 'HTML bearbeiten'. Falls ihr das _neue_ Dashboard Design benützt, müsst ihr zurück auf das alte Design, sonst kommt ihr an den Editor nicht ran. Ich habe ewig darauf gewartet, jetzt endlich lassen sich die dynamischen Ansichten wie 'normale' Ansichten editierten. Oder doch nicht?

Blogger: Layout im 'Galerie' Style

von
Ich habe schon vor längerer Zeit einem Leser versprochen, über ein Layout im 'Galerie' Style zu schreiben - yeah, heute ist es so weit :=). Ich werde zeigen, wie ihr mit ein paar wenigen Zeilen Code eine ganz normales 'Simple' Layout von Blogger in einen 'Galerie' Blog umwandeln könnt. 'Galerie' meint in dem Zusammenhang, das auf der Starseite von eurem Blog nur ein Teaser Bild aus dem Post zu sehen ist und ihr über einen Jump-Link auf den eigentlichen Post kommt.

Blogger: Posts in umgekehrter [reverser] Ordnung

von
Auf dem Weg, den Blogger JSON-Feed a bisserl besser zu verstehen, habe ich mir einen Zugang zur Blogger JSON Schnittstelle besorgt. Ich kann damit Post direkt aus dem JSON-Feed auslesen und egal-wo-ich-will darstellen. Das ist im Grunde genau das, was die dynamischen Ansichten machen. Die sind bekanntlich schön, aber nicht besonders funktional. Mein Ziel für das nächstes Layout ist, mit der Blogger JSON API (Schnittstelle) zu arbeiten. Damit sind Spielereien möglich, die in 'normalen' Blogs nicht funktionieren.

Blogger Layout: Seiten-Typen

von
Ich habe gestern über eine kleine Spielerei mit den Seitentypen in Blogger geschrieben. Ich weiß das es viele Blogger interessiert, die verschiedenen Seiten-Typen unterschiedlich zu gestalten. Ich möchte die dafür notwendige HTML/CSS mal in einem Post kompakt zusammenfassen.

Header-Wechsel auf unterschiedlichen Seiten-Typen

von
Als Spielerei für die Nacht habe ich kleines Script gebastelt, dass auf jedem Seiten-Typ ein anderes Header-Bild anzeigt. Blogger hat bekanntlich sieben Seitentypen, von denen drei wirklich wichtig sind: Nämlich 'statische Seiten', 'Index (Start) Seiten' und 'Item (Post) Seiten'. Jeder dieser Seiten könnt ihr über konditionelle Tags eine eigenes Layout geben. So weit so gut, aus Spass habe ich konditionellen Tags mit einem Script geschrieben, das das Header-Bild auf jeder dieser Seite wechselt. Wenn's jemand ausprobieren will, bitte erst in einem Test-Blog, nicht in eurem Haupt-Blog.

Blogger: G+ Post-Titel-Name ändern

von
Seit ein paar Wochen kann man seinen Blogger-Account mit Google+ verbinden. Dadurch wird das Blogger-Profil durch das G+ Profil ersetzt. An sich ganz praktisch, wozu brauche ich zwei Profile?

Was ich allerdings weniger gut finde ist, dass dadurch der Postname (veröffentlicht von Oliver) durch den vollen Namen (veröffentlicht von Oliver Doetsch) ersetzt wird.

Blogger: Runde Ecken für den Internet Explorer

von
Tom von thor.78.com hat mich gestern auf verschiedene Darstellungsprobleme meines neuen Layouts im Internet Explorer9 hingewiesen. Ich bin dem nachgegangen und habe dabei ein großes Rätsel lösen können, nämlich warum der IE9 in Blogger-Standard Layouts absolut beschissen [sorry!] rendert. Ich meine, der Internet Explorer ist natürlich kein Browser und so weiter, trotzdem sollte er nicht sooo schlecht sein, wie er in Blogger faktisch ist - ein paar Dinge sollte er zum Beispiel schon können, runde Ecken etwa. Kann er aber in Blogger Standard-Layouts nicht. Warum?

Roll-Out vom neuen Layout!

von
Ein eineinhalb Jahre alter Traum ist in Erfüllung gegangen und ich blogge seit heute Nacht in meinem ersten komplett selbst geschriebenen Layout - nämlich einem angepasstem EINS. Nicht alles ist perfekt und ein paar Fehler sind mir schon jetzt aufgefallen, alles in allem sollte der Blog aber funktionieren. Falls euch irgend ein Post auffällt, der komplett zerschossen ist, gebt mir bitte Bescheid - ich habe bis jetzt ungefähr 20 Posts kontrolliert und alle scheinen noch zu funktionieren ... Puh!

Drei Gadgets nebeneinander

von
Ein Leser fragt, wie er unterhalb des Headers drei Gadgets nebeneinander bekommt - analog zu den drei Gadgets nebeneinander in der Fussleiste. Ich beschreibe einen sicheren Weg, der in Chrome, FF, Safari, Opera, Internet Explorer 8/9/10 und in allen mobilen Browser funktioniert.

Ein responsive Layout für Blogger: EINS

von
Die letzte Woche war ziemlich heftig und ich hab hier kaum was geschrieben. Dafür heute als Ausgleich etwas besonderes, was es - meines Wissens - als Blogger-Layout noch nicht gibt: Ein Responsive-Layout mit horizontalem und vertikalem Grid für Blogger!

Rechtsklick-Sperre mit jQuery

von

Ich bin erstaunt: Auf diesem Blog ist der Post mit der höchsten Aufruf-Zahl dieser. In knapp einem Monat wurde er bereits mehr als tausendmal abgerufen. Außerdem sind inzwischen rund zwanzig Mails eingetrudelt, die sich nach einem Javascript für 'ne Rechtsklick-Sperre erkundigen. Irgendetwas sagt mir, dass ich noch mal was darüber schreiben sollte :=)

Blogger: Responsive Slider/Fader für die Sidebar

von

Ein Leser hat sich einen simplen Fader/Slider für die Blogger-Sidebar gewünscht - so etwas in der Art von meinem (experimentellen) CSS3-Fader mit der Pseudoklasse :checked. Nur soll es ohne knietiefes waten durch HTML/CSS funktionieren. Und weder Loop noch Autostart baben - also anders als bei vielen jQuery-Slider. Und gut aussehen ...

Benutzerdefinierte Suche in Blogger

von



Bei Blogger ist die eingebaute Suchfunktion ... für einen Suchmaschinen-Betreiber mehr als peinlich. Die Suche über die Navbar Suchfunktion funktioniert seit 2009 nicht mehr richtig, das Blogger-Widget 'Suche' durchsucht die letzten 20 Posts und dann ist Schluss. Über beide Suchfunktionen ärgere ich mich mehr, als das ich damit jemals suche. Ihr kennt das bestimmt - ihr habt auf einem Blog einen alten Artikel gelesen, den ihr jetzt sucht; statt mit der internen Blogsuche, kommt ihr mit der allgemeinen Google-Suche meistens schneller an's Ziel. Warum also nicht gleich seinen Blog mit der allgemeine Google-Suche durchsuchen lassen? Das geht leicht mit einem fertigen Widget von Google, nämlich der "Benutzerdefinierte Suche".

Flipcard-Kachel nachgebaut

von

Seit Version 10 unterstützt in den dynamischen Ansichten auch der Firefox die 3d Bewegung der Flipcard-Kachel. Bis jetzt war da im Firefox ja nur ein Hintergrundwechsel zu sehen. Um die Funktion besser zu verstehen, habe ich so eine Flipcard-Kachel nachgebaut. Fahrt mit der Mause über das Bild und ihr seht die Drehbewegung.

Blogger: Punkte vor Posttitel setzen

von

Für die Überschrift zu diesem Post habe ich a bisserl nachdenken müssen. Damit klar wird worum es geht - Hintergrund für diesen Post ist die Frage einer Leserin, wie sie in ihrem Blog kleine 'Schmuck'-Grafiken vor jedem Posttitel bekommt. Ich habe dafür eine universelle & allgemeine Lösung gesucht, die sich in jeder Blogger-Vorlage und für jede Grafik anwenden lässt. Als erstes eine einfache Demo, wie das später ausschaut.

Blogger: Eigene Schriften verwenden

von
Ich habe die letzten Tage ein paar seltsame Tutorials zum Thema 'Eigene Schriften in Blogger' gefunden - deshalb einige grundsätzliche Bemerkungen zum Thema, vielleicht ist es für den ein oder anderen hilfreich.

Bilder Vorwärts und Rückwärts blättern mit CSS

von

Fast schon ein kleine Tradition auf diesem Blog, dass ich am Sonntag eine Skizze von etwas poste, was mir die Woche über so durch den Kopf gegangen ist.

Dynamische Ansichten: Labels durch JSON-Feed auslesen

von
Tom von thor78.com hat eine clevere Idee gehabt, wie man sich für die dynamischen Ansichten ein Label-Verzeichnis bauen kann. Mir ist dabei eingefallen, dass ihr dafür statt des XML-Feeds auch den JSON-Feed nehmen könntet. Was der JSON-Feed ist und wie ihr ihn bekommt, habe ich schon mal als Kurzbeschreibung gegeben. Die dynamischen Ansichten benützen JSON für ihren Inhalt und warum nicht die Labels direkt aus JSON auslesen?

Blogger: Header fixieren

von
Es wurde ein Tutorial darüber gewünscht, wie sich der Header fixieren lässt. Ich hab's kurz recherchiert und das Thema wurde tatsächlich noch nie [sic!] für die neuen Blogger Layouts beantwortet - noch nicht mal in der englischsprachigen Bloggospähre. Das hier ist also eine Premiere :=) - die komplette Lösung für alle modernen Browser inklusive IE9 und mobile Browser. Gerade letzteres ist stark, bis vor kurzem konnten mobile Browser nämlich überhaupt keine fixierten Elemente darstellen!

Blogger: Drei Bilder nebeneinander, Teil 12

von

In der unendlichen Geschichte drei-Bilder-nebeneinander in einem blogspot.com Blog heute mal eine exotische Idee. Warum nicht Pseudoelemente dafür nehmen? Wenn ihr euch tiefer mit Pseudoelemente beschäftigt werdet ihr sehen, dass sie für sehr viele Sache sehr nützlich sind, weil ihr mit wenig Aufwand zu schnellen Ergebnissen kommt.

Praxis: Blogger Bilder ohne Rechtsklick

von

Ein mehrere viele Leser haben bemängelt, dass Rechtsklicksperre ohne Javascript eine akademische Übung ohne praktische Relevanz sei. Yeah, was soll ich dazu sagen? Grundsätzlich ist das richtig, das liegt aber auch in der Natur von diesem Web-Log. Ich schreibe hier über alle möglichen Ideen, Einfälle, Skizzen im Zusammenhang mit blogspot.com Blogs und mache kein Tutorial-Blog. Trotzdem mal ein völlig simple Demo für die Idee, Bilder mit einem Pseudoelement in den Blog einzubinden.

Bilder: Rechtsklick-Sperre ohne Javascript

von

Obwohl ich da nicht mehr aktiv bin, lese ich ab und zu noch im Blogger-Forum mit und bin immer wieder erstaunt, was für Emotionen bestimmte Themen erzeugen - Stichwort Rechtsklicksperre ... heheh. Okay, solche Klicksperren sind im Grunde sinnlos und zu dem Thema ist eigentlich alles gesagt (nur noch nicht von jedem), aber wer seine Bilder umbedingt a bisserl schützen will, warum nicht? Als Variation hier eine Skizze _ohne_ Javascript, einzig und allein mit Pseudoklassen gebaut.

Für die Tonne

von
Wer hier mitliest weiß, ich bin ein großer Fan der neuen dynamischen Ansichten. Letzte Woche haben die Blogger-Jungs mal wieder an irgendwelchen neuen Features geschraubt und seitdem hängen die Titeltags. Die dynamischen Ansichten generieren ja keine eigene Tags, sondern die werden von außen erzeugt und weitergeleitet. Ich hatte seit letzten Donnerstag eine Absprungrate von 80%, d.h wer mich über Google gefunden und auf den Link geklickt hat, ist auf die Startseite von den dynamischen Ansichten gelandet - und fand das vermutlich wenig witzig und ist wieder gegangen.

CSS3-Slider mit Pseudoklasse :checked

von

Kein Javascript, pures CSS! Chrome, Safari, Opera, FF, IE9, iPad

Über das Bloggen

von

Ich habe heute sehr viel über das Bloggen gelernt. Ich wollte eigentlich einen Post über die neuen verschachtelten Kommentare schreiben. Das Feature ist an sich toll, nur ist das Layout ziemlich hässlich. Also wollte ich einen Post darüber schreiben, wie sich dass reparieren lässt. Dann ist mir aufgefallen, dass die neue Hintergrund-Grafik von den Kommentaren seltsam aussieht. Ich hatte ein paar Ideen, was sich statt dessen machen lässt - dann noch dieses und jenes und herausgekommen ist ein total wirrer Post, mit allen möglichen Anleitungen, Ideen und CSS.

Skizzenbuch: Pure CSS3 Lightbox

von
Ich habe über den Trigger durch die Pseudoklasse :checked weiter nachgedacht und eine ganze Lightbox damit gebaut. Besonderer Leckerbissen: Die Bilder werden über die Pseudoklasse :before :after durch den Trigger in den Blog geladen! Es wird kein Bild 'vorgeladen', sondern dann geholt, wenn der 'Klick' auf den Trigger erfolgt. Die Blog-Ladezeit bleibt damit schön kurz.

PDF Dokument via iFrame im Blog einbinden

von
Ich wurde schon oft gefragt, ob man in Blogger ein PDF Dokument einbinden kann - okay, hier eine Lösung im Lightbox-Style.

Einen Div Container vertikal und horizontal zentrieren

von
Ein Leser hat mich um Hilfe bei einem Problem gebeten - er möchte einen Div Container innerhalb eines zweiten Div Containers sowohl vertikal als auch horizontal zentrieren. Es soll dabei nicht 'gemogelt' werden - also mit border oder ähnlichen ein Pseudocontainer gebaut werden - sondern es sollen am Ende zwei echte, ineinander verschachtelte Div Container herauskommen.

Skizzenbuch: CSS3 Eigenschaft 'Resize'

von
Ich habe noch mal über das Auf.- und Zuklappen von Texten im Blog nachgedacht. Statt das mit jQuery zu lösen, warum nicht mit einer Textbox und der CSS3 Eigenschaft 'Resize'? Die Eigenschaft ist so gut wie unbekannt, obwohl sie inzwischen von Webkit und Mozilla unterstützt wird. Opera soll auch noch dazu kommen - das wären dann alle 'echten' Browser. Es fehlt - wie immer - der Weltmarktführer, aber den verwendet ja auch keiner.

Dynamische Ansichten: Header umbauen - Bild einbauen

von

Update

Wie sich herausgestellt hat, tritt bei sehr großen Bilder (über 400px Höhe) eine Problem mit den statischen Seiten auf - in diesem Fall überdeckt das Header-Bild den Kopfteil der Seite.

Bloggen, Typographie und Layout

von
Vor etwas mehr als einem Jahr habe ich mit dem bloggen angefangen - die Hälfte dieser Zeit habe ich dazu gebraucht, mein eigentliches Thema zu finden. Am Anfang habe ich über etwas geschrieben, von dem ich dachte, ich hätte dazu etwas zu sagen; vielleicht war es das auch, nur war es - wie sich dann herausgestellt hat - zuwenig. Über einen ziemlichen Umweg bin ich darauf gekommen, über was ich wirklich schreiben will - nämlich CSS, HTML und Javascript und was man damit alles in einem blogspot.com Blog anstellen kann.