Widget di uno slideshow di immagini per Blogger con link ai post e bottoni di navigazione.

Come installare uno slideshow di immagini in Blogger con effetti di transizione casuali e con link a pagine del blog e pulsanti di navigazione.

Il ritiro del supporto di hosting da parte di Google Drive sta incidendo profondamente nei widget installati nei blog di Blogger visto che in molti di questi sono presenti file esterni caricati su Drive e segnatamente sul mio se sono stati installati da questo sito. 

Ho già illustrato come procedere per risolvere il problema da soli caricando i file .js e .css direttamente nel modello o in un elemento pagina HTML/Javascript. Mi rendo però conto che in molti casi questi passaggi non sono alla portata di tutti gli utenti ma sono accessibili solo ai più esperti. Nei limiti del possibile quindi quando un widget non più funzionante sia particolarmente interessante cercherò di ripubblicarlo con tali modifiche per renderlo nuovamente fruibile da tutti.

Con queste opzioni di pubblicazione i codici saranno molto più lunghi ma installabili anche su blog con domini personalizzati. In questo post illustrerò l'installazione di uno slideshow di immagini con link a post del nostro sito o anche a pagine esterne. Lo slideshow ha effetti di transizione casuali e lo script è stato pubblicato con licenza MIT dal sito Nivo Slider.  Tale licenza prevede che debba essere lasciato nello script l'informazione di chi sia stato il suo creatore

Nella parte bassa si visualizzano i bottoni per visualizzare lo scorrimento dello slideshow. Se si passa il mouse sulle immagini verranno mostrate le frecce di navigazione per andare avanti o indietro

