Blogumus (Cumulus) - 3D Flash Tag Cloud - für Blogger Blogspot
Wie kann man das Widget Blogumus in einem Blogger Blogspot Blog einbetten? Wie kann man das Wordpress Plugin Cumulus in Blogger Blogspot einbauen? Wie kann man das 3D Flash Label Cloud Widget Blogumus in Blogger Blogspot einbetten?
Auf vielen Wordpress Blogs ist das 3D Flash Tag Cloud Plugin Cumulus zu sehen und stößt bei dem ein oder anderen auf Begeisterung. Entwickelt wurde dieses Wordpress Plugin von Roy Tanck.
Kurze Zeit später (ca. 2008) tauchten die ersten abgewandelten Versionen von Cumulus unter dem Namen Blogumus auf. Auf zahlreichen englischsprachigen Blogs wurde das Widget Blogumus sowie der Code zum Einbauen angeboten. Leider war häufig der einzubauende Code fehlerhaft oder die zwei zusätzlich benötigten Dateien (.js und .swf) befanden sich nicht mehr auf dem angegebenen Webspace und somit funktionierte das Widget leider nicht.
Eine Variante des Blogumus Widgets funktioniert zumindest in den Standard Template Vorlagen und wurde in den letzten Tagen an jeder Standard Vorlage ausgetestet.
Vorweg noch einige Anmerkungen, da es in einem Blogger Blogspot Blog keine Tags gibt, greift das Widget auf die Labels (Kategorien) zu. Das bedeutet, es müssen schon Posts bzw. Artikel existieren, denen ein Label zugewiesen wurde. Besser wären mehrere Labels, da diese ja dann im Widget angezeigt werden. Es muss in den HTML Code der Template Vorlage etwas HTML Code mit zwei integrierten Objekten (.js und .swf) eingefügt werden. Nach Bedarf sind noch Einstellungen für Breite, Höhe, Schriftfarbe und Rotationsgeschwindigkeit zu tätigen. Es ist gut möglich, dass dieses Widget nicht in allen Template Vorlagen funktioniert.
Wurde der Code in die Template Vorlage eingefügt, wird es unter Layout >> Gadget hinzufügen rechts in der Seitenbar an erster Stelle mit der Bezeichnung Blogumus angezeigt. Dort lässt sich durch Anklicken das Gadget Blogumus an andere Stellen der Template Vorlage verschieben. Möchte man das Gadget Blogumus wieder entfernen: Layout >> Blogumus >> Bearbeiten >> Löschen >> Layout speichern – zum Löschen wird also kein Eingriff in die Template Vorlage nötig.
Der Einbau des Gadgets Blogumus ist relativ schnell erledigt. Es wird empfohlen, wie bei allen Tests bzw. Veränderungen am Blog vorerst einen Test Blog zum Ausprobieren zu nutzen.
Einbau des Gadgets Blogumus in einen Blogger Blogspot Blog
- es wird die neue Blogger Oberfläche verwendet, wer sie noch nicht benutzt kann sie im Dashboard (ganz oben) unter Neue Blogger-Oberfläche testen aktivieren
- bei Blogger.com einloggen und wie bei jeder Veränderung am Blog unbedingt eine Sicherung vom Template und vom Blog (alle Artikel & alle Kommentare) anfertigen – wenn es nicht funktioniert kann man beide Dateien wieder hochladen
- Template sichern: beim entsprechenden Blog zu Layout >> Backup/Wiederherstellung (oben rechts) >> Vollständige Vorlage herunterladen
- Blog sichern: beim entsprechenden Blog zu Einstellungen >> Sonstiges >> Blog exportieren (ganz oben) >> Blog herunterladen
- Vorlage >> Live im Blog >> HTML bearbeiten (es erscheint eine Warnmeldung) >> Fortfahren >> Haken bei Widget-Vorlagen komplett anzeigen und über STRG + F oder F3-Taste die Seitensuche aktivieren, in diese Suchmaske folgenden Code eingeben und finden: <b:section-contents id='sidebar-right-1'> (wer keine Standard Vorlage nutzt, bei dem kann die Bezeichnung etwas anders aussehen; sofern schon Gadgets in der Seitenbar vorhanden sind werden diese gleich darunter (als Widgets) aufgeführt
- dahinter mit der Eingabetaste (Enter) eine Leerzeile einfügen und folgenden Code einsetzen:
<b:widget id='Label99' locked='false' title='Blogumus' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://dl.dropbox.com/u/38275577/swfobject.js'/>
<div id='flashcontent'/>
<script type='text/javascript'>
var so = new SWFObject("http://dl.dropbox.com/u/38275577/blogumus.swf ", "tagcloud", "240", "300", "7", "#ffffff");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
</div>
</b:includable>
</b:widget>
Der eingefügte Code (in Blau):
- Vorlage speichern, Blog neu laden und Blogumus sollte sichtbar sein und funktionieren
Um den angezeigten Titel Blogumus zu löschen: Layout > Blogumus bearbeiten >> Titel löschen >> speichern nun erscheint der Gadget Titel Labels, den man aber nicht auf dem Blog sieht
Das Design für Blogumus einstellen
Breite, Höhe und Hintergrundfarbe:
"tagcloud", "240", "300", "7", "#ffffff");
Breite: 240 Höhe: 300 Hintergrundfarbe: #ffffff (Weiß)
Schriftfarbe:
so.addVariable("tcolor", "0x333333");
Schriftfarbe: 333333 (dunkelgrau)
Schriftgröße:
style='12'><data:label.name/></a></b:loop></tags>");
Schriftgröße: 12 (px)
Rotationsgeschwindigkeit der angezeigten Labels (Kategorien)
so.addVariable("tspeed", "100");
Rotationsgeschwindigkeit: 100 (%)
Möchte man das Gadget Blogumus mit einem transparenten (durchsichtigen) Hintergrund versehen, muss der obige Code um diese Zeile erweitert werden: so.addParam("wmode", "transparent");
Für einen transparenten Hintergrund fügt man diesen Code ein und muss die Grundeinstellung #ffffff (weißer Hintergrund) nicht verändern.
<b:widget id='Label99' locked='false' title='Blogumus' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://dl.dropbox.com/u/38275577/swfobject.js'/>
<div id='flashcontent'/>
<script type='text/javascript'>
var so = new SWFObject("http://dl.dropbox.com/u/38275577/blogumus.swf ", "tagcloud", "240", "300", "7", "#ffffff");
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
</div>
</b:includable>
</b:widget>
Wer die 2 Objekte (.swf und .js) auf eigenem Webspace lagern möchte kann sie sich herunterladen:
4 Kommentare:
Bei mir erscheint rechts zwar in der Sidebar was, aber nur die Überschrift und darunter nur weiß. Man kann aber mit rechts draufklicken, also eigentlich ist da was, nur werden keine Labels angezeigt?
@iblamepikachu
Habe mir eben Dein Blog angesehen und es funktioniert.
Hast Du das Problem noch immer? Dann könnte es vielleicht am Browser liegen.
Mit den Browsern Chrome und Firefox hat es jedenfalls funktioniert und ich konnte keine Probleme erkennen.
Notfalls probiere es mal mit einen anderen Browser.
vg
Ja, danke, hab es hinbekommen. Hab mich durch verschiedene andere Tutorials gewühlt und bin dann drauf gestoßen, dass es daran lag, dass in einem meiner Labels ein Apostroph vorkam. Wenn in den Labels ein Apostroph oder Anführungszeichen enthalten ist, funktioniert das Widget wohl nicht. Hab das entsprechende Label dann geändert und es hat sofort funktioniert! :)
Jedenfalls super...wenn Cumulus bzw. Blogumus in Deinem Blog nun funktioniert. Das Problem kannte ich noch gar nicht. Aber Danke für die Info und vielleicht hilft es anderen Lesern, mit dem gleichen Problem, weiter.
vg
Kommentar veröffentlichen