WebSite X5Help Center

 
Frank D.
Frank D.
User

Floating Action Button  de

Autor: Frank D.
Besucht 2037, Followers 4, Geteilt 0  

Da das Programm solche Floating Buttons - Social-Butons nicht hergibt, was aber schön wäre, hab ich heute mal selbst Hand angelegt und was gebastelt. Wer es braucht, wem es gefällt, runterladen, einbauen - fertig. Wie es aussieht, sieht man an dem Bild hier unten.

Sollen die Buttons auf jeder Seite erscheinen, am besten in den Footer, so hab ich es gemacht. Wenn sie nur auf bestimmten Seiten erscheinen sollen, dann eben in die entsprechende Seite.

1. Auf dem Server ein Verzeichnis erstellen namens floating und den Inhalt der angehängte zip Datei dort hinein.

2. Im Programm ein HTML Objekt erstellen und diesen Code rein:

<a id="sys_contact" target="_self" href="_hier_der_Link_zu_deinem_kontaktformular" title="Kontakt"> </a>
<a id="sys_facebook" target="_blank" href="_hier_dein_Link_" title="Facebook"> </a>
<a id="sys_twitter" target="_blank" href="_hier_dein_Link_" title="Twitter"> </a>
<a id="sys_google" target="_blank" href="_hier_dein_Link_" title="Google"> </a>
<a id="sys_rss" target="_blank" href="_hier_dein_Link_" title="RSS"> </a>
<a id="sys_youtube" target="_blank" href="_hier_dein_Link_" title="Youtube"> </a>

Im HTML Objekt auf Erweiterung - CSS und diesen Code reinkopieren:

#sys_contact {
display:scroll;
position:fixed;
top:250px;right:0px;
background-image: url(/floating/contact.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}

#sys_facebook {
display:scroll;
position:fixed;
top:300px;right:0px;
background-image: url(/floating/facebook.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}

#sys_twitter {
display:scroll;
position:fixed;
top:350px;right:0px;
background-image: url(/floating/twitter.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}


#sys_google {
display:scroll;
position:fixed;
top:400px;right:0px;
background-image: url(/floating/google.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}

#sys_rss {
display:scroll;
position:fixed;
top:450px;right:0px;
background-image: url(/floating/rss.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}

#sys_youtube {
display:scroll;
position:fixed;
top:500px;right:0px;
background-image: url(/floating/youtube.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}

#sys_contact:hover, #sys_rss:hover, #sys_facebook:hover, #sys_google:hover, #sys_twitter:hover, #sys_youtube:hover {
background-position: 34px 0px;
}

Jetzt noch oben, HTML Teil die Links anpassen - fertig. Die Buttons können natürlich ersetzt werden und das ganze erweitert bzw. verkleinert werden.

Viel Spaß damit wink

Gepostet am
5 ANTWORTEN
A. Kris
A. Kris
User

Hi Frank,

Thank you so much for sharing Frank! I have saved and will use. Thanks again sealed

Mehr lesen
Gepostet am von A. Kris
Frank D.
Frank D.
User
Autor

Wer es lieber in schwarz/weiß mag und bei mouseover wird es bunt, der nimmt die Icons in diesem Anhang und muss im CSS folgendes änder:

Unter jedem sys Eintag width: 35px; height: 35px; - beides jeweils auf 40 ändern

 

Und im CSS ganz unten den Eintrag: background-position: 34px 0px; - auf background-position: 0px 39px; ändern.

Dann sieht es so aus wie auf dem Bild:

Viel Spaß !

Mehr lesen
Gepostet am von Frank D.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Ja, auch schön !  Ist etwas unspektakulär.

Habe mal etwas auf einer meiner Musterseiten eingebaut.  LINK

Mehr lesen
Gepostet am von Andreas S.
Frank D.
Frank D.
User
Autor

Ohja, gefallen mir auch gut. Wäre ein nette Option für künftige Versionen mit der Wahl auf spektakulär oder dezent wink

Mehr lesen
Gepostet am von Frank D.