Animierter Text (wie Newsticker) für Blogger Blogspot

blogger Blogspot
Wo gibt es tolle Gadgets für Blogger Blogspot? Wie erstellt man animierten Text für einen Blogger Blogspot Blog? Wie kann man animierte Schrift anzeigen lassen bei Blogspot? Wie erstellt man einen Lauftext (Laufanzeige) wie bei einem Newsticker in einem Blogger Blogspot Blog?

Mit ein paar HTML Tricks lassen sich eigene Gadgets selbst erstellen und nicht immer ist es nötig seinen Blog mit Javascripts zu überladen. Nimmt man noch etwas CSS dazu, dann lassen sich tolle Rezepte zur Bloggestaltung kreieren.

Die gleich folgenden Beispiele für Lauftext (wie bei einem Newsticker) lassen sich in einem Blogger Blogspot Blog überall dort einbinden, wo man ein HTML/JavaScript Gadget hinzufügen kann.

Animierter text (wie Newsticker) für Blogger BlogspotMan kann aber auch seinen Post verschönern. Schreibt man einen neuen Post oder bearbeitet einen vorhandenen Post, befindet man sich im Editor im Schreibmodus Verfassen. Hat man den entsprechenden Code ausgewählt wechselt man im Editor in den Schreibmodus HTML (bearbeiten) und fügt an gewünschter Stelle den Code ein.

 

Text der horizontal gescrollt wird

1. von rechts nach links

Dieser Text wird von rechts nach links gescrollt

Code:
<marquee direction="left">Dieser Text wird von rechts nach links gescrollt</marquee>

2. von rechts nach links mit anderer Textfarbe

Dieser Text wird von rechts nach links gescrollt - rosa Textfarbe

Code:
<marquee direction="left"><font color="#FF00FF"> Dieser Text wird von rechts nach links gescrollt – rosa Textfarbe</font></marquee>

  • <font color="#FF00FF"> Textfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

3. von rechts nach links mit Hintergrundfarbe

Dieser Text wird von rechts nach links gescrollt - blaue Hintergrundfarbe

Code:
<marquee direction="left" bgcolor="#00bfff">Dieser Text wird von rechts nach links gescrollt - blaue Hintergrundfarbe</marquee>

  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

4. von rechts nach links mit Hintergrundfarbe und anderer Textfarbe

Dieser Text wird von rechts nach links gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe

Code:
<marquee direction="left" bgcolor="#00bfff"><font color="#ffff00">Dieser Text wird von rechts nach links gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe</font></marquee>

  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen
  • <font color="#ffff00"> Textfarbe: die rot markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

 

5. von links nach rechts

Dieser Text wird von links nach rechts gescrollt

Code:
<marquee direction="right">Dieser Text wird von links nach rechts gescrollt</marquee>

6. von links nach rechts mit anderer Textfarbe

Dieser Text wird von links nach rechts gescrollt - rosa Textfarbe

Code:
<marquee direction="right"><font color="#FF00FF"> Dieser Text wird von links nach rechts gescrollt – rosa Textfarbe</font></marquee>

  • <font color="#FF00FF"> Textfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

7. von links nach rechts mit Hintergrundfarbe

Dieser Text wird von links nach rechts gescrollt - blaue Hintergrundfarbe

Code:
<marquee direction="right" bgcolor="#00bfff">Dieser Text wird von links nach rechts gescrollt - blaue Hintergrundfarbe</marquee>

  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

8. von links nach rechts mit Hintergrundfarbe und anderer Textfarbe

Dieser Text wird von links nach rechts gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe

Code:
<marquee direction="right" bgcolor="#00bfff"><font color="#ffff00">Dieser Text wird von links nach rechts gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe</font></marquee>

  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen
  • <font color="#ffff00"> Textfarbe: die rot markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

 

Text der vertikal gescrollt wird

1. von unten nach oben

Dieser Text wird von unten nach oben gescrollt

Code:
<marquee direction="up">Dieser Text wird von unten nach oben gescrollt</marquee>

2. von unten nach oben mit anderer Textfarbe

Dieser Text wird von unten nach oben gescrollt - rosa Textfarbe

