Sonntag, 13. September 2015

Nivo-Slider in Blogger einbauen

Vorab sei gesagt, dass ich folgende Spielerei eher auf Desktopdesings empfehle.
Bei mobilen Versionen soll jeder bitte für sich abwägen.

Wir werden wie auf der Startseite von spy-photography einen Slider in unseren Blog einbauen.
Und zwar ganz oben wie auf meinen Testblog zu sehen.
Ihr könnt ihn einbauen wo Ihr wollt.

Dateien hierfür findet ihr hier zum Download.
Lizens bitte selber auf Anbieterseite durchlesen.
Die Anordnung der Dateien bzw Ordner kann etwas von meiner abweichen, da der Slider schon einige Jährchen auf dem Buckel hat und mittlerweile verschiedene Varianten erschienen sind.

Nun ist es für diejenigen,die einen eigenen Webspace haben kein großes Ding sich die Dateien auf den Server zu legen um diese aufzurufen.
Haben jedoch nicht alle.
Hierzu bitte ganz unten unter PS lesen.

Fangen wir damit an unter Layout eine neue HTML/Javascript  Cross Column Gadget einfügen.
Die neue Column nennt Blogger region-inner tabs-inner

Anschließend den Header und die navbar mittels CSS entfernen und den padding (Absand zum Rand) bei der neuen Column entfernen.
CSS lautet jetzt:
#navbar {display:none}
.header {display:none}
.region-inner.tabs-inner {margin:0;padding:0}
#crosscol {margin:0;padding:0}

Wenn man nicht möchte dass der slider nach dem Laden springt:
.region-inner.tabs-inner {margin:0;padding:0;height:397px}
Ihr tragt natürlich die Höhe Eurer Bilder ein.
Würde ich nur auf Desktopversion nehmen


Jetzt ein paar Angaben im Headbereich eingeben um den Slider zu steuern.
Wir gehen unter Vorlage>>HTML bearbeiten und geben zwischen <head>und</head> folgendes ein:
<!-- NIVO SLIDER ANFANG -->
<link href='pfad-zum-server/themes/default/default.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='pfad-zum-server/themes/light/light.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='pfad-zum-server/themes/dark/dark.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='pfad-zum-server/themes/bar/bar.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='pfad-zum-server/nivo-slider.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- NIVO SLIDER ENDE -->


Fehlen nur noch meine vorbereiteten Bilder auf Picasa-Webalben hochzuladen und mir den Pfad zu kopieren
Ich habe mir drei Bilder vom Kumpel ausgeliehen, die die Maße 940x397 Pixel haben.
( slider-01.jpg – slider-02.jpg – slider-03jpg )
Das wird die Breite sein,die meine Column haben wird.
Die Höhe könnt Ihr so legen wie es Euch passt.
Wichtig ist nur,dass die Bilder alle die selben Maße haben.

Und jetzt geht es ab in unsere Column um folgendes einzugeben:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<!-- Bild 1 - Einfaches Bild -->
<img src="pfad-picasa-album/slider-01.jpg" alt="" />

<!-- Bild 2 - Verlinktes Bild -->
<a href="#"><img src="pfad-picasa-album/slider-02.jpg" alt="" title="Klick auf das Bild und du gelangst zur Galerie" /></a>

<!-- Bild 3 - Verlinkte Schrift -->
<img src="pfad-picasa-album/slider-03.jpg" alt="" title="#htmlcaption" />
</div>
<!-- Dieser Text wird bei Bild 3 ausgegeben -->
<div id="htmlcaption" class="nivo-html-caption">
Direkt zur <a href="#"> Galerie</a>.
</div>
</div>

<script type="text/javascript" src="pfad-zum-server/scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="pfad-zum-server/scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

Und wenn wir alles richtig gemacht haben sollte es sliden.

 


PS
Wer kein eigenen Webspace hat, der kann sich selber eins einrihten.
Das beschreibe ich in diesem Tutorial .

Keine Kommentare:

Kommentar veröffentlichen