Slideshow di immagini con effetti di transizione casuali.

Come installare uno slideshow di immagini come widget su Blogger con l'effetto Nivo Slider.

Gli slideshow di immagini sono certamente uno dei widget più amati anche se uno dei più difficili da installare e uno di quelli che presentano più spesso delle incompatibilità. La maggior parte di questi gadget utilizzano la libreria JQuery che è il top per la realizzazione di queste personalizzazioni. Ricordo che ho postato anche slideshow con link agli ultimi post con Nivo Slider, slideshow degli ultimi articoli con Easy Slider e slideshow orizzontali delle miniature anche in versione minimalista.

Vado a presentare un widget che ha una gran facilità di installazione visto che non si modifica il template ma ha i soliti problemi con Internet Explorer in cui si visualizza senza arrotondamenti e altre finezze grafiche. Se ne può vedere una dimostrazione sul web

 
L'aspetto del gadget è il seguente

con i bottoni di navigazione in basso e le frecce per spostarsi tra le varie immagini. Il Titolo e la Descrizione degli articoli collegati a ciascuna foto possono essere visualizzati in basso su una barra opaca. Si possono inserire un numero vario di immagini. L'unica limitazione è che non si superi la larghezza del layout delle foto. Quando si passa con il cursore sopra a una immagine cessa immediatamente la riproduzione dello slideshow. Gli effetti inseriti sono ben 16, si visualizzano in modo casuale e provengono dallo script Nivo Slider. Per la installazione del widget si va su Layout > Aggiungi un gadget > HTML/Javascript e in Sezioni del sito si incolla il seguente codice

