Tipps & Tutorials, tutorial

Designen des Übersetzungsgadgets

Hey ihr lieben.

Ich bin die Theresa von Fotografie ist Leben.
Ich möchte euch heute zeigen, wie ihr ein Übersetzungsgadget einbinden und designen könnt.

Das geht mit zwei Varianten. Eine sehr leichte, und eine, bei der ihr etwas mehr Zeit braucht, aber mit der richtigen Erklärung ist auch das nicht schwer. Ich fang mal mit der unaufwändigen Variante an.
Am Ende könnte euer Gadget so aussehen:

Variante 1:

Geht zuerst auf Blogger ins Dashboard. Jetzt geht ihr auf ‘Layout’. Ihr glaubt es kaum, geht in die Sidebar, oder wo auch immer ihr das Gadget haben wollt. Footer ginge beispielsweise auch. Klickt nun auf ‘Gadget hinzufügen’ und scrollt runter, bis ihr das hier findet (sollte nicht allzu lange dauern).

Klickt es an und dann kommt ihr zu dieser kleinen Auswahl.

Also nun erklär ich euch kurz, was ihr hier verändern könnt. Oben bei ‘Titel’ könnt ihr eingeben, was ihr wollt. zB. Übersetze meinen Blog oder Other Language. Das bleibt euch Alleine überlassen. Bei Stil könnt ihr aussuchen, wie es aussehen soll. Ich muss nicht viel erklären. Wenn ihr eins anklickt, bekommt ihr es bei Vorschau angezeigt. Wenn ihr alles eingestellt habt, klickt ihr auf Speichern und könnt es bewundern. 🙂

Tipp: Bei dieser Variante wird euer Blog in alle Sprachen übersetzt. Wenn ich das nicht wollt, müsst ihr euch an Variante 2 wenden.

Variante 2:

Auch hier braucht ihr keinerlei HTML-Wissen. Ich hab auch keins. 😉 Bei dieser Variante könnt ihr das gleiche bewirken, wie bei der oberen – wenn ihr wollt. Aber ihr könnt es auch anders designen. Das könnt ihr dann immernoch entscheiden. Aber wie ihr es anders hinbekommt, erklär ich euch jetzt.

Ihr müsst eigentlich nur zum Google Übersetzter kommen, da dieses Gadget ‘powered by google’ ist. Zum Übersetzer kommt ihr, indem ihr auf www.google.de geht und dann oben in der schwarzen Leiste auf Mehr und dann auf Übersetzer klickt.

Wenn ihr das geschafft habt, kommt ihr hierhin. Das ist die normale Übersetzer-Seite, in der ihr auch normale Wörter oder Texte übersetzen (lassen) könnt. klickt einfach unten auf Website-Übersetzer, denn ihr wollt ja nicht eure Posts doppelt schreiben 😀 

Nun kommen wir ans Eingemachte.

Schritt 1:

Ich denke ihr wollt alle euren gesamten Blog übersetzen. Aber hier könnt ihr wählen, ob ihr nur Teile des Blogs oder den gesamten Blog übersetzen wollt. Wobei ich nicht verstehe, was es bringt, nur einen Teil zum übersetzen freizugeben. 😉

Nun scrollt etwas runter. 🙂

Schritt 2: 

Ich habe schon ein paar Blogs gesehen, die auf Englisch geschrieben sind. Hier wählt ihr einfach die Sprache aus, in der euer Blog geschrieben ist!! Nicht verwechseln mit der Sprache(n) in die er übersetzt werden muss.

Google (bzw. das Gadget am Ende) muss das nur wissen, um auch eine Übersetzung hinzubekommen. Denn sogut wie jeder schreibt ab und zu mal ein englisches Wort in seinen deutschen Post und dann wäre es blöd, wenn Google dann die Englischen Wörter übersetzt.

Wieder ein bisschen hinunterscrollen 🙂

Schritt 3.1:

Hier könnt ihr einstellen, in welche Sprachen euer Blog übersetzt werden soll. Es ist – wie ich finde – sehr unübersichtlich, wenn ihr Alle Sprachen anklickt. Als erstes klickt ihr dort oben auf Optionale Einstellungen einblenden. Das habe ich schon gemacht. Bei mir steht da jetzt “Optionale Einstellungen ausblenden”. Man brauch das nicht unbedingt, es sind eher Kleingkeiten über das Design und die Vielfalt des Gadgets. Nun könnt ihr auswählen, ob ihr euren Blog in alle 53 Sprachen (die angeboten werden) übersetzen lassen wollt. Weil es so durcheinander wird, habe ich mich für Englisch, Französisch, Italienisch, Chinesisch und Türkisch entschieden. aber das bleibt euch natürlich selbst überlassen 🙂 Klickt einfach die Sprachen, die ihr wollt an. Wenn ihr alle Sprachen auswählen wollt klickt ihr entweder auf Alle Auswählen oder etwas weiter oben auf Alle Sprachen. 

Und jetzt gehts wieder etwas runter! 😀

Schritt 3.2:

Als nächstes entscheidet ihr, wie das Gadget am Ende aussehen soll. 

Eingebettet: So ist es auch, wie es aussieht, wenn ihr Variante 1 anwendet. Ihr bekommt auch eine Vorschau, deshalb erkläre ich euch das nicht.

Gefällt euch das nicht, dann könnt ihr anstatt Eingebettet“Im Tap-Format” aussuchen.

