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):

Eure HTML Tweaking Mutti,