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

1. <link rel="stylesheet" type="text/css" href="./html/mod_social_slider.css">
2.  
3. <style type="text/css">
4. .transifextstats_bar{background-color:#1094d6;}
5. @CHARSET "ISO-8859-1";
6. #dbutton165 *
7. {
8.         position:static;
9. }
10.  
11. #dbutton165
12. {
13.         padding: 0px;
14.         margin: 0px 0px 0px 0px;
15. }
16.  
17. #dbutton165 form
18. {
19.         text-align:center;
20.         /*font-family:'Monotype Corsiva', sans-serif;*/
21. }
22.  
23. #dbutton165 form input#dbuttonsubmit165, #dbutton165 form button#dbuttonsubmit165
24. {
25.         font-weight:400;
26.         font-size:1em;
27. }
28.  
29.  
30. @CHARSET "ISO-8859-1";
31. #dbutton186 *
32. {
33.         position:static;
34. }
35.  
36. #dbutton186
37. {
38.         padding: 0px;
39.         margin: 0px 0px 0px 0px;
40. }
41.  
42. #dbutton186 form
43. {
44.         text-align:center;
45.         /*font-family:'Monotype Corsiva', sans-serif;*/
46. }
47.  
48. #dbutton186 form input#dbuttonsubmit186, #dbutton186 form button#dbuttonsubmit186
49. {
50.         font-weight:400;
51.         font-size:1em;
52. }
53.  
54.  
55. 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 {
56.                                         background-position: 144px 50%;
57.                                         background-image: url(./assets/images/icons/facebook-white.png);
58.                          }ul#jj_sl_navigation .jj_sl_twitter a {
59.                                         background-position: 144px 50%;
60.                                         background-image: url(./assets/images/icons/twitter-white.png);
61.                          }ul#jj_sl_navigation .jj_sl_google a {
62.                                         background-position: 144px 50%;
63.                                         background-image: url(./assets/images/icons/google-white.png);
64.                          }ul#jj_sl_navigation .jj_sl_myspace a {
65.                                         background-position: 144px 50%;
66.                                         background-image: url(./assets/images/icons/myspace-white.png);
67.                          }ul#jj_sl_navigation .jj_sl_youtube a {
68.                                         background-position: 144px 50%;
69.                                         background-image: url(./assets/images/icons/youtube-white.png);
70.                          }ul#jj_sl_navigation .jj_sl_linkedin a {
71.                                         background-position: 144px 50%;
72.                                         background-image: url(./assets/images/icons/linkedin-white.png);
73.                          }ul#jj_sl_navigation .jj_sl_steam a {
74.                                         background-position: 144px 50%;
75.                                         background-image: url(./assets/images/icons/steam-white.png);
76.                          }ul#jj_sl_navigation .jj_sl_lastfm a {
77.                                         background-position: 144px 50%;
78.                                         background-image: url(./assets/images/icons/lastfm-white.png);
79.                          }ul#jj_sl_navigation .jj_sl_pinterest a {
80.                                         background-position: 144px 50%;
81.                                         background-image: url(./assets/images/icons/pinterest-white.png);
82.                          }ul#jj_sl_navigation .jj_sl_soundcloud a {
83.                                         background-position: 144px 50%;
84.                                         background-image: url(./assets/images/icons/soundcloud-white.png);
85.                          }ul#jj_sl_navigation .jj_sl_tumblr a {
86.                                         background-position: 144px 50%;
87.                                         background-image: url(./assets/images/icons/tumblr-white.png);
88.                          }ul#jj_sl_navigation .jj_sl_github a {
89.                                         background-position: 144px 50%;
90.                                         background-image: url(./assets/images/icons/github-white.png);
91.                          }ul#jj_sl_navigation .jj_sl_flickr a {
92.                                         background-position: 144px 50%;
93.                                         background-image: url(./assets/images/icons/flickr-white.png);
94.                          }ul#jj_sl_navigation .jj_sl_rss a {
95.                                         background-position: 144px 50%;
96.                                         background-image: url(./assets/images/icons/rss-white.png);
97.                          }ul#jj_sl_navigation .jj_sl_vimeo a {
98.                                         background-position: 144px 50%;
99.                                         background-image: url(./assets/images/icons/vimeo-white.png);
100.                          }ul#jj_sl_navigation .jj_sl_custom1 a {
101.                                         background-position: 144px 50%;
102.                                         background-image: url(./assets/images/icons/icon.png);
103.                          }ul#jj_sl_navigation .jj_sl_custom2 a {
104.                                         background-position: 144px 50%;
105.                                         background-image: url(./assets/images/icons/icon.png);
106.                          }ul#jj_sl_navigation .jj_sl_custom3 a {
107.                                         background-position: 144px 50%;
108.                                         background-image: url(./assets/images/icons/icon.png);
109.                          }ul#jj_sl_navigation .jj_sl_custom4 a {
110.                                         background-position: 144px 50%;
111.                                         background-image: url(./assets/images/icons/icon.png);
112.                          }ul#jj_sl_navigation .jj_sl_custom5 a {
113.                                         background-position: 144px 50%;
114.                                         background-image: url(./assets/images/icons/icon.png);
115.                          }ul#jj_sl_navigation .jj_sl_custom1 a:hover{
116.                         background-color: #000000;
117.                    }
118.                    ul#jj_sl_navigation .jj_sl_custom2 a:hover{
119.                         background-color: #000000;
120.                    }
121.                    ul#jj_sl_navigation .jj_sl_custom3 a:hover{
122.                         background-color: #000000;
123.                    }
124.                    ul#jj_sl_navigation .jj_sl_custom4 a:hover{
125.                         background-color: #000000;
126.                    }
127.                    ul#jj_sl_navigation .jj_sl_custom5 a:hover{
128.                         background-color: #000000;
129.                 }
130.   </style>

