Sonntag, 13. September 2015

Nivo-Slider in Blogger einbauen

Vorab sei gesagt, dass ich folgende Spielerei eher für Desktopdesings empfehle.
Bei mobilen Geräten kann es schief gehen.
Wie zB ganz oben auf meinen Testblog in der Web-Version zu sehen.

Wir werden den Slider auf der Startseite einbauen.

Meine Bilder sind alle gleich groß (912 x 385 px) 

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.