Tutorial Auswahlbox für Bannercode

Ihr wollt auf Eurer Webseite den Besuchern ein Banner zum verlinken Eurer Webseite zu Verfügung stellen, so bietet sich folgende Lösung dafür an.

 

Die Anleitung:

 

Zum Anfang lädt man das gewünschte Banner per Bildmodul auf die Seite. Dann sollte man dem Banner noch einen Untertitel im entsprechenden Feld (z.B. Banner 1 und speichert ab. Jetzt klicke auf den Linkbutton des Moduls. Dort gib die Url deiner Webseite, zu der dass Banner verlinken soll, bei Externer Link oder Email ein. Dann bestätige mit Klick auf den Button Link setzen, danach im Fenster (unten) auf aktualisieren.

 

Nun folgt der etwas schwierigere Schritt. Wechsle in den Ansichtmodus deiner Seite. Nun musst du dir den Quelltext der Seite anzeigen lassen. Je nach Browser ein anderer, ähnlicher Weg. Per rechter Maustaste im Kontextmenue, Seitenquelltext /Quelltext anzeigen auswählen. Meist auch im Browser über den Menuepunkt Ansicht auswähl- abrufbar. Wenn jetzt der Quelltext angezeigt wird, geht man der Einfachheit halber hin und klickt im Fenster auf den Button Bearbeiten und wählt dort Suchen aus. Im Suchfeld gibt man den Namen des Bildes (Untertitel) ein. Das gefundene Wort wird im Quelltext markiert. Man befindet sich jetzt an unmittelbarer Stelle des erforderlichen Html Tags.

 

Dieser sieht dann in etwa wie folgt aus:

 

<a href="http://pimp-your.jimdo.com/" target="_blank">        <img id="cc-m-imagesubtitle-image-4285094859" src="http://u.jimdo.com/www27/o/s890387f99246ef15/img/ie74d5256c1a9dfcc/1288198854/std/pimp-your-jimdo-page.jpg" alt="Pimp your Jimdo Page" width="400" height="105"/>

 

Den rot markierten Teil kann man entfernen, so dass der Html Tag danach so aussieht.

 

Tipp:

Den kopierten Html Tag, zu Bearbeitung in den Windows Editor o.ä. einfügen. Von dort kann man ihn dann später zum Einfügen in den Code der Auswahlbox kopieren.

 

<a href="http://pimp-your.jimdo.com/" target="_blank"> <img src="http://u.jimdo.com/www27/o/s890387f99246ef15/img/ie74d5256c1a9dfcc/1288198854/std/pimp-your-jimdo-page.jpg" alt="Pimp your Jimdo Page" width="400" height="105"/>

 

Den jetzt fertigen Html Tag fügt man jetzt an der rot markierten Stelle des unten stehenden Codes (Textarea) ein.

 

  <form>
<textarea name="yourForm" rows=3 cols=40 wrap=virtual>
URL des verlinkten Banners
</textarea>
<br>
<br>
<input type=button value="alles auswählen" onClick="javascript:this.form.yourForm.focus();this.form.yourForm.select();">
</form>

 

Im folgenden Schritt legt man auf der Seite, direkt unter dem Banner (ist am sinnvollsten, damit der User auch weiß, welchen Bannercode, bei mehreren, er kopiert.) ein Textmodul  (WichtigDieser Code muss ins Html Fenster eines Textmoduls eingefügt werden) an. Dort klickt man auf den Html Button und fügt den gesamten Code im Html Fenster ein, klickt auf aktualisieren und danach auf speichern.

 

 

Der fertige Code würde dann so aussehen:

 

<form>
<textarea name="yourForm" rows=3 cols=40 wrap=virtual>
<a href="http://pimp-your.jimdo.com/" target="_blank">        <img src="http://u.jimdo.com/www27/o/s890387f99246ef15/img/ie74d5256c1a9dfcc/1288198854/std/pimp-your-jimdo-page.jpg" alt="Pimp your Jimdo Page" width="400" height="105"/>
</textarea>
<br>
<br>
<input type=button value="alles auswählen" onClick="javascript:this.form.yourForm.focus();this.form.yourForm.select();">
</form>

 

 

Wie das später aussieht, sehr ihr direkt hier drunter. Der Besucher/User kopiert den in der Box befindlichen Code und fügt ihn im Html Bereich seiner Seite ein, oder bei Jimdo Pages, ganz schnell und einfach in ein Widget/Html Modul.

 

Ganz unten dann die fertige Auswahlbox mit enthaltenem Bannercode.

 

Noch ein Tipp zum Schluß:

 

Wenn ihr dem Bannercode, vor dem Einfügen in den Code der Auswahlbox, noch diese Beiden Html Tags beifügt, so wird das Banner beim User auf der Seite zentriert.

 

<center> vor den Html Tag des Banners und </center> am Ende des Banner Tags.