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"
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 