Diesen Vorgang wiederholt ihr nun mit einer eurer Unterseiten und dem nachfolgenden, geringfügig abweichenden Code.

Code: HTML5

1. <link rel="stylesheet" type="text/css" href="./mod_social_slider.css">
2.  
3. <style type="text/css">
4. .transifextstats_bar{background-color:#1094d6;}
5. @CHARSET "ISO-8859-1";
6. #dbutton165 *
7. {
8.         position:static;
9. }
10.  
11. #dbutton165
12. {
13.         padding: 0px;
14.         margin: 0px 0px 0px 0px;
15. }
16.  
17. #dbutton165 form
18. {
19.         text-align:center;
20.         /*font-family:'Monotype Corsiva', sans-serif;*/
21. }
22.  
23. #dbutton165 form input#dbuttonsubmit165, #dbutton165 form button#dbuttonsubmit165
24. {
25.         font-weight:400;
26.         font-size:1em;
27. }
28.  
29.  
30. @CHARSET "ISO-8859-1";
31. #dbutton186 *
32. {
33.         position:static;
34. }
35.  
36. #dbutton186
37. {
38.         padding: 0px;
39.         margin: 0px 0px 0px 0px;
40. }
41.  
42. #dbutton186 form
43. {
44.         text-align:center;
45.         /*font-family:'Monotype Corsiva', sans-serif;*/
46. }
47.  
48. #dbutton186 form input#dbuttonsubmit186, #dbutton186 form button#dbuttonsubmit186
49. {
50.         font-weight:400;
51.         font-size:1em;
52. }
53.  
54.  
55. 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 {
56.                                         background-position: 144px 50%;
57.                                         background-image: url(../assets/images/icons/facebook-white.png);
58.                          }ul#jj_sl_navigation .jj_sl_twitter a {
59.                                         background-position: 144px 50%;
60.                                         background-image: url(../assets/images/icons/twitter-white.png);
61.                          }ul#jj_sl_navigation .jj_sl_google a {
62.                                         background-position: 144px 50%;
63.                                         background-image: url(../assets/images/icons/google-white.png);
64.                          }ul#jj_sl_navigation .jj_sl_myspace a {
65.                                         background-position: 144px 50%;
66.                                         background-image: url(../assets/images/icons/myspace-white.png);
67.                          }ul#jj_sl_navigation .jj_sl_youtube a {
68.                                         background-position: 144px 50%;
69.                                         background-image: url(../assets/images/icons/youtube-white.png);
70.                          }ul#jj_sl_navigation .jj_sl_linkedin a {
71.                                         background-position: 144px 50%;
72.                                         background-image: url(../assets/images/icons/linkedin-white.png);
73.                          }ul#jj_sl_navigation .jj_sl_steam a {
74.                                         background-position: 144px 50%;
75.                                         background-image: url(../assets/images/icons/steam-white.png);
76.                          }ul#jj_sl_navigation .jj_sl_lastfm a {
77.                                         background-position: 144px 50%;
78.                                         background-image: url(../assets/images/icons/lastfm-white.png);
79.                          }ul#jj_sl_navigation .jj_sl_pinterest a {
80.                                         background-position: 144px 50%;
81.                                         background-image: url(../assets/images/icons/pinterest-white.png);
82.                          }ul#jj_sl_navigation .jj_sl_soundcloud a {
83.                                         background-position: 144px 50%;
84.                                         background-image: url(../assets/images/icons/soundcloud-white.png);
85.                          }ul#jj_sl_navigation .jj_sl_tumblr a {
86.                                         background-position: 144px 50%;
87.                                         background-image: url(../assets/images/icons/tumblr-white.png);
88.                          }ul#jj_sl_navigation .jj_sl_github a {
89.                                         background-position: 144px 50%;
90.                                         background-image: url(../assets/images/icons/github-white.png);
91.                          }ul#jj_sl_navigation .jj_sl_flickr a {
92.                                         background-position: 144px 50%;
93.                                         background-image: url(../assets/images/icons/flickr-white.png);
94.                          }ul#jj_sl_navigation .jj_sl_rss a {
95.                                         background-position: 144px 50%;
96.                                         background-image: url(../assets/images/icons/rss-white.png);
97.                          }ul#jj_sl_navigation .jj_sl_vimeo a {
98.                                         background-position: 144px 50%;
99.                                         background-image: url(../assets/images/icons/vimeo-white.png);
100.                          }ul#jj_sl_navigation .jj_sl_custom1 a {
101.                                         background-position: 144px 50%;
102.                                         background-image: url(../assets/images/icons/icon.png);
103.                          }ul#jj_sl_navigation .jj_sl_custom2 a {
104.                                         background-position: 144px 50%;
105.                                         background-image: url(../assets/images/icons/icon.png);
106.                          }ul#jj_sl_navigation .jj_sl_custom3 a {
107.                                         background-position: 144px 50%;
108.                                         background-image: url(../assets/images/icons/icon.png);
109.                          }ul#jj_sl_navigation .jj_sl_custom4 a {
110.                                         background-position: 144px 50%;
111.                                         background-image: url(../assets/images/icons/icon.png);
112.                          }ul#jj_sl_navigation .jj_sl_custom5 a {
113.                                         background-position: 144px 50%;
114.                                         background-image: url(../assets/images/icons/icon.png);
115.                          }ul#jj_sl_navigation .jj_sl_custom1 a:hover{
116.                         background-color: #000000;
117.                    }
118.                    ul#jj_sl_navigation .jj_sl_custom2 a:hover{
119.                         background-color: #000000;
120.                    }
121.                    ul#jj_sl_navigation .jj_sl_custom3 a:hover{
122.                         background-color: #000000;
123.                    }
124.                    ul#jj_sl_navigation .jj_sl_custom4 a:hover{
125.                         background-color: #000000;
126.                    }
127.                    ul#jj_sl_navigation .jj_sl_custom5 a:hover{
128.                         background-color: #000000;
129.                 }
130.   </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

