Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag07.01.2007 um 08:26 (UTC)    
Titel: Messenger Kontaktboxen für Website :

Die Messenger Kontaktboxen :
Tutorial erneuert am 18.12.11 / bei Fragen www.find-templates.de.tl

Mit Hilfe von 3 DIV Feldern und einigen <p> Elementen habe ich euch Kontaktboxen erstellt.
Man kann sich je eine Box in die rechte Box einfügen, oder alle 3 nebeneinander in den Seiteninhalt.



Schritt 1: Der CSS Code

Einfügen im Feld "Text über Design" :

Zitat:

<style type="text/css">
<!--

.status{
float: left; /* entfernen, wenn nur 1 Box verwendet wird */
width: 120px;
text-align: center;
margin: 10px 10px 10px 10px;
background-color: #FFFFFF;
border: 1px solid #c9c9c9;
border-radius: 5px;
overflow: hidden;
box-shadow: 5px 5px 9px #bbbbbb;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#bbbbbb', Direction=135, Strength=7); }

.status:hover {
background-color: #DFDFDF;
background-image: url(); }

.status img {border: none;}

.status p {
font-size: 11px;
width: 100px;
height: 17px;
margin: 10px 10px 10px 10px;
text-align: center; }

-->
</style>



Damit bekommen die Messenger-Boxen ihr aussehen.

------------------------------------------------------------------------------------------------------



Die Skype-Box einfügen :
Einfügen im Seiteninhalt . Oder in einer rechten Box.

- Im Code findest du 5 mal den Text : HIER_SKYPE_NAME
- füge dort deinen Skype-Namen ein
- speichere Dir diese 3 Bilder :
- lade die 3 Bilder hoch (bei "Bilder verwalten")
- füge dann im Code deine Grafikadressen ein

Zitat:

<div class="status" style="background-image: url(Hintergrundbild ICQ);">
<p>Skype-Status</p>
<p><img src="http://mystatus.skype.com/smallicon/Dein_Skypename" width="16" height="16" alt="Mein Status" /></p>
<p><a href="skype:Dein Skypename?add"><img title="Kontaktliste" src="Grafikadresse 1" alt="Skype-Anruf" /></a></p>
<p><a href="skype:Dein Skypename?userinfo"><img title="Skype-Profil" src="Grafikadresse 2" alt="Skype-Profil" /></a></p>
<p><a href="skype:Dein Skypename?chat"><img title="Text senden" src="Grafikadresse 3" alt="Text schreiben" /></a></p>
</div>



------------------------------------------------------------------------------------------------------

Die ICQ - Kontaktbox einfügen :
Einfügen im Seiteninhalt, oder in einer rechten Box.

- speichere dir diese 3 Buttons :
- alle drei hochladen bei "Bilder verwalten"
- kopiere deine neuen Grafikadressen (die http://img.webme.com/pic/./............png) und füge sie im Code ein
- ersetze alle XXXXXXXXX durch deine ICQ-Nummer


Zitat:

<div class="status" style="background-image: url(Hintergrundgrafik ICQ);">
<p>ICQ-Status</p>
<p><img src="http://wwp.icq.com/scripts/online.dll?icq=XXXXXXXXX&img=5" width="17" height="17" /></p>
<p><a href="http://www.icq.com/whitepages/cmd.php?uin=XXXXXXXXX&action=add"><img title="zur Kontaktliste hinzufügen" alt="adden" src="Grafikadresse ICQ 1" /></a></p>
<p><a href="http://www.icq.com/people/XXXXXXXXX" target="_blank"><img title="ICQ Profil" alt="Profilseite" src="Grafikadresse ICQ 2" /></a></p>
<p><a href="http://www.icq.com/public/panels/respondpanel/links/message.html?XXXXXXXXX"><img title="Nachricht schreiben" alt="Nachricht" src="Grafikadrsse ICQ 3" /></a></p>
</div>


------------------------------------------------------------------------------------------------------


Die MSN Kontaktbox einfügen :
Einfügen im Seiteninhalt, oder in einer rechten Box.

- speichere dir diese 3 Buttons :
- alle drei hochladen bei "Bilder verwalten"
- kopiere deine neuen Grafikadressen (die http://img.webme.com/pic/./............png) und füge sie im Code ein

Bevor Ihr den Code einfügt , müsst Ihr auf diese MSN Seite gehen :
http://settings.messenger.live.com/applications/WebSettings.aspx

- dort Einloggen und auf "Interneteinstellungen", dann auf "Startseite"
- Haken einfügen im Feld "Jeder im Web kann meinen Onlinestatus sehen"
- nun auf "HTML erstellen" klicken, dort den Haken im Feld "Statussymbol" setzen
- scrollt nach unten . Dort den Code kopieren
- der kopierte Code kommt hinein wo steht : "HIER DEIN STATUS-CODE"
- nun Haken ins Feld "Sofortnachrichten-Fenster" und runter srollen, dort ist ein Code
- kopiere dir aus diesem <Iframe-Code nur die http://...... Adresse
- die http://..... Adresse einfügen im Code wo steht : "NACHRICHTEN_LINK"

Zitat:

<div class="status" style="background-image: url(Hintergrundbild MSN);">
<p>MSN Status</p>
<p>Hier dein Status-Code</p>
<p><a href="msnim:add?contact=DeinName@hotmail.de"><img title=" zur Kontaktliste zufügen " src="Grafikadresse MSN 1" /></a> </p>
<p><a href="Link zur MSN Profilseite"><img title=" MSN Profilseite " src="Grafikadresse 2" /></a></p>
<p><a href="NACHRICHTEN_LINK" target="_blank"><img title="MSN Nachricht" src="Grafikadresse 3" /></a> </p>
</div>



Die 3 Hintergrundbilder in den Boxen :



Alle 3 ebenfalls mit Rechtsklick auf dem PC speichern.
Alle 3 hochladen bei "Bilder verwalten" .
Die Grafikadressen eurer Bilder dann jeweils in der ersten Codezeile jeder Box einfügen.

Beachte Bitte :
Wenn zwei, oder alle 3 Boxen eingefügt werden. Nach dem letzten Boxen-Code <br style="clear: left;" /> einfügen.
Damit sich weiterer Seiteninhalt wieder UNTER den Boxen platzieren kann.


Gruß Wolfgang
______________
Fragen bitte an http://find-templates.de.tl


Zuletzt bearbeitet von bmw-freunde-nf am 21.12.2011, 21:53, insgesamt 23-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de