Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Mittwoch, 30. März 2016

Shoutbox am Webseiten Rand

lulu
Immer wieder kommt die Frage auf, wie man seine Shoutbox am Webseiten Rand (links oder rechts) anzeigen lassen kann. Mit diesem kleinen Tutorial wird das hoffentlich etwas klarer.

Doch fangen wir (wie immer ;)) von vorne an.


Was ist eine Shoutbox?

Eine Shoutbox (SB), ein Tagboard oder eine elektronische Pinnwand ist ein kleiner Bereich auf (meist privaten) Webangeboten, der als eine Art Mini-Gästebuch fungiert und somit die Lücke zwischen Gästebuch/Forum und einem echten Chat schließt. wikipedia.org
Eine Shoutbox ist vergleichbar mit einem kleinen Chat. Man kann in dieser Box ohne sich anmelden zu müssen Nachrichten hinterlassen. Eine Shoutbox bietet sich bei kleineren Nachrichten an, da sie meistens eine Zeichen Begrenzung hat und dadurch bei großen Nachrichten schnell unübersichtlich wird. Eine Shoutbox kann zum Beispiel kostenlos auf cbox erstellt werden.


Shoutbox am Websiten Rand einblenden

Einige Webseiten zeigen ihre Shoutbox inzwischen am linken oder rechten Seiten Rand an. Fährt man mit der Maus darüber, "slidet" die Shoutbox auf und der Besucher kann hineinschreiben.
Hier ein kleines Beispiel: Beispiel anzeigen.

Ich verwende dazu immer das Script von DynamicDrive.com.
  1. Lade Shoutbox am Rand.zip herunter und entpacke die Datei.
    Die mmenu.js muss uns eigentlich gar nicht groß interessieren. Die Einstellungen der Shoutbox, die für uns Interessant sind und die wir bearbeiten müssen stehen in der menuItems.js. Öffne deshalb diese Datei mit einem Editor wie zum Beispiel Notepad++ (Windows Editor reicht aber auch).
  2. Öffne nun deinen Shoutbox Code ebenfalls in einem Editor (Editor öffnen: "Datei neu" auswählen und dort den Shoutbox Code einfügen).
  3. Ganz wichtig: Alle Anführungszeichen (") und Zeilenumbrüche müssen Ersetzt bzw. Entfernt werden. Der ganze Shoutbox Code muss in einer Zeile stehen. Die Anführungszeichen (") könnt ihr mit einem Hochzeichen (') ersetzen.
  4. Kopiere diese eine Zeile jetzt und wechsele in die bereits geöffnete menuItems.js. Dort steht ziemlich weit unten "HIER KOMMT DEIN SHOUTBOX CODE OHNE ZEIELNUMBRUCH REIN!" Den Text zwischen diesen Anführungszeichen kannst du löschen. Füge hier deinen Shoutbox Code, denn du eben kopiert hast (mit ersetzten Anführungszeichen  und ohne Zeilenumbruch! (Schritt 3)) ein.
  5. Lade die beiden Javascript Dateien auf deinem Server hoch.
  6. Öffne die Textseite, in der der <head> Bereich deines Designs steht (meistens die index.html oder header.php). Füge dort direkt über </head> folgenden Code ein:
  7. <script src="mmenu.js" type="text/javascript"></script>
    <script src="menuItems.js" type="text/javascript">
    /***********************************************
    * Omni Slide Menu script - (c) John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
    * very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
    * Please keep this notice intact
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
    ***********************************************/
    </script> 
    Dieser Code ruft und läd die beiden Javascript Dateien. 
Tadaaa, fertig. In der menuItems.js können übrigens noch weitere Einstellungen vorgenommen werden. Zum Beispiel kann mit menupos:'left ' die Shoutbox auch am linken Webseiten Rand angezeigt werden. Bei bartext:'.Shoutbox.' kannst du den Text angeben, der auf diesem Slider angezeigt werden soll. Statt einem Text kann hier auch ein Bild angegeben werden. Einfach den Bildpfad statt einem Text einfügen ;)

Das komplette Beispiel gibt es auch hier zum Downloaden.

Bei Fragen oder Problemen könnt ihr mir gerne jederzeit eine EMail schicken oder einen Kommentar hinterlassen.


EDIT 30.3.16. 13:00 Uhr: Ich werde demnächst noch ein Tutorial erstellen, in dem ich weiteren Methoden (auch ohne Javascript) für das Einbinden von Slide Shoutboxen erkläre.

6 Kommentare:

  1. Danke für das Tutorial :)
    Leider klappt das Ganze mobil nicht so toll (bzw. schwebt die Box dann durch die Gegend, wenn man den Code nicht für mobile Geräte ändert), daher hab ich mich gegen so eine tolle Slide-Shouti entschieden :(

    //Misfits ist eine zugegebenermaßen ziemlich dämliche Serie, die mir aber viel Freude bereitet hat :D Ja, nächstes Ostern wird dann hoffentlich besser! Heute geht es noch in einen japanischen Supermarkt, das wird wahrscheinlich mein Highlight der Woche. Und keine Sorge, ich war ja bis vor ein paar Tagen auch ziemlich passiv unterwegs xD

    AntwortenLöschen
    Antworten
    1. Bitte bitte <3 <3
      Ah ich muss zugeben, an mobile Geräte habe ich Shoutbox mäßig noch überhaupt nicht gedacht ^^" Das könnte wirklich ein Problem sein. Ich muss das mal noch testen - vll bringe ich dann bald noch ein Shoutbox Tutorial online ;)

      Ich war eben auf Misfits aber ganz verstehe ich es nid xD Ein Japanischer Supermarkt *_____* Ich finde es immer so schade, dass es bei uns so was nicht gibt T___T

      Löschen
    2. Bitte bitte <3 <3
      Ah ich muss zugeben, an mobile Geräte habe ich Shoutbox mäßig noch überhaupt nicht gedacht ^^" Das könnte wirklich ein Problem sein. Ich muss das mal noch testen - vll bringe ich dann bald noch ein Shoutbox Tutorial online ;)

      Ich war eben auf Misfits aber ganz verstehe ich es nid xD Ein Japanischer Supermarkt *_____* Ich finde es immer so schade, dass es bei uns so was nicht gibt T___T

      Löschen
  2. Tolles Tutorial! -^__^-
    Also bei mir bleibt die Shouti in der mobilen Ansicht am Rand kleben. XD Ich denke das hat oft was mit dem Browser/Smartphone zu tun. Keine Ahnung. Es wird immer kleine/große Unterschiede geben. Es ist ein Ding der Unmöglichkeit so zu coden, dass es bei jedem so aussieht wie bei einem selbst. ^.^"

    AntwortenLöschen
    Antworten
    1. Daaaaaaaaaaaaaaaaaaaaanke :* Das kann gut sein, dass es mit den Browsern zu tun hat. Ich hab das bei mir noch gar nie getestet ^^" Muss ich wirklich mal machen.
      Das stimmt, je nach Browser und Monitorgröße sieht es eh immer anders aus :/ Gar nicht so einfach^^

      Löschen
    2. Daaaaaaaaaaaaaaaaaaaaanke :* Das kann gut sein, dass es mit den Browsern zu tun hat. Ich hab das bei mir noch gar nie getestet ^^" Muss ich wirklich mal machen.
      Das stimmt, je nach Browser und Monitorgröße sieht es eh immer anders aus :/ Gar nicht so einfach^^

      Löschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates