Amazon Preisalarm

Cuxxies Widgets sind einfach

Du benötigst keine Programmierkenntnisse, um unsere Widgets in deine Homepage zu integrieren! Wir haben für dich auch ein Youtube-Video eingerichtet, welches dir die wesentlichen Schritte für das Einbinden der Widgets in deine Internetseiten zeigt.

Einfache Integration in deine Homepage

Um die Widgets in deine Homepage einzubauen, benötigst du keine Programmierkenntnisse. Du benötigst lediglich einen einfachen Texteditor (z. B. Notepad, TextEdit oder Vim), um 3 Codeschnipsel in den Quellcode deiner Internetseite einzufügen. Die 3 Codeschnipsel findest du in deiner Verwaltung beim jeweiligen Widget. Du erkennst sie an folgendem Symbol:

Youtube-Video zum Einbinden der 3 Codeschnipsel

In folgendem Youtube-Video haben wir für dich nochmal alle wichtigen Schritte zum Einbinden der Codeschnipsel zusammengefasst:

Cuxxies Widgets - Einbinden der 3 Codeschnipsel
Mit Klick auf "Video laden" akzeptierst du die Datenschutzerklärung und Nutzungsbedingungen von YouTube. Mehr erfahren.

Nur 3 Codeschnipsel

Wo du die Codeschnispel in den Quellcode deiner Homepage einfügst, kannst du in der Anleitung weiter unten auf dieser Seite nachlesen.

Codeschnipsel 1: Widget (erforderlich)

Codeschnipsel 1 enthält das eigentliche Widget. Füge den Codeschnipsel an die gewünschte Stelle in den Quellcode deiner Internetseite ein. Du kannst so viele Widgets einbinden wie du möchtest.

Codeschnipsel 2: Aussehen des Widgets (optional)

Codeschnipsel 2 enthält CSS-Angaben, die das Aussehen der Widgets auf deiner Internetseite bestimmen. Diesen Codeschnipsel benötigst du nur einmal je Inhaltsseite, egal wie viele Widgets du auf einer Inhaltsseite anzeigen möchtest.

Idealerweise fügst du den Codeschnipsel zwischen dem öffnenen <head> und dem schließenden </head> ein.

Du kannst die im Codeschnipsel enthaltenen CSS-Angaben durch eigene CSS-Angaben überschreiben oder den Codeschnipsel auch weglassen, wenn du das Aussehen auf deiner Internetseite selbst festlegen möchten.

Bitte beachte: mit dem Codeschnipsel legst du das „äußere“ Aussehen der Widgets fest. Mit den Designs kannst du das „innere“ Aussehen der einzelnen Widgets bestimmen.

Codeschnipsel 3: Verhalten (optional)

Codeschnipsel 3 enthält Javascript-Code, der die Höhe der Widgets automatisch an deine Internetseite anpasst, damit die Widgets auf möglichst vielen Ausgabegeräten (Computer, Tablet, Smartphone, etc.) optimal angezeigt wird. Diesen Codeschnipsel benötigst du ebefalls nur einmal je Inhaltsseite, egal wie viele Widgets du auf der Inhaltsseite anzeigen möchtest.

Bitte füge den Codeschnipsel idealerweise kurz vor dem schließenden </body> ein.

Du kannst den Codeschnipsel auch weglassen und das Verhalten der Widgets auf deiner Homepage selbst festlegen.

Anleitung zum Einfügen der Codeschnipsel

Wie du an den Quellcode deiner Dateien gelangst, ist von Provider zu Provider unterschiedlich. In der Regel kannst du mit einem kostenlosen FTP-Programm (z. B. FileZilla) deine Dateien vom Server deines Providers auf deinen Computer herunterladen und auch wieder auf den Server hochladen. Bei anderen Anbietern kannst du den Quellcode auch direkt in der Weboberfläche ändern. Bitte informiere dich bei deinem Anbieter über deine Möglichkeiten.

  1. Falls nötig, lade die Datei mit einem FTP-Programm auf deinen Computer herunter und erstelle eine Sicherheitskopie.
  2. Öffne mit einem Texteditor deiner Wahl (z. B. Notepad, TextEdit oder Vim) die Datei deines Internetauftritts, z. B. startseite.html.
  3. Wechsel in deine Verwaltung, kopiere den einzufügenden Codeschnipsel, wechsel wieder zurück zu deinem Texteditor und füge den kopierten Codeschnipsel an die entsprechende Stelle in den Quellcode der Datei ein (siehe folgendes Beispiel).
  4. Speichere die Datei ab, sobald du alle Codeschnipsel eingefügt hast.
  5. Falls nötig, lade die Datei anschließend wieder mit einem FTP-Programm auf den Server.
  6. Das war's schon!

Beispiel: startseite.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meine Startseite</title>

    <Codeschnipsel 2 für alle Widgets>
    
    <link rel="stylesheet" href="meine-eigenen-css-angaben.css" />
  </head>
  <body>
    <h1>Hallo Welt!</h1>

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

    <Codeschnipsel 1 für Widget 1>

    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <Codeschnipsel 1 für Widget 2>

    <p>Sed diam nonumy eirmod tempor invidunt justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <script src="mein-eigenes-javascript.js"></script>

    <Codeschnipsel 3 für alle Widgets>

  </body>
</html>

Benötigst du weitere Hilfe?

Manchmal hilft auch die beste Anleitung nicht und man benötigt noch weitere Hilfe.

Schreib uns eine Nachricht!

Du möchtest mitmachen?

Prima, das freut uns. Klicke einfach auf die folgende Schaltfläche und registriere dich kostenlos mit deiner Mail-Adresse.

Jetzt mitmachen!

Du bist bereits registriert?

Um zum Anmeldebereich deiner Verwaltung zu gelangen, klicke einfach auf die folgende Schaltfläche und melde dich an.

Zum Login
AGB | Datenschutz | Impressum