Per la sua installazione non occorre neppure modificare il modello. Si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e si incolla questo 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:#000;color:#fff;-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">
/*
* jQuery Nivo Slider v2.0
* http://nivo.dev7studios.com
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*//* <![CDATA[ */
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(9($){$.1f.1q=9(1X){b 3=$.2i({},$.1f.1q.2c,1X);I g.E(9(){b 4={f:0,t:\'\',U:0,o:\'\',N:m,1k:m,1N:m};b 5=$(g);5.1S(\'7:4\',4);5.e(\'2h\',\'2g\');5.1n(\'1q\');b d=5.2j();d.E(9(){b j=$(g);b 1p=\'\';6(!j.K(\'B\')){6(j.K(\'a\')){j.1n(\'7-2k\');1p=j}j=j.1g(\'B:1s\')}b 1c=j.w();6(1c==0)1c=j.s(\'w\');b 1d=j.x();6(1d==0)1d=j.s(\'x\');6(1c>5.w()){5.w(1c)}6(1d>5.x()){5.x(1d)}6(1p!=\'\'){1p.e(\'P\',\'1h\')}j.e(\'P\',\'1h\');4.U++});6(3.1a>0){6(3.1a>=4.U)3.1a=4.U-1;4.f=3.1a}6($(d[4.f]).K(\'B\')){4.t=$(d[4.f])}n{4.t=$(d[4.f]).1g(\'B:1s\')}6($(d[4.f]).K(\'a\')){$(d[4.f]).e(\'P\',\'1w\')}5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\');2b(b i=0;i<3.h;i++){b G=X.27(5.w()/3.h);6(i==3.h-1){5.J($(\'<C z="7-c"></C>\').e({21:(G*i)+\'13\',w:(5.w()-(G*i))+\'13\'}))}n{5.J($(\'<C z="7-c"></C>\').e({21:(G*i)+\'13\',w:G+\'13\'}))}}5.J($(\'<C z="7-H"><p></p></C>\').e({P:\'1h\',y:3.1Y}));6(4.t.s(\'16\')!=\'\'){$(\'.7-H p\',5).1y(4.t.s(\'16\'));$(\'.7-H\',5).1x(3.q)}b l=0;6(!3.1i&&d.1j>1){l=1v(9(){F(5,d,3,m)},3.1m)}6(3.T){5.J(\'<C z="7-T"><a z="7-2a">2f</a><a z="7-29">2m</a></C>\');6(3.2d){$(\'.7-T\',5).24();5.25(9(){$(\'.7-T\',5).2l()},9(){$(\'.7-T\',5).24()})}$(\'a.7-2a\',5).1J(\'1I\',9(){6(4.N)I m;S(l);l=\'\';4.f-=2;F(5,d,3,\'1C\')});$(\'a.7-29\',5).1J(\'1I\',9(){6(4.N)I m;S(l);l=\'\';F(5,d,3,\'1A\')})}6(3.M){b 1b=$(\'<C z="7-M"></C>\');5.J(1b);2b(b i=0;i<d.1j;i++){6(3.20){b j=d.1B(i);6(!j.K(\'B\')){j=j.1g(\'B:1s\')}6(3.1Q){1b.J(\'<a z="7-1l" 11="\'+i+\'"><B D="\'+j.s(\'11\')+\'" 28="" /></a>\')}n{1b.J(\'<a z="7-1l" 11="\'+i+\'"><B D="\'+j.s(\'D\').2n(3.1R,3.1P)+\'" 28="" /></a>\')}}n{1b.J(\'<a z="7-1l" 11="\'+i+\'">\'+i+\'</a>\')}}$(\'.7-M a:1B(\'+4.f+\')\',5).1n(\'1o\');$(\'.7-M a\',5).1J(\'1I\',9(){6(4.N)I m;6($(g).2e(\'1o\'))I m;S(l);l=\'\';5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\');4.f=$(g).s(\'11\')-1;F(5,d,3,\'1l\')})}6(3.1M){$(2q).2A(9(1L){6(1L.1Z==\'2C\'){6(4.N)I m;S(l);l=\'\';4.f-=2;F(5,d,3,\'1C\')}6(1L.1Z==\'2D\'){6(4.N)I m;S(l);l=\'\';F(5,d,3,\'1A\')}})}6(3.1T){5.25(9(){4.1k=Q;S(l);l=\'\'},9(){4.1k=m;6(l==\'\'&&!3.1i){l=1v(9(){F(5,d,3,m)},3.1m)}})}5.2E(\'7:Z\',9(){4.N=m;$(d).E(9(){6($(g).K(\'a\')){$(g).e(\'P\',\'1h\')}});6($(d[4.f]).K(\'a\')){$(d[4.f]).e(\'P\',\'1w\')}6(l==\'\'&&!4.1k&&!3.1i){l=1v(9(){F(5,d,3,m)},3.1m)}3.1U.1z(g)})});9 F(5,d,3,19){b 4=5.1S(\'7:4\');6((!4||4.1N)&&!19)I m;3.1W.1z(g);6(!19){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}n{6(19==\'1C\'){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}6(19==\'1A\'){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}}4.f++;6(4.f==4.U){4.f=0;3.1V.1z(g)}6(4.f<0)4.f=(4.U-1);6($(d[4.f]).K(\'B\')){4.t=$(d[4.f])}n{4.t=$(d[4.f]).1g(\'B:1s\')}6(3.M){$(\'.7-M a\',5).2F(\'1o\');$(\'.7-M a:1B(\'+4.f+\')\',5).1n(\'1o\')}6(4.t.s(\'16\')!=\'\'){6($(\'.7-H\',5).e(\'P\')==\'1w\'){$(\'.7-H p\',5).22(3.q,9(){$(g).1y(4.t.s(\'16\'));$(g).1x(3.q)})}n{$(\'.7-H p\',5).1y(4.t.s(\'16\'))}$(\'.7-H\',5).1x(3.q)}n{$(\'.7-H\',5).22(3.q)}b i=0;$(\'.7-c\',5).E(9(){b G=X.27(5.w()/3.h);$(g).e({x:\'O\',y:\'0\',W:\'V(\'+4.t.s(\'D\')+\') R-Y -\'+((G+(i*G))-G)+\'13 0%\'});i++});6(3.k==\'1t\'){b 10=2G 2B("1K","14","1F","17","1E","12","1D","1r");4.o=10[X.26(X.1t()*(10.1j+1))];6(4.o==2y)4.o=\'1r\'}6(3.k.2o(\',\')!=-1){b 10=3.k.2r(\',\');4.o=$.2z(10[X.26(X.1t()*10.1j)])}4.N=Q;6(3.k==\'2p\'||3.k==\'1K\'||4.o==\'1K\'||3.k==\'14\'||4.o==\'14\'){b u=0;b i=0;b h=$(\'.7-c\',5);6(3.k==\'14\'||4.o==\'14\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);c.e(\'1G\',\'O\');6(i==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'2t\'||3.k==\'1F\'||4.o==\'1F\'||3.k==\'17\'||4.o==\'17\'){b u=0;b i=0;b h=$(\'.7-c\',5);6(3.k==\'17\'||4.o==\'17\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);c.e(\'23\',\'O\');6(i==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'1E\'||3.k==\'2u\'||4.o==\'1E\'||3.k==\'12\'||4.o==\'12\'){b u=0;b i=0;b v=0;b h=$(\'.7-c\',5);6(3.k==\'12\'||4.o==\'12\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);6(i==0){c.e(\'1G\',\'O\');i++}n{c.e(\'23\',\'O\');i=0}6(v==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;v++})}n 6(3.k==\'1D\'||4.o==\'1D\'){b u=0;b i=0;$(\'.7-c\',5).E(9(){b c=$(g);b 1H=c.w();c.e({1G:\'O\',x:\'r%\',w:\'O\'});6(i==3.h-1){L(9(){c.A({w:1H,y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({w:1H,y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'1r\'||4.o==\'1r\'){b i=0;$(\'.7-c\',5).E(9(){$(g).e(\'x\',\'r%\');6(i==3.h-1){$(g).A({y:\'1.0\'},(3.q*2),\'\',9(){5.18(\'7:Z\')})}n{$(g).A({y:\'1.0\'},(3.q*2))}i++})}}};$.1f.1q.2c={k:\'1t\',h:15,q:2x,1m:2w,1a:0,T:Q,2d:Q,M:Q,20:m,1Q:m,1R:\'.1O\',1P:\'2v.1O\',1M:Q,1T:Q,1i:m,1Y:0.8,1W:9(){},1U:9(){},1V:9(){}};$.1f.1e=[].1e})(2s);',62,167,'|||settings|vars|slider|if|nivo||function||var|slice|kids|css|currentSlide|this|slices||child|effect|timer|false|else|randAnim||animSpeed|100|attr|currentImage|timeBuff||width|height|opacity|class|animate|img|div|src|each|nivoRun|sliceWidth|caption|return|append|is|setTimeout|controlNav|running|0px|display|true|no|clearInterval|directionNav|totalSlides|url|background|Math|repeat|animFinished|anims|rel|sliceUpDownLeft|px|sliceDownLeft||title|sliceUpLeft|trigger|nudge|startSlide|nivoControl|childWidth|childHeight|reverse|fn|find|none|manualAdvance|length|paused|control|pauseTime|addClass|active|link|nivoSlider|fade|first|random|50|setInterval|block|fadeIn|html|call|next|eq|prev|fold|sliceUpDown|sliceUpRight|top|origWidth|click|live|sliceDownRight|event|keyboardNav|stop|jpg|controlNavThumbsReplace|controlNavThumbsFromRel|controlNavThumbsSearch|data|pauseOnHover|afterChange|slideshowEnd|beforeChange|options|captionOpacity|keyCode|controlNavThumbs|left|fadeOut|bottom|hide|hover|floor|round|alt|nextNav|prevNav|for|defaults|directionNavHide|hasClass|Prev|relative|position|extend|children|imageLink|show|Next|replace|indexOf|sliceDown|window|split|jQuery|sliceUp|sliceUpDownRight|_thumb|3000|500|undefined|trim|keypress|Array|37|39|bind|removeClass|new'.split('|'),0,{}))
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="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX0w7KiFf6OiXxaG50xzgZPyk7AoPTa6M8ILxy5EWeeG2TU1UIkx8y7gcGgNnte7P8T99bb3sOobmYYVG7N-xP2t8N-wKqjjMHuW3HNhqjoPiucH4jZwK7Wo5aD3uEAhPcLHwZxC5DuH14/s600/natura1.jpg" title="Inserisci il Titolo e la Descrizione del post numero 1" alt="tag foto 1"/></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzDgj5c0VOfEqzZrDmL_hXLOagcyLesSjqOrOl1hjHFLmPST-RkGAoWabcmS7dHy04H3RVfOLwgGDyrzMyiH4zEGMK6LLpbCbghcnIAW5TCVg2gM8hrCiFg0LxfD2pkE4Dt6Z1LZbk99hY/s600/natura2.jpg" title="Inserisci il Titolo e la Descrizione del post numero 2" alt="tag foto 2"/></a>
        <a href="#"><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 numero 3" alt="tag foto 3"/></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ONuwgZFtgiVcQHezdJuU_TWPm1lOkiFtd63lkne0dhmXVcOZ0SSFGno3lIvtBoMyme0XiBElSWaGgfpw79L1nEA1c5nPMciwifwK-5l6Wfhk82zxlUCpKMJLUIxWfVNL2suxpiImUsHa/s600/natura4.jpg" title="Inserisci il Titolo e la Descrizione del post numero 4" alt="tag foto 4"/></a>
        <a href="#"><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 numero 5" alt="tag foto 5"/></a>
        <a href="#"><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 numero 6" alt="tag foto 6"/></a>
        <a href="#"><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 numero 7" alt="tag foto 7"/></a>
        <a href="#"><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 numero 8" alt="tag foto 8"/></a>
        <a href="#"><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 numero 9" alt="tag foto 9"/></a>
        <a href="#"><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 numero 10" alt="tag foto 10"/></a>       
    </div>
</div>

quindi si va su Salva. Sempre su Layout si trascina l'elemento pagina nel punto in cui posizionarlo. La posizione più consona è quella subito sopra all'area del post cioè sopra a Post del blog

dopo di che si va su Salva Disposizione. Se al posto di Modifica visualizzate la scritta Undefined rinfrescate la pagina Layout dopo aver salvato le modifiche. Lo slideshow sarà visibile in tutte le pagine del blog. Se lo volessimo mostrare solo nella home page, o escluderlo in altre pagine, dovremo applicare i tag condizionali. A tale scopo è quindi utile dare un titolo al widget in modo da ritrovare il codice nel modello più facilmente. Il titolo potrà essere eliminato in un secondo tempo.

Demo
Clicca qui

PERSONALIZZAZIONI DELLO SLIDESHOW

1. Le dimensioni dello slideshow sono 512 di altezza e 225 di larghezza. Chi le volesse modificare dovrebbe considerare anche le altre dimensioni  
2. Il colore dello sfondo e  del testo della descrizione  sono rispettivamente #000 e #FFF. I meno esperti possono consultare il post sui codici dei colori.
3. pauseTime : 3500 indica il tempo in millisecondi tra una foto e l'altra
4. animSpeed: 1200, è la velocità della animazione
5. startSlide  : 0, significa che la riproduzione inizia dalla prima foto
6. Vanno incollati gli URL diretti alle foto precedentemente caricate su Google Foto
7. Al posto dei cancelletti # vanno incollati gli URL delle pagine collegate
8. Si aggiungono descrizione e nome della foto nei campi dei tag Title e Alt. Il testo del tag title sarà visibile durante la riproduzione dello slideshow.
9. Sostituendo true con false si nasconderà l'elemento a cui si riferisce.