Info

Die html7bar ermöglicht eine attraktive Platzierung von Weblinks und anderen Informationen in einer Windows 7 nachempfundenen Footer-Leiste.
Der Orb lässt sich anklicken und ein Fenster mit weiteren Links und einem Profilfoto öffnet sich. Wenn dieses Fenster geöffnet ist reicht ein Klick auf den Orb oder irgendwo außerhalb des Fensters um es zu schließen.

Voraussetzung: Auf der Seite muss jQuery eingebunden sein.

Installation

Ich erkläre die Installation der html7bar kurz in textform und weiter unten gibt es noch ein Video zum Nachmachen.

Kurz: .zip Archiv von unten downloaden, lokal entpacken, die Dateien auf den Server hochladen, Pfade in der

html7bar.html

anpassen und die .html mit php includen. Dann Links, Icons und Profilbild anpassen. Das Profilbild sollte 60x60px, Icons 16x16px bzw 32x32px groß sein.

Szenario: Ich möchte die html7bar in einem anderen Projekt einbauen. Um den Code des Projekts nicht unnötig zu vergrößern werde ich darauf hin arbeiten, dass am Ende in diesem Projekt nur noch mit

<?php include("http://url.zur/html7bar/html7bar.html"); ?>

die html7bar eingebaut wird. Somit bleibt eine eindeutige Trennung der html7bar und des ursprünglichen Projekts, der Code bleibt übersichtlich und aktivieren/deaktivieren ist durch das Auskommentieren dieser Zeile vollbracht.

In diesem Video zeige ich die Installation in weniger als 2 Minuten:

Konfiguration

Links ändern:
Sowohl die Links der Orb-Fensters als auch die Links der Taskbar sind in der

html7bar.html

enthalten. Dort könnt ihr URL und Linktext normal abändern.
Icons:
Die Icons müssen alle im

img

Unterordner liegen.
Die Maße sollten 16x16px für die Taskbaricons und 32x32px für die Orb-Fenstericons sein. Hintergrund transparent.
Die Icons werden ebenfalls in der html7bar.html entsprechend angepasst.
Profilfoto:
Das Profilfoto muss ebenfalls im

img

Ordner liegen, sollte 60x60px groß sein und wird in der

html7bar.css

in Zeile 91 (

background: url("img/profilfoto.png") no-repeat;

) angepasst.

Screenshots:

html7bar als Lesezeichen-/Linkleiste:

html7bar als persönlicher, öffentlicher Newsfeed:

Demo

Demo
aktive Version: 2.3

Testnutzung:

<?php include("http://public.hannes-schurig.de/html7bar/html7bar.html"); ?>

Download

html7bar [.zip] (100KB)
aktive Version: 2.3

Changelog

v1.0 – release
v1.0.1 – html7bar credits postlink, fix credits padding
v1.0.2 – fix bar margin (left)
v1.0.3 – several css fixes, almost no css resets anymore (3 left)
v1.1 – using sprite images instead of multiple images (where it is possible) for better performance
v1.2 – it’s now possible to hide the html7bar
v1.3 – better graphics and css, hover everywhere
v1.4 – better sliding trick for hiding the bar (http://bit.ly/oYRoBF)
v1.5 – save html7bar visibility in cookie (if possible), show/hide html7bar on revisit
a.k.a. v2.0 – bugfixes, design optimization, show/hide html7bar with cookie-saving support
v2.1 – search field in orb window now searches the blog
v2.1.1 – code cleaning in html and css, 1 error in transitional xhtml left (has to)
v2.2 – buttons for configs, about and deactivate … i’m not really into this popping-out window myself because of the colors, thinking about something different
v2.3 – finished design for config/about/deactivate-window with shadow-background