Code:
<marquee direction="up"><font color="#FF00FF"> Dieser Text wird von unten nach oben gescrollt – rosa Textfarbe</font></marquee>

  • <font color="#FF00FF"> Textfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

3. von unten nach oben mit Hintergrundfarbe

Dieser Text wird von unten nach oben gescrollt - blaue Hintergrundfarbe

Code:
<marquee direction="up" bgcolor="#00bfff">Dieser Text wird von unten nach oben gescrollt - blaue Hintergrundfarbe</marquee>

  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

4. von unten nach oben mit Hintergrundfarbe und anderer Textfarbe

Dieser Text wird von unten nach oben gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe

Code:
<marquee direction="up" bgcolor="#00bfff"><font color="#ffff00">Dieser Text wird von unten nach oben gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe</font></marquee>

  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen
  • <font color="#ffff00"> Textfarbe: die rot markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

5. von oben nach unten

Dieser Text wird von oben nach unten gescrollt

Code:
<marquee direction="down">Dieser Text wird von oben nach unten gescrollt</marquee>

6. von oben nach unten mit anderer Textfarbe

Dieser Text wird von oben nach unten gescrollt - rosa Textfarbe

Code:
<marquee direction="down"><font color="#FF00FF"> Dieser Text wird von oben nach unten gescrollt – rosa Textfarbe</font></marquee>

  • <font color="#FF00FF"> Textfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

7. von oben nach unten mit Hintergrundfarbe

Dieser Text wird von oben nach unten gescrollt - blaue Hintergrundfarbe

Code:
<marquee direction="down" bgcolor="#00bfff">Dieser Text wird von oben nach unten gescrollt - blaue Hintergrundfarbe</marquee>

  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

8. von oben nach unten mit Hintergrundfarbe und anderer Textfarbe

Dieser Text wird von oben nach unten gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe

Code:
<marquee direction="down" bgcolor="#00bfff"><font color="#ffff00">Dieser Text wird von oben nach unten gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe</font></marquee>

  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen
  • <font color="#ffff00"> Textfarbe: die rot markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

 

Laufgeschwindigkeit einstellen 

Für Beispiel:

4. von rechts nach links mit Hintergrundfarbe und anderer Textfarbe – sehr langsam

Dieser Text wird von rechts nach links gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe - sehr langsam

Code:
<marquee  direction="left" bgcolor="#00bfff" scrollamount="2"><font color="#ffff00">Dieser Text wird von rechts nach links gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe - sehr langsam</font></marquee>

  • scrollamount="2" Laufgeschwindigkeit: scrollamount wurde dem Code hinzugefügt die lila markierte Stelle kann mit anderen Werten ersetzt werden
  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen
  • <font color="#ffff00"> Textfarbe: die rot markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

Für Beispiel:

4. von rechts nach links mit Hintergrundfarbe und anderer Textfarbe – sehr schnell

Dieser Text wird von rechts nach links gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe - sehr schnell

Code:
<marquee  direction="left" bgcolor="#00bfff" scrollamount="50"><font color="#ffff00">Dieser Text wird von rechts nach links gescrollt - blaue Hintergrundfarbe - gelbe Textfarbe – sehr schnell</font></marquee>

  • scrollamount="50" Laufgeschwindigkeit: scrollamount wurde dem Code hinzugefügt die lila markierte Stelle kann mit anderen Werten ersetzt werden
  • bgcolor="#00bfff" Hintergrundfarbe: die blau markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen
  • <font color="#ffff00"> Textfarbe: die rot markierte Stelle kann mit anderen Farben ersetzt werden, in Farbtabellen die Spalte HEX wählen und den Wert einsetzen

 

Code anpassen und in ein HTML/JavaScript Gadget oder im Editor im Modus HTML einfügen. Blog neu laden und die animierte Schrift sollte zu sehen sein.

Gadget für HTML/JavaScript in der alten Blogger Oberfläche hinzufügen

  • bei blogger.com einloggen und entsprechenden Blog aufsuchen
  • Design >> Seitenelemente >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code für einen Lauftext einfügen >> Speichern
  • Blog neu laden und der animierte Text sollte zu sehen sein

