Online Radio im Forum einbauen als Plugin

24.01.2016 13:21

Die Idee und die Entwicklung ist von Wolfgang. In Seinen Forum hat er den Kompletten Code zur Verfügung gestellt.
Der Code von Wolfgang blendet ein Online - Radio im Forum ein.

Wie geht man nun vor?

Hier eine Weitere Schritt für Schritt Anleitung bis zum fertigen Plugin.

Wir gehen als erstes in das Admin Menu auf Plugin/Olugin Entwicklung.

Dort erstellen wir ein Plugin mit folgenden Optionen

Geht dann auf "Plugin erstellen" und ihr kommt in die Plugin Entwicklung.

Hier können wir nun erst mal einige Variablen erstellen die uns nachher erlauben das PI frei im Forum zu Positionieren.
Dazu gehen wir etwas nach unter und Klicken auf "Neue Konfig Variable" es öffnet sich ein Fenster:

Hier erstellen wir nun insgesamt 4 Variablen.

Hier nun die erste:

Geht auf Speichern. Nun erstellen wir die 2. Variable

Bitte wieder Speichern.
So nun geht es an die 3. Variable

Speichern nicht vergessen. Nun geht es an die 4. Variable und somit die letzte für das Online Radio.

Nun haben wir unten in der Plugin Entwicklung unsere 4 Variablen mit den Standard Werten.

Als nächstes müssen wir ein Element erstellen vom Typ Obere Leiste/Footer. Viele kennen den Vorgang bereits. Hier aber dennoch für alle die es noch nicht kennen die genaue Anleitung.

Klickt nun auf "Neues Element erstellen"

Danach auf "Templates Element"

Es öffnet sich wieder eine Maske die wir befüllen müssen:

Speichert dann bitte.

Nun müssen wir den Code den Wolfgang auf seiner Seite zur Verfügung stellt in das Element Kopieren.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Das Online Radio-Menü</title>




<script language="javascript" type="text/javascript">
function spoil1(id) {
$('#' + id).toggle(500);
}
</script>

<style type="text/css">
/*Webradio*/
.webradio_header {float:right;padding-right:50px;}
.webradio_header_link {cursor:pointer;padding-left:20px;color:#3366FF}
#webradio1 {display:none;position:absolute;right:50px;margin-top:150px;background-color:#eeeeee;border:4px double #001153;border-radius:15px;white-space:nowrap;box-shadow: -2px 4px 6px #ffffff;z-index:700;}
.webradio11 {margin-bottom:-4px;}
#webradio2,#webradio3,#webradio4,#webradio8 {display:none;border-top:4px double #001153;font-size:18px;white-space:nowrap;padding:5px 0 5px 15px;}
.webradio5 {cursor:pointer;color:#000000;padding: 0 5px 0 5px;}
.webradio5:hover {color:#0763B8;text-decoration:underline;background-color:#ffffff;box-shadow:2px 2px 10px 5px #aaaaaa;}
.webradio6 {cursor:pointer;padding:10px;height:50px;border-right:4px double #001153;}
.webradio7 {cursor:pointer;padding:10px;height:50px;}
#radioimage {position:absolute; top:7%; right:4%; cursor:pointer;padding:0 40px 0 20px;width:100px;border:none; z-index:9000000;}
</style>

</head>
<body>

<div class="webradio_header" onClick="spoil1('webradio1')">

<img id="radioimage" title="Online Radio - Ein Klick öffnet die Auswahl!" src="https://files.homepagemodules.de/b551758/a_411_635aa631.png" border="0">
<div class="webradio_header_link" title="Online Radio - Ein Klick öffnet die Auswahl!" onMouseOver="this.style.textDecoration='underline';" onMouseOut="this.style.textDecoration='none';"></div></div>

<div id="webradio1">

<div class="webradio11">
<img class="webradio6" onClick="spoil1('webradio2')" title="FFH-Webradio" src="http://www.bilder-hochladen.net/files/kr03-30-65b9.png">
<img class="webradio6" onClick="spoil1('webradio3')" title="N-Joy Extra" src="http://www.bilder-hochladen.net/files/kr03-31-f093.png">
<img class="webradio6" onClick="spoil1('webradio4')" title="Radio SAW" src="http://www.bilder-hochladen.net/files/kr03-32-a97d.gif">
<img class="webradio7" onClick="spoil1('webradio8')" title="Radio.de" src="http://www.bilder-hochladen.net/files/kr03-36-698d.png">
</div>

<div id="webradio2">
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de', '_blank', ''); return false;">FFH Hitradio</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - Rock</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - Lounge</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - Jazz</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - Dolce Vita</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - Electro Beats</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - iTunes Top40</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - 90er</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - 80er</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - Schlager Kult</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...quality/hq.html', '_blank', ''); return false;">FFH Digital - Deutsch Pur</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.ffh.de/index/wController...uality/hq.html/', '_blank', ''); return false;">FFH Digital - Euro Dance</span>
</div>

<div id="webradio3">
<span class="webradio5" onClick="window.open(this.href='http://www.n-joy.de/epg/stationnjoy100-radioplayer.html', '_blank', ''); return false;">N-JOY Livestream</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://www.n-joy.de/epg/stationnjoy100-r...ocharts101.html', '_blank', ''); return false;">N-JOY Top 100</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://www.n-joy.de/epg/stationnjoy100-r...bstrait103.html', '_blank', ''); return false;">N-JOY Abstrait</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://www.n-joy.de/epg/stationnjoy100-r...nthemix105.html', '_blank', ''); return false;">N-JOY In The Mix</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://www.n-joy.de/epg/stationnjoy100-r...ingshow209.html', '_blank', ''); return false;">N-JOY Morningshow</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://www.n-joy.de/epg/stationnjoy100-r...ingshow209.html', '_blank', ''); return false;">N-JOY Hip-Hop</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://www.n-joy.de/epg/stationnjoy100-r...avormix101.html', '_blank', ''); return false;">N-JOY Friday Flavor Mix</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://www.n-joy.de/epg/stationnjoy100-r...diorock103.html', '_blank', ''); return false;">N-JOY Soundfiles Alternative</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://www.n-joy.de/epg/stationnjoy100-r...adiopop101.html', '_blank', ''); return false;">N-JOY Pop</span>
</div>

<div id="webradio4">
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/radiosaw', '_blank', ''); return false;">Radio SAW</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/rockland', '_blank', ''); return false;">Radio SAW - Rockland</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/neuheiten', '_blank', ''); return false;">Radio SAW - Neuheiten</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/2000er', '_blank', ''); return false;">Radio SAW - 2000er</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/90er', '_blank', ''); return false;">Radio SAW - 90er</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/80er', '_blank', ''); return false;">Radio SAW - 80er</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/70er', '_blank', ''); return false;">Radio SAW - 70er</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/rock', '_blank', ''); return false;">Radio SAW - Rock</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/deutsch', '_blank', ''); return false;">Radio SAW - Deutsch</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://webradio.saw-musikwelt.de/party', '_blank', ''); return false;">Radio SAW - Party</span>
</div>