<style type="text/css">
/* <![CDATA[ */
    #NivoContenitore           {position: relative;display: block;}
    #NivoSlideshow               {position:relative;width:512px  !important;height:225px  !important;min-height:200px  !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWoLzu3hw-IuRdhcZgQotk3dT8aVaDHJeum99Lt6Bz7Xou__mUZ2bk6k5IR_5jDn0IRn_Qje3FMLnJkI0ChU-bJUwT3i7a0eF9MwKR1ToH3aYmk3sjP41lfeyczQQprj06_ox2ANAUPxZj/s32/loading9.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);box-shadow: 0px 2px 4px rgba(0,0,0,0.5);}
    #NivoSlideshow img           {position:absolute;top:0;left:0;display:none}
    .nivoSlider                  {position:relative;width:100%;height:auto;}
    .nivoSlider img              {position:absolute;top:0;left:0}
    .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
    .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:96;display:none}
    .nivo-slice                  {display:block;position:absolute;z-index:95;height:100%;top:0}
    .nivo-box                    {display:block;position:absolute;z-index:95;overflow:hidden}
    .nivo-box img                {display:block}
    .nivo-caption                {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000000;color:#ffffff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:98;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .nivo-caption p              {padding:5px;margin:0}
    .nivo-caption a              {display:inline!important}
    .nivo-html-caption           {display:none}
    .nivo-directionNav a         {position:absolute;top:52%;z-index:99;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjagrDE9_MtITsdnp4Wq55aYEr_9BPaJssu9gQHUnlixBvYoTQ_tlYSpli7SqXOGGySdjLtKfOFowHarLKdYG4OI_BdDWtLlwfU9ulhrnJpOyQBGcLw1p3Z26Wbu03pshtFWVonJr52ejo7/s60/navigazione.png") no-repeat;text-indent:-9999px;border:0}
    .nivo-prevNav                {left:10px}
    .nivo-nextNav                {background-position:-30px 0!important;right:10px}
    .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
    .nivo-controlNav a           {position:relative;z-index:99;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtLkzooB0E1_IV3eQ94xSM_IdQpXCawHhC0v0VjIBSntBJMET-SEjfOPXa0CyUVcHzFgKSDKqLbx_BP8owXzn5qDUEKvYwUWr3en90LnPPAdNDzu81rIN3Uxw89p3pB_LKKOycL4JYEepK/s40/bottoni.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
    .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//sites.google.com/site/scriptperilblog/javascript-2/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
    $('#NivoSlideshow').nivoSlider({
        effect           : 'random',
        slices           : 10,
        boxCols          : 8,
        boxRows          : 4,
        animSpeed        : 1200,
        pauseTime        : 3500,
        startSlide       : 0,
        directionNav     : true,
        directionNavHide : true,
        controlNav       : true,
        keyboardNav      : true,
        pauseOnHover     : true,
        captionOpacity   : 0.8    });
});
/* ]]> */
</script>
<div id="NivoContenitore">
    <div id="NivoSlideshow">
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX0w7KiFf6OiXxaG50xzgZPyk7AoPTa6M8ILxy5EWeeG2TU1UIkx8y7gcGgNnte7P8T99bb3sOobmYYVG7N-xP2t8N-wKqjjMHuW3HNhqjoPiucH4jZwK7Wo5aD3uEAhPcLHwZxC5DuH14/s600/natura1.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 1"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzDgj5c0VOfEqzZrDmL_hXLOagcyLesSjqOrOl1hjHFLmPST-RkGAoWabcmS7dHy04H3RVfOLwgGDyrzMyiH4zEGMK6LLpbCbghcnIAW5TCVg2gM8hrCiFg0LxfD2pkE4Dt6Z1LZbk99hY/s600/natura2.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 2"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXdmvQxjn7li2fm3AZWMLEcgP2D_SZrNOWqz-y94lIEsC-CVy1KVgC3vFqTF855p8fqeo5LLih8XZ_CApWF357VDQwfp-IL-jp851TDpMdEgXyANB0TvgaWw4OpraWd0tHeGBBua7edIqL/s600/natura3.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 3"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ONuwgZFtgiVcQHezdJuU_TWPm1lOkiFtd63lkne0dhmXVcOZ0SSFGno3lIvtBoMyme0XiBElSWaGgfpw79L1nEA1c5nPMciwifwK-5l6Wfhk82zxlUCpKMJLUIxWfVNL2suxpiImUsHa/s600/natura4.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 4"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgeixApmKAsb_qLKvpQMfdEZkspoCWU9AKbrl1KdfBlx67jD9JoI_Z_-E-AJ8XwwJOLIDOjt-f5MRlRUQ5Cubr4yeTmORh5jmFCyQxxeop4tA1KbitzxdNNORdaTB4ur92KNisHXl5Xyi/s600/natura5.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 5"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisNsNSsC235vGovAOEEPMBR_UeCnyxv7Q_RpekwTkpCYX_8FeruOTjaxSjbrCqvNAh-OJxX_tl_dexNUFp-0RgQoeMosFnbbVbMhR0LrlA23BH8Qr4NXqaStyInZp_E4k1EaxX2q0a0FBc/s600/natura6.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 6"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASEohuhdJb_4OvY8TIB-_KsGhf_c3dNJujE4mvTBAi8EOo2UyTf1kBsVTyNfLUGCEtMxevHIxZd39WjEVSStta2J12_AeCNf25-jxrBKNS5-GOwC9e2ysHeWiPWkk-duzo9KcJsE49TkZ/s600/natura7.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 7"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyX_rZ8t5jwVhYtttWifSzpZgbVO5SEDD-LBi_pNn082goTVbiKhxXalgXo9hbraafKmtftgxFTkwvrHv3Q2MEN6GE2AfkgSbYuUZWuwpjAZeU7s40GYmJjVET_0gkERhwTPNCuTKszhV/s600/natura8.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 8"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh6UxTLZeDX_W0ULYUp1Xfn_igqq4RJMrOZfF0cl5tNP2JopzzcDAnS4gxrOL46HEcjAio1Hj7dNUYYeigmAaKwszkAd17iG3wORUrsKz4-gmgbU37Dly08IrRqzHTS9iFUYj7tqijP9dE/s600/natura9.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 9"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0hpYinXX5ItpFPX9vCyAZFc5ZDwkK_0kW5UpJaqbDXa70TccAOC_Ko51nezHXg6H0TF7oSbIArCtPihml9FyuyjycEiQAg64f8KOLIHqEVdOdqSPr_ImxQQw2eVHXxgC64_UZQeXd32i/s600/natura10.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 10"/></a>       
    </div>
</div>

dove possono essere personalizzati tra gli altri i parametri colorati. I più importanti sono:

1. Le dimensioni dello slideshow. Quelle di default sono 512 di altezza e 225 di larghezza
2. Il colore dello sfondo e  del testo della descrizione rispettivamente #000000 e #FFFFFF. I meno esperti possono consultare il post sui codici dei colori.
3. I parametri dello script per impostare velocità, durata della pausa e opacità della descrizione
4. Gli URL delle immagini da inserire insieme al Link del post collegato, al Titolo e alla Descrizione e al Tag Alt per questioni di SEO.

Si salva e si posiziona il widget con il mouse. 

Osservazioni conclusive: Se nel nostro template ci fosse già JQuery allora si può fare a meno di postare la riga evidenziata di giallo. Se invece possediamo un blog con dominio personalizzato allora dovrà essere scaricato il javascript evidenziato di verde incollandone l'indirizzo nel browser e cliccando su Invio. Successivamente tale file dovrà essere caricato nella cartella Public di Dropbox, se ne dovrà acquisire il Link Diretto che dovrà essere incollato nel codice al posto dell'URL  evidenziato di verde.

Aggiornamento: A seguito di un malfunzionamento dovuto alle nuove regole di Google Drive e Google Sites ho pubblicato il codice di questo slideshow in una nuova forma.

Update: Slideshow per Blogger personalizzabile