Gadget für HTML/JavaScript in der neuen Blogger Oberfläche hinzufügen

  • bei blogger.com einloggen und entsprechenden Blog aufsuchen
  • Layout >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code für einen Lauftext einfügen >> Speichern
  • Blog neu laden und der animierte Text sollte zu sehen sein
Artikel als PDF herunterladen

8 Kommentare:

manacur 14. Februar 2012 um 18:53

Wow! Ich hoffe, dass diese fantastischen Ein- und Vorführungen weiterhin auf diesem Blog lange Zeit stehen bleiben, damit man bei Bedarf jederzeit zurückgehen kann.

Eine Frage: könnte man auch bei Blogspot mit entsprechendem html/Javascript erreichen, dass man in Kommentaren verlinken oder Fotos einstellen könnte, wie es z.B. bei blog.de, blog.fr oder blog.uk ohne Probleme möglich ist? Danke im Voraus.
LG

BloggerLatein 14. Februar 2012 um 20:35

Etwas anstrengend aber es geht. Für einen normalen Textlink nimmt man die HTML Schreibweise für Links - mehr ist es eigentlich nicht.

Wenn man die Kommentare schreibt, macht man hinter dem Wort worauf der Link folgen soll ein Leerzeichen und fügt die folgende HTML Schreibweise ein, dannach wieder ein Leerzeichen und der Text kann weiter geschrieben werden.

Code: <a href="http://www.webadresse.com" >Link Title</a>

Für Titel gibt man einen bezeichnenden Namen ein und dann noch die Webadresse ersetzen, dann sollte es eigentlich funktionieren.

Test: Bei Google suchen.

Für Bilder habe ich eben auch die HTML Schreibweise probiert, die mag Blogger nicht akzeptieren, funktioniert leider nicht. Vielleicht wird es ja noch bei der neuen Kommentarfunktion integriert.

Ich glaube aber, es gibt eine Möglichkeit Links in Kommentaren zu unterbinden, hat dies ein Blogbesitzer eingerichtet, dann wird es leider nicht funktionieren.

Schönen Abend.

Viele Grüße

manacur 14. Februar 2012 um 22:12

Herzlichen Dank für die prompte Antwort. Wenigstens kann ich jetzt in Kommentaren verlinken.
Ich hatte auch schon wohl richtig vermutet, dass Blogspot generell das Einstellen von Fotos in Kommentaren bewusst unterbunden hat, denn in den Einstellmöglichkeiten des Dashboards ist keinerlei Hinweis zu finden.
Hoffen wir, dass es in der neuen Kommentarfunktion doch noch integriert wird.
Noch eine gute Nacht
und freundliche Grüße

manacur 15. Februar 2012 um 11:53

Guten Morgen!
Es geht doch! Heureka!
Ich habe den vorgeschlagenen
Code: Link Title
benutzt - aus meinem Bildercache-Server den Direktlink zum Minibild für Auktionen (eBay, ...)
statt www.webadresse.com eingesetzt
und Link Title durch Ansicht ersetzt
den veränderten Code als Kommentar probeweise in einen früheren Eintrag eingestellt
dort erschien das Wort Ansicht unterstrichen, das beim Anklicken das Foto öffnete
s.
Beweis
Freundlichen Gruß

BloggerLatein 15. Februar 2012 um 12:26

Guten Morgen

Ja, so kann man ein Bild verlinken. Sorry, ich habe es falsch verstanden. Ich dachte sie wollten ein Bild oder Foto im Kommentar posten - es dort darstellen.

Aber so ist es ja noch besser, Sie selbst haben eine Lösung gefunden und dann macht doch alles gleich viel mehr Spaß.

Viele Grüße

manacur 15. Februar 2012 um 15:48

Richtig verstanden, wollte ich schon. Zumindest diese Lösung ist schon passabel.
Aber vielleicht wird es später möglich sein. Geduld!
Freundlichen Gruß

Anonym 19. Februar 2012 um 12:14

Vielen Dank! Super Blog!

Ein herzliches Dankeschön an diesen Blogger!

Grüße aus dem tief verschneiten Allgäu!

Mario

BloggerLatein 19. Februar 2012 um 12:53

Herzlichen Dank Mario und viele Grüße aus dem verregneten Wien.

Kommentar veröffentlichen