Blogger-Tipp #11: How to add rotating header images

 

Später Geek-Ausbruch an einem Freitag!

Schon vor einigen Wochen gab’s diese Neuerung auf dem Blog und sie gefällt mir immer noch sehr gut:

Wechselnde Bilder im Header, die auch noch zu den jeweils relevanten Beiträgen führen!

Im letzten Tipp zur persönlichen Signatur angekündigt, gibt es jetzt doch einen Beitrag dazu – und es ist diesmal noch einfacher, ja echt. Ich glaube, meine total tollen Tipps werden immer einfacher ;)

Vorbereitungen:

  • Maximal 10 Header Bilder (man kann natürlich auch nur zwei, drei oder sechs etc nehmen!) im Querformat schießen, vorbereiten – Größe noch egal, Format sollte gleich sein
  • Ein Fotoservice auswählen, bei dem man bevorzugt ein Konto hat (Photobucket, Picasa, Imageshack…)
  • Die ausgewählten Bilder dort hochladen und den jeweiligen Direct Link rauskopieren
  • Etwaigen Testblog eröffnen oder den bereits bestehenden öffnen

Und dann geht es auch schon ganz schnell! Klickt man auf diesen ►Banner Generator (bin sicher, es gibt viele Alternativen, mir gefiel der an Einfachheit und Optionen am besten) führt er einen eigentlich ziemlich gut durch die Schritte, ich habe jetzt der Vollständigkeit halber trotzdem einen Screenshot gemacht:

  1. Entscheiden, ob man gerne bei jedem Pageload, dh. wenn man die Seite aktualisiert, darauf rumklickt, einen neuen Header zeigen möchte, oder automatisch. Ich persönlich empfinde die Option mit Pageload weniger “merkbar” oder gar nervig. Zu schneller Wechsel könnte das nämlich werden.

  2. Wenn man seine Bilder verlinkt, dann man hier Attribute hinzufügen, dass sich jene Links in neuen Tabs öffnen

  3. Die ideale Größe für sein Template sollte man von seinem Header kennen, um sie hier einzutragen – die Bilder brauchen beim Upload nicht die ideale Größe haben: Diese Einstellung resized alle auf einen Wert.

  4. Wenn man mehrere rotierende Banner auf der Seite haben wollte, wozu auch immer, muss man hier die Anzahl auswählen.

  5. url for link 1: Die Seite, die jenes Bild verlinken soll
    url of image: Die Bild URL des jeweiligen Bildes (immer “direct link” auswählen)
    alt text: Sollte das (verlinkte) Headerbild ein Mouseover haben, hier den Titel eintragen

Das war’s auch schon. Man kann wie gesagt 10 Banner einfügen und klickt am Ende der Seite einfach unten auf Generate und kopiert den Code.

Ich persönlich habe die Verlinkungsoption bei den meisten Bildern genutzt, wie ihr vielleicht schon bemerkt habt…

so führt dieses Bild zur Swatch-Übersicht meiner Sleek i-divines Sammlung

…dieses Bild zu meiner Vorstellung von einigen Revlon Lippenprodukten

…und dieser Header führt zu meinem großen Beitrag zu den Maybelline Color Tattoos:

Den generierten Code fügt man dann als HTML/JavaScript Widget ein, wo davor das Header Bild Widget war (wenn man sich nicht gleich löschen traut, entweder im Testblog probieren oder einfach den Code einfügen und die Preview anschauen):

Blog Dashboard – Layout – Add Gadget: HTML/JavaScript

Im Widget das Titelfeld leer belassen und auf Save klicken:

Und das war’s auch schon! Jetzt im Blog aktualisieren und den Header bestaunen :)

Tipps:

  • Auf die ideale Größe achten – wer über Blogger einfügt, kann sich die px Zahl dort notieren
  • Die etwaigen zu verlinkenden Seiten am besten vorab mal öffnen, um sie im Editor dann gleich nacheinander einfügen zu können.
  • “Stilähnliche” Bilder wirken mMn am besten.

 

Ich hoffe, so ein einfacher Tipp gefällt euch auch mal – für Zwischendurch ;)

Die bisher veröffentlichten Tipps zum Durchklicken (auch auf der Blog Tipps Menüseite):

Blogger-Tipp #2: Start a (beauty)blog – the classy way Blogger Tipp #3: Threaded comments, die zweite
Blogger-Tipp #4: Hide my…contact details! CAPTCHA? Nein, danke!
Blogger-Tipp #5: Wie viele Feed-Leser hab ich wohl… Blogger-Tipp #6: Auto Jump Break for Archive & Labels
Blogger-Tipp #7: How to import blogs to bloglovin’ Blogger-Tipp #8: How to make the most out of Windows Live Writer
Blogger-Tipp #9: How to customise your sidebar headings Blogger-Tipp #10: How to automatically add a signature

Eure HTML Tweaking Mutti,

Sharing is sexy:

4 Kommentare

Nele
10. November 2012 15:08

Just nun, wo du diesen Post verfasst hast, scheint der Header irgendwie kaputt zu sein XD

10. November 2012 15:22

@NeleEs liegt wieder mal an imageshack. Auch andere dort gehostete Bilder werden nicht mehr angezeigt. Sehr nervig!

10. November 2012 16:52

Ich hab mir dann direkt mal sämtliche Blogger-Tipps zu Gemüte geführt und auch ein wenig umgesetzt.
Ganz lieben Dank für die ganze Mühe! :)

Grüßlies Merrick

Kommentieren

Danke fürs Einhalten der Netiquette & Comment Policy!
►Bitte von (Blog)URLs in den Kommentaren absehen, sie landen meist ohnehin im Filter und werden nicht veröffentlicht.
International visitors: You're very welcome to comment in English!