Das kleine Gadget bleibt immer auf dem Bildschrim fixiert an einer Ecke, die ihr wählen könnt. Man kann wählen, an welcher Stelle das Gadget sein soll. Ihr könnt euch das vorstellen, wenn ihr auf meinen Blog geht. Es sieht etwa so aus, wie die ‘Social Media Buttons’ oder ‘upstairs’. Auf jeden Fall bleibt es dann fixiert an irgendeiner Ecke. Mit Oben Rechts oder Unten Links könnt ihr die Position auswählen.

Um es vollständig zu machen, könnt ihr auch noch Automatisch auswählen. Das Übersetzungsbanner wird automatisch eingeblendet, wenn die Standard-Browsersprache des Besuchers von der Sprache Ihrer Seite abweicht. Es wird kein Dropdown-Menü angezeigt. Das bedeutet für euch, dass jemand, der zum Beispiel aus Polen kommt und auf eure Seite stößt einen Banner angezeigt bekommt, wo er auswählen kann, ob er euren Blog übersetzt haben will. Das ist vielleicht auch ganz sinnvoll, denn andersprachige Leute stoßen vielleicht auf euren Blog und sehen, dass er in einer anderen Sprache ist und dann denken sie sich, oh nö, das versteh ich eh nicht und haben das Gadget vielleicht noch gar nicht entdeckt.

Jetzt bitte ein bisschen runterscrollen..

Schritt 3.3:

Als nächstes seht ihr das da. Ich verstelle daran nichts. Für alle “Alltags”-Blogger macht dies auch – wie ich finde – keinen Sinn, denn man schreibt eigentlich nur auf einer Sprache, und wenn man mal ein Englisches Wort benutzt, macht das nichts. Aber das ist auch Geschmackssache. 

Punkt 1: Macht Sinn, wie ich eins weiter oben schon anhand des Polen erklärt habe 😉

Punkt 2: Wie schon erwähnt, macht es nichts, wenn ihr ein paar Wörter auf einer anderen Sprache schreibt, ihr werdet auch so verstanden. Wenn ihr aber ganz viele verschieden Sprachen benutzt und das auch sehr häufig und oft, solltet ihr hier ein Häkchen setzen.

Punkt 3: Wer sich mit Google Analytics auskennt (bzw. Ein Konto hat) und interessiert, wie das Übersetzen genutzt wird, macht es sicherlich Sinn. Ihr könnt nachlesen, in welche Sprache übersetzt wird etc.

Schritt 4:

Der einfachste Schritt. Wenn ihr alles so ausgewählt habt, wie ihr es gerne hättet, dann könnt ihr nun diesen Textabschnitte (eher gesagt HTML-Code) im Bild kopieren. Es verändert sich natürlich je nach Einstellung. Ihr dürft nicht meinen Code hier kopieren. Also ihr könnt schon, dann ist die Einstellung so, wie ich sie ausgewählt habe. Aber 1. Wäre es total umständlich das alles abzutippen und 2. Könnte es sein, dass ihr andere Einstellungen gewählt habt.

Oben rechts seht ihr noch ein Add to Blogger Symbol. Wer bei Google eingeloggt ist, kann auch darauf zurückgreifen. Ihr klickt einfach drauf und wählt (bei mehreren Blogs) euren Blog, der es sein soll aus. Danach könnt ihr das Gadget noch im Layout an die richtige Stelle rücken. Wenn ihr Add to Blogger geklickt habt, seid ihr jetzt fertig. Ihr könnt es noch verschieben.

Zum Schluss geht ihr wieder auf Blogger ins Layout. Noch ein Gadget HTML/JavaScript hinzufügen und dann den HTML-Code aus Schritt 4 einfügen.

Alles speichern und schon könnt ihr das Ergebnis sehen.

Ich hoffe, da Tutorial hat euch geholfen und ihr habt alles verstanden! 🙂

Wenn ihr noch mehr Tutorials von mir wollt, dann besucht mich doch auf meinem Blog. 🙂

8 Comments

  1. Anonym

    25. May 2012 at 7:34

    Danke!!!
    ♥Doris

  2. Anonym

    25. May 2012 at 16:59

    Tolles Tutorial (:
    Kann man das auch zentrieren?

    1. Theresa

      26. May 2012 at 6:23

      So weit ich weiß leider nicht. Da müsstest du Mira fragen, die kann an dem Code bestimmt was rumbasteln. 🙂

    2. Anonym

      26. May 2012 at 10:47

      Ich glaub man muss einfach < center >' davor und '< /center >' dahinter setzten? (Ohne Leerzeichen)

    3. Anonym

      26. May 2012 at 15:50

      Nein, das geht nicht. Da erscheint ein Fehler.

      Naja, Mira antwortet auf meine E-Mail nicht, weil ich ihr letztens schon eine geschrieben habe.

    4. Kuno

      26. May 2012 at 17:27

      align center sollte funktionieren ^^

  3. Annie Knitter

    8. September 2012 at 9:22

    Muchas gracias für das tolle tutorial ♥

  4. petozi Design

    31. January 2013 at 18:48

    Danke für die Anleitung!
    Früher hat es auf meinem Blog funktioniert aber seit Neuestem nicht mehr. Auch nicht nach einer Löschung und Neueinbindung klappt das Menü zum Sprachen wählen nicht auf. Hast Du einen Tipp, woran der Fehler liegen könnte?
    Danke und viele Grüße
    Petra

Leave a Reply