1. <ul id="jj_sl_navigation">
2. <li class="jj_sl_facebook"><a href="http://facebook.com" target="_blank"><span class="jj_social_text">Follow via Facebook</span></a></li>
3. <li class="jj_sl_twitter"><a href="http://twitter.com" target="_blank"><span class="jj_social_text">Follow via Twitter</span></a></li>
4. <li class="jj_sl_google"><a href="http://plus.google.com" target="_blank"><span class="jj_social_text">Follow via Google+</span></a></li>
5. <li class="jj_sl_myspace"><a href="http://myspace.com" target="_blank"><span class="jj_social_text">Follow via MySpace</span></a></li>
6. <li class="jj_sl_youtube"><a href="http://youtube.com" target="_blank"><span class="jj_social_text">Follow via Youtube</span></a></li>
7. <li class="jj_sl_linkedin"><a href="http://linkedin.com" target="_blank"><span class="jj_social_text">Follow via LinkedIn</span></a></li>
8. <li class="jj_sl_steam"><a href="http://steampowered.com" target="_blank"><span class="jj_social_text">Follow via Steam</span></a></li>
9. <li class="jj_sl_lastfm"><a href="http://last.fm" target="_blank"><span class="jj_social_text">Follow via Last.fm</span></a></li>
10. <li class="jj_sl_pinterest"><a href="http://pinterest.com" target="_blank"><span class="jj_social_text">Follow via Pinterest</span></a></li>
11. <li class="jj_sl_soundcloud"><a href="http://soundcloud.com" target="_blank"><span class="jj_social_text">Follow via Soundcloud</span></a></li>
12. <li class="jj_sl_tumblr"><a href="http://tumblr.com" target="_blank"><span class="jj_social_text">Follow via Tumblr</span></a></li>
13. <li class="jj_sl_github"><a href="http://github.com" target="_blank"><span class="jj_social_text">Follow via Github</span></a></li>
14. <li class="jj_sl_flickr"><a href="http://flickr.com" target="_blank"><span class="jj_social_text">Follow via Flickr</span></a></li>
15. <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>
16. <li class="jj_sl_vimeo"><a href="http://vimeo.com" target="_blank"><span class="jj_social_text">Follow via Vimeo</span></a></li>
17. </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

1. <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>

[nettesekel]

Ich wünsche gutes Gelingen und viel Spaß bei der Umsetzung.