Im folgenden Artikel möchte ich kurz das Plug-In „Swifty-bar“ vorstellen. Das kostenlose Plug-In kann genutzt werden, um dem Besucher deiner Website den Lesefortschritt im aktuellen Beitrag anzuzeigen. Auch ich verwende es seit ein paar Monaten und bin sehr zufrieden. Schau am besten selbst kurz auf den unteren Rand des Screens, um einen Eindruck von der Swifty-bar zu erhalten. Zur Darstellung des Lesefortschritts verwendet das Plug-In am unteren Ende des Bildschirms eine kleine Progress-Bar, die sich per CSS beliebig anpassen lässt. Ob die kleine Toolbar am oberen oder unteren Bildschirmrand dargestellt werden soll, lässt sich im Menü einfach durch eine Checkbox einstellen. Ich persönlich empfinde die Darstellung des Lesefortschritts gerade bei längeren Artikeln sehr hilfreich, da man so immer im Blick hat, wo man sich in dem Artikel aktuell befindet. Des Weiteren lässt sich im Backend einstellen, wie viele Wörter im Durchschnitt pro Minute gelesen werden. Mithilfe dieses Wertes berechnet das Plug-In die geschätzte Gesamtlesezeit für den Artikel. Doch das ist noch nicht alles, was dieses kleine „Plug-In“ mit sich bringt. Selbst die Verlinkung auf die „alle Beiträge“ Sektion oder auf alle Beiträge der Kategorie des aktuell gezeigten Artikels lassen sich durch ein paar einfache Klicks einfügen. Außerdem bringt das Plug-In gleich social Share-Buttons für Facebook und Co. mit sich, wodurch du dir die Installation eines weiteren Plug-In sparen kannst.
Um das Aussehen der kleinen Toolbar zu verändern, lassen sich im Customizing verschiedene vorgefertigte Designs auswählen. Sollte dir das nicht genügen oder sollen die Farben oder die Erscheinung deinem Design angepasst werden, habe ich unten die wichtigsten CSS-Klassen aufgelistet, die dafür in der Custom CSS überschreiben werden müssen.
#sb_super_bar.default .sb_prev-next-posts > a { color: #81d742; } #sb_super_bar.default .sb_text-size a:hover { background-color: #27ae60; } #sb_super_bar.default .sb_text-size a{ background-color: #81d742; } #sb_super_bar.default .sb_prev-next-posts .sb_next_post_info span.sb_category { background-color: #81d742; }
Solltest du aus Platzgründen die Swifty-Bar auf mobile Devices nicht anzeigen wollen, gibt es dazu leider noch keine Option im Menü. Allerdings kann dies mit einer einfachen Media-Query gelöst werden.
@media screen and (max-width: 800px) { .sb_super_bar{ display:none; } }
Als Anmerkung noch ein kleiner Erfahrungsbericht aus den letzten Monaten, in denen ich das Plug-In getestet habe: Es hat sich gezeigt, dass gerade die Verlinkung von allen Beiträgen oder von einer Kategorie sehr nützlich war. Die Links wurden deutlich öfter geklickt als in der Vergangenheit. Vor dem Einsatz von Swifty-bar hatte ich, wie in vielen anderen Blogs, die Kategorien einfach am Ende jedes Beitrages oder in der Sidebar verlinkt.
Solltest du auch Erfahrungen mit der Swifty-Bar oder einem ähnlichen Plug-In gemacht haben, dann lass es mich wissen und teile deine Erfahrungen gerne in den Kommentaren.