<div id="webradio8">
<span class="webradio5" onClick="window.open(this.href='http://www.radio.de/sender', '_blank', ''); return false;">Radio.de - Sendeliste</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://leinehertz.radio.de', '_blank', ''); return false;">Radio.de - Leinehertz</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://hannover876.radio.de', '_blank', ''); return false;">Radio.de - RADIO HANNOVER</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://ndr2.radio.de', '_blank', ''); return false;">Radio.de - NDR 2</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://top100station.radio.de', '_blank', ''); return false;">Radio.de - Top 100 Station</span>
<br>
<span class="webradio5" onClick="window.open(this.href='http://deutschlandfunk.radio.de', '_blank', ''); return false;">Radio.de - Deutschlandfunk</span>
</div>

</div>

</body>
</html>

Speichert den code dort rein

Speichert nun ab.

Als nächstes müssen wir die 4 Variablen einfügen.

Als erstes die Rechte. Geht dazu bitte in das Element auf die erste Position vor dem Code und fügt durch klicken auf den Config Variablen / Rechte ie Var an die erste Position ein

Nach dem Klick muss es so aussehen:

Klickt nun speichern.
Jetzt müsst ihr die Var noch ein wenig abändern und zwar von so

1
 
{{plugin_onlineradiopi_config_rechte}}

nach so

1
 
{{plugin_onlineradiopi_config_rechte==true.start}}

Das selbe machen wir dann am ende noch einmal. Aber hier ändern wie folgt ab:
Von

1
 
 {{plugin_onlineradiopi_config_rechte}}

auf

1
 
 {{plugin_onlineradiopi_config_rechte==true.end}}

Bitte speichern.

Nun geht es darum die anderen 3 Variablen einzubauen die im Oberen Bereich eingefügt werden.

Zum einen muss in der Zeile hier die Auslöse Varibale mit der Grafik rein

1
2
 
<img  id="radioimage" title="Online Radio - Ein Klick öffnet die Auswahl!" src="https://files.homepagemodules.de/b551758/a_411_635aa631.png" border="0">

Fügt die Variable wieder auf bekannter weise in das Element ein dazu ändern wir die Zeile von so

1
 
<img  id="radioimage" title="Online Radio - Ein Klick öffnet die Auswahl!" src="https://files.homepagemodules.de/b551758/a_411_635aa631.png" border="0">

nach so ab durch einfügen der var

1
2
 
<img  id="radioimage" title="Online Radio - Ein Klick öffnet die Auswahl!" src="{{plugin_onlineradiopi_config_ausloesen}}" border="0">

Speichern nicht vergessen.

Nun fügen wir noch die Positionsangaben ein

Dazu ändern wir diese zeile

1
2
 
#radioimage {position:absolute; top:7%; right:4%; cursor:pointer;padding:0 40px 0 20px;width:100px;border:none; z-index:9000000;}

Durch einfügen der Variablen wie folgt ab:

1
2
 
#radioimage {position:absolute; top:{{plugin_onlineradiopi_config_positop}}%; right:{{plugin_onlineradiopi_config_posihorizontal}}%; cursor:pointer;padding:0 40px 0 20px;width:100px;border:none; z-index:9000000;}

Speichern nicht vergessen. Nun habt ihr das PI Fertig und könnt die Rechte vergeben, Die Auslösegrafik ändern und die Position bestimmen sodass es zu eurem Forum Passt.