Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Nützliche Funktionen & Elemente für Websites
Social Slider - Social Sidebar in NetObjects Fusion
nettesekel:
***Quelle***
Eine nette Möglichkeit eure Seitenbesucher auf eure Seiten bei Facebook & Co aufmerksam zu machen bietet dieser Social-Slider.
Ursprünglich ist dieser "Slider" für Joomla gedacht, der Einbau in NOF stellt aber kein Problem dar, weshalb ich euch diesen im nachfolgenden Tutorial erklären möchte.
nettesekel:
Soweit ich die Lizenzbedingungen des Sliders überlicken kann ist die kostenlose Nutzung erlaubt. Um die benötigten Dateien downloaden zu können, erwartet der Herausgeber jedoch eine Registrierung. Ich habe mich also zunächst registriert und im Anschluss die benötigten Dateien heruntergeladen.
Die heruntergeladene Zip-Datei trägt den Namen mod_social_slider_j25_v1-5-5.zip
In dieser zip-Datei befindet sich ein Ordner mit dem Namen
mod_social_slider
Entpackt also die Zip-Datei und öffnet nun diesen Ordner. In dem Ordner befinden sich weitere Ordner und einige einzelne Dateien. Öffnet nun den Ordner mit dem Namen
media
Im Ordner media findet ihr nun wieder einige Unterordner, öffnet nun bitte den Ordner mit dem Namen
css
In diesem Ordner findet ihr eine Datei mit dem Namen
style.css
Da wir diese Datei benötigen, aber eine der nof-eigenen Styledateien den selben Namen trägt, benennt ihr diese Datei bitte um in
mod_social_slider.css
Bindet die umbenannte Styledatei nun als Asset in euer Projekt ein. Wer nicht weiß, wie dabei vorzugehen ist, findet in diesem Tutorial Hilfestellung.
nettesekel:
Neben der Styledatei benötigt ihr nun noch den Ordner mit den Icons. Öffnet also nochmals den Ordner
mod_social_slider
und im Anschluss den darin liegenden Ordner
media
und kopiert euch den dort befindlichen Ordner mit dem Namen
icons
Diesen Ordner müsst ihr auf eurem Server im Verzeichnis
assets >> images
einfügen.
Möchtet ihr das Ergebnis eurer Bemühungen auch bei lokaler Publizierung sehen, müsst ihr den Ordner "icons" parallel auch im Ordner Lokale Publizierung eures Projekts einfügen. Dort dann ebenfalls im Ordner assets >> images
--------------------------------------------------------------------------------------------
Alternativ ist es auch möglich die benötigten Icons als Assets ins Projekt einzubinden und dann in der Publizieren-Ansicht in den Ordner "icons" zu verschieben. Der Ordner icons müsste ebenfalls in der Publizierenansicht im Ordner assets>>images erstellt werden.
Bei Interesse findet ihr entsprechende Anleitungen unter folgenden Links:
https://www.nof-community.de/richtiger-umgang-mit-netobjects-fusion/zusatzliche-assets-in-nof-einbinden/
https://www.nof-community.de/richtiger-umgang-mit-netobjects-fusion/eigene-verzeichnisse-in-netobjects-fusion-anlegen/
nettesekel:
Da es sich empfielt den Social-Slider auf alle Seiten anzuzeigen, ist es ratsam die notwendigen Einfügen zwischen den head-Tags im Masterrahmen-html zu platzieren.
Da eure Startseite als einzige Seite in einem anderen Verzeichnis liegt als eure Unterseiten, solltet ihr zunächst für eure Startseite einen eigenen Masterrahmen anlegen. Wer hierzu Hilfestellung benötigt findet unter folgendem Link eine kleine Anleitung. https://www.nof-community.de/richtiger-umgang-mit-netobjects-fusion/einen-neuen-masterrahmen-anlegen/
Nun öffnet ihr eure Startseite, und fügt nach folgender Anleitung den nachfolgenden Code ins Masterrahmen-html ein. https://www.nof-community.de/code-oder-codeschnipsel-an-der-richtigen-stelle-einfuegen/code-zwischen-den-head-tags-der-seite-einfugen/
--- Code: HTML5 ---<link rel="stylesheet" type="text/css" href="./html/mod_social_slider.css"> <style type="text/css">.transifextstats_bar{background-color:#1094d6;}@CHARSET "ISO-8859-1";#dbutton165 *{ position:static;} #dbutton165{ padding: 0px; margin: 0px 0px 0px 0px;} #dbutton165 form{ text-align:center; /*font-family:'Monotype Corsiva', sans-serif;*/} #dbutton165 form input#dbuttonsubmit165, #dbutton165 form button#dbuttonsubmit165{ font-weight:400; font-size:1em;} @CHARSET "ISO-8859-1";#dbutton186 *{ position:static;} #dbutton186{ padding: 0px; margin: 0px 0px 0px 0px;} #dbutton186 form{ text-align:center; /*font-family:'Monotype Corsiva', sans-serif;*/} #dbutton186 form input#dbuttonsubmit186, #dbutton186 form button#dbuttonsubmit186{ font-weight:400; font-size:1em;} ul#jj_sl_navigation li a {background-color:#33353b;text-align:left;color:#ffffff !important;}ul#jj_sl_navigation li { left: 0;position:relative;-webkit-transition: left 0.3s;-moz-transition: left 0.3s;-ms-transition: left 0.3s;-o-transition: left 0.3s;transition: left 0.3s;}ul#jj_sl_navigation { left: -140px;top:5px;}ul#jj_sl_navigation li:hover { left: 140px;}ul#jj_sl_navigation li a { padding: 11px 0px 11px 10px;margin-left: -2px;}ul#jj_sl_navigation .jj_sl_facebook a { background-position: 144px 50%; background-image: url(./assets/images/icons/facebook-white.png); }ul#jj_sl_navigation .jj_sl_twitter a { background-position: 144px 50%; background-image: url(./assets/images/icons/twitter-white.png); }ul#jj_sl_navigation .jj_sl_google a { background-position: 144px 50%; background-image: url(./assets/images/icons/google-white.png); }ul#jj_sl_navigation .jj_sl_myspace a { background-position: 144px 50%; background-image: url(./assets/images/icons/myspace-white.png); }ul#jj_sl_navigation .jj_sl_youtube a { background-position: 144px 50%; background-image: url(./assets/images/icons/youtube-white.png); }ul#jj_sl_navigation .jj_sl_linkedin a { background-position: 144px 50%; background-image: url(./assets/images/icons/linkedin-white.png); }ul#jj_sl_navigation .jj_sl_steam a { background-position: 144px 50%; background-image: url(./assets/images/icons/steam-white.png); }ul#jj_sl_navigation .jj_sl_lastfm a { background-position: 144px 50%; background-image: url(./assets/images/icons/lastfm-white.png); }ul#jj_sl_navigation .jj_sl_pinterest a { background-position: 144px 50%; background-image: url(./assets/images/icons/pinterest-white.png); }ul#jj_sl_navigation .jj_sl_soundcloud a { background-position: 144px 50%; background-image: url(./assets/images/icons/soundcloud-white.png); }ul#jj_sl_navigation .jj_sl_tumblr a { background-position: 144px 50%; background-image: url(./assets/images/icons/tumblr-white.png); }ul#jj_sl_navigation .jj_sl_github a { background-position: 144px 50%; background-image: url(./assets/images/icons/github-white.png); }ul#jj_sl_navigation .jj_sl_flickr a { background-position: 144px 50%; background-image: url(./assets/images/icons/flickr-white.png); }ul#jj_sl_navigation .jj_sl_rss a { background-position: 144px 50%; background-image: url(./assets/images/icons/rss-white.png); }ul#jj_sl_navigation .jj_sl_vimeo a { background-position: 144px 50%; background-image: url(./assets/images/icons/vimeo-white.png); }ul#jj_sl_navigation .jj_sl_custom1 a { background-position: 144px 50%; background-image: url(./assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom2 a { background-position: 144px 50%; background-image: url(./assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom3 a { background-position: 144px 50%; background-image: url(./assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom4 a { background-position: 144px 50%; background-image: url(./assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom5 a { background-position: 144px 50%; background-image: url(./assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom1 a:hover{ background-color: #000000; } ul#jj_sl_navigation .jj_sl_custom2 a:hover{ background-color: #000000; } ul#jj_sl_navigation .jj_sl_custom3 a:hover{ background-color: #000000; } ul#jj_sl_navigation .jj_sl_custom4 a:hover{ background-color: #000000; } ul#jj_sl_navigation .jj_sl_custom5 a:hover{ background-color: #000000; } </style>
Diesen Vorgang wiederholt ihr nun mit einer eurer Unterseiten und dem nachfolgenden, geringfügig abweichenden Code.
--- Code: HTML5 ---<link rel="stylesheet" type="text/css" href="./mod_social_slider.css"> <style type="text/css">.transifextstats_bar{background-color:#1094d6;}@CHARSET "ISO-8859-1";#dbutton165 *{ position:static;} #dbutton165{ padding: 0px; margin: 0px 0px 0px 0px;} #dbutton165 form{ text-align:center; /*font-family:'Monotype Corsiva', sans-serif;*/} #dbutton165 form input#dbuttonsubmit165, #dbutton165 form button#dbuttonsubmit165{ font-weight:400; font-size:1em;} @CHARSET "ISO-8859-1";#dbutton186 *{ position:static;} #dbutton186{ padding: 0px; margin: 0px 0px 0px 0px;} #dbutton186 form{ text-align:center; /*font-family:'Monotype Corsiva', sans-serif;*/} #dbutton186 form input#dbuttonsubmit186, #dbutton186 form button#dbuttonsubmit186{ font-weight:400; font-size:1em;} ul#jj_sl_navigation li a {background-color:#33353b;text-align:left;color:#ffffff !important;}ul#jj_sl_navigation li { left: 0;position:relative;-webkit-transition: left 0.3s;-moz-transition: left 0.3s;-ms-transition: left 0.3s;-o-transition: left 0.3s;transition: left 0.3s;}ul#jj_sl_navigation { left: -140px;top:5px;}ul#jj_sl_navigation li:hover { left: 140px;}ul#jj_sl_navigation li a { padding: 11px 0px 11px 10px;margin-left: -2px;}ul#jj_sl_navigation .jj_sl_facebook a { background-position: 144px 50%; background-image: url(../assets/images/icons/facebook-white.png); }ul#jj_sl_navigation .jj_sl_twitter a { background-position: 144px 50%; background-image: url(../assets/images/icons/twitter-white.png); }ul#jj_sl_navigation .jj_sl_google a { background-position: 144px 50%; background-image: url(../assets/images/icons/google-white.png); }ul#jj_sl_navigation .jj_sl_myspace a { background-position: 144px 50%; background-image: url(../assets/images/icons/myspace-white.png); }ul#jj_sl_navigation .jj_sl_youtube a { background-position: 144px 50%; background-image: url(../assets/images/icons/youtube-white.png); }ul#jj_sl_navigation .jj_sl_linkedin a { background-position: 144px 50%; background-image: url(../assets/images/icons/linkedin-white.png); }ul#jj_sl_navigation .jj_sl_steam a { background-position: 144px 50%; background-image: url(../assets/images/icons/steam-white.png); }ul#jj_sl_navigation .jj_sl_lastfm a { background-position: 144px 50%; background-image: url(../assets/images/icons/lastfm-white.png); }ul#jj_sl_navigation .jj_sl_pinterest a { background-position: 144px 50%; background-image: url(../assets/images/icons/pinterest-white.png); }ul#jj_sl_navigation .jj_sl_soundcloud a { background-position: 144px 50%; background-image: url(../assets/images/icons/soundcloud-white.png); }ul#jj_sl_navigation .jj_sl_tumblr a { background-position: 144px 50%; background-image: url(../assets/images/icons/tumblr-white.png); }ul#jj_sl_navigation .jj_sl_github a { background-position: 144px 50%; background-image: url(../assets/images/icons/github-white.png); }ul#jj_sl_navigation .jj_sl_flickr a { background-position: 144px 50%; background-image: url(../assets/images/icons/flickr-white.png); }ul#jj_sl_navigation .jj_sl_rss a { background-position: 144px 50%; background-image: url(../assets/images/icons/rss-white.png); }ul#jj_sl_navigation .jj_sl_vimeo a { background-position: 144px 50%; background-image: url(../assets/images/icons/vimeo-white.png); }ul#jj_sl_navigation .jj_sl_custom1 a { background-position: 144px 50%; background-image: url(../assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom2 a { background-position: 144px 50%; background-image: url(../assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom3 a { background-position: 144px 50%; background-image: url(../assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom4 a { background-position: 144px 50%; background-image: url(../assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom5 a { background-position: 144px 50%; background-image: url(../assets/images/icons/icon.png); }ul#jj_sl_navigation .jj_sl_custom1 a:hover{ background-color: #000000; } ul#jj_sl_navigation .jj_sl_custom2 a:hover{ background-color: #000000; } ul#jj_sl_navigation .jj_sl_custom3 a:hover{ background-color: #000000; } ul#jj_sl_navigation .jj_sl_custom4 a:hover{ background-color: #000000; } ul#jj_sl_navigation .jj_sl_custom5 a:hover{ background-color: #000000; } </style>
Solltet ihr weitere Masterrahmen in Verwendung haben, muss der Code natürlich auch in den anderen Masterrahmen eingebunden werden, sofern der Slider auf diesen Seiten ebenfalls genutzt werden soll.
nettesekel:
Abschließend müsst ihr nun nur noch den eigentlichen Slidercode in eurer Seite platzieren und anpassen. Der Code wird nach folgender Anleitung in ein Textfeld eingefügt. https://www.nof-community.de/code-oder-codeschnipsel-an-der-richtigen-stelle-einfuegen/sodort-fugt-man-code-schnipsel-ein/
Das Textfeld platziert ihr am besten am Ende eurer Seite im Masterrahmen.
--- Code: HTML5 ---<ul id="jj_sl_navigation"><li class="jj_sl_facebook"><a href="http://facebook.com" target="_blank"><span class="jj_social_text">Follow via Facebook</span></a></li><li class="jj_sl_twitter"><a href="http://twitter.com" target="_blank"><span class="jj_social_text">Follow via Twitter</span></a></li><li class="jj_sl_google"><a href="http://plus.google.com" target="_blank"><span class="jj_social_text">Follow via Google+</span></a></li><li class="jj_sl_myspace"><a href="http://myspace.com" target="_blank"><span class="jj_social_text">Follow via MySpace</span></a></li><li class="jj_sl_youtube"><a href="http://youtube.com" target="_blank"><span class="jj_social_text">Follow via Youtube</span></a></li><li class="jj_sl_linkedin"><a href="http://linkedin.com" target="_blank"><span class="jj_social_text">Follow via LinkedIn</span></a></li><li class="jj_sl_steam"><a href="http://steampowered.com" target="_blank"><span class="jj_social_text">Follow via Steam</span></a></li><li class="jj_sl_lastfm"><a href="http://last.fm" target="_blank"><span class="jj_social_text">Follow via Last.fm</span></a></li><li class="jj_sl_pinterest"><a href="http://pinterest.com" target="_blank"><span class="jj_social_text">Follow via Pinterest</span></a></li><li class="jj_sl_soundcloud"><a href="http://soundcloud.com" target="_blank"><span class="jj_social_text">Follow via Soundcloud</span></a></li><li class="jj_sl_tumblr"><a href="http://tumblr.com" target="_blank"><span class="jj_social_text">Follow via Tumblr</span></a></li><li class="jj_sl_github"><a href="http://github.com" target="_blank"><span class="jj_social_text">Follow via Github</span></a></li><li class="jj_sl_flickr"><a href="http://flickr.com" target="_blank"><span class="jj_social_text">Follow via Flickr</span></a></li><li class="jj_sl_rss"><a href="http://link-to-rss-feed.com" target="_blank"><span class="jj_social_text">Follow RSS Feed</span></a></li><li class="jj_sl_vimeo"><a href="http://vimeo.com" target="_blank"><span class="jj_social_text">Follow via Vimeo</span></a></li></ul>
Notwendige Anpassungen des Codes:
1. Wer nicht alle der enthaltenen Plattformen in seinem Slider anzeigen lassen möchte, entfernt die überflüssigen Zeilen einfach aus dem Code.
Bsp. Wer z.B. facebook aus seinem Slider entfernen möchte, der müsste folgende Zeilen entfernen.
--- Code: HTML5 ---<li class="jj_sl_facebook"><a href="http://facebook.com" target="_blank"><span class="jj_social_text">Follow via Facebook</span></a></li>
2. Ihr solltet natürlich dir vorhandenen Links gegen Links zu eurer eigen SocialMedia-Seite austauschen. Um beim Beispiel facebook zu bleiben...
<a href="http://facebook.com" der rot gekennzeichnete Link muss gegen den korrekten link ausgetauscht werden.
3. Wer die Beschriftung der Buttons abändern möchte kann dies ebenfalls in diesem Code tun, die passende Stelle für das facebook-Beispiel wäre diese:
<span class="jj_social_text">Follow via Facebook</span>
Navigation
[0] Themen-Index
[#] Nächste Seite
Zur normalen Ansicht wechseln