Pubblicato il 07/10/16 - aggiornato il  | 32 commenti :

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

slideshow-blogger

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

blogger-slideshow-navigazione






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

posizionamento-slideshow

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.


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.


32 commenti :

  1. la sitemap inviata a google ci aiuta a essere più visibili su google nei rezultati? Bisogna inviarla solo una volta nella vita?

    RispondiElimina
    Risposte
    1. Basta inviarla una volta fino a che non si raggiungono 3000 post. Dopo ne va inviata una ogni 150 articoli (Blogger)
      http://www.ideepercomputeredinternet.com/2015/12/sitemap-blogger-search-console-google.html
      @#

      Elimina
    2. molto gentile da parte sua a rendersi cosi disponibile

      Elimina
  2. Buonasera,
    e' possibile eliminare la descrizione dalle foto?

    RispondiElimina
  3. Buongiorno, come faccio a ridurre le slide da 10 a 5? e come lo centro rispetto alla pagina?

    RispondiElimina
    Risposte
    1. Per ridurre le slice d 10 a 5 devi sostituire
      slices : 10, con slices : 5,
      Per centrare al meglio devi cercare di agire sulle dimensioni per renderle compatibili con quelle del layout del tuo sito
      @#

      Elimina
  4. è possibile inserire più slideshow nella stessa pagina, con foto e link differenti? Ho provato a creare due segnaposti sul mio sito, ma fa casino tra i due, come posso fare? Vi ringrazio in anticipo per l'aiuto

    RispondiElimina
  5. In teoria potrebbe anche essere possibile però nel secondo codice si dovrebbe cambiare nome alle function e quindi di conseguenza anche a quella parte del codice che ne riprende il nome.
    C'è però l'altra grande difficoltà che il linguaggio di questo script è avanzato e personalmente non lo padroneggio. Puoi provare a chiedere lumi all'autore della pagina di cui è presente il link a inizio post
    @#

    RispondiElimina
    Risposte
    1. Ho trovato la soluzione, basta copiare il codice in "wordpad" e usare la funzione "sostituisci", andando a sostiture la parola "nivo" con "nivoo" o un'altra parola a vostra scelta.

      Elimina
    2. Sì te lo avevo detto anche io nel commento precedente che si poteva tentare una cosa del genere senza però assicurarti sul risultato. Grazie di aver condiviso la soluzione che hai trovato
      @#

      Elimina
  6. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  7. Salve, ho provato ad inserirlo nella versione dinamica di blogger, ma non me lo fa vedere in home, può spiegarmi come fare? Grazie mille per la disponibilità

    RispondiElimina
  8. Quando provo a modificare le misure, ovviamente cambio le misure delle foto, resta sempre il rettangolo di default. Come mai?

    RispondiElimina
    Risposte
    1. C'è scritto nel punto 1)
      Le dimensioni dello slideshow sono 512 di altezza e 225 di larghezza. Chi le volesse modificare dovrebbe considerare anche le altre dimensioni ...
      e questo vale per tutte le dimensioni che eventualmente debbono essere cambiate in modo coerente
      @#

      Elimina
    2. L'ho fatto. Le ho cambiate. Ma resta tutto uguale. Ho pensato persino che il problema fosse la foto, a tal punto da rimpicciolirma per fare una controprova. Comunque sia, oltre alle misure indicate, per evitare mie sviste, potresti indicarmi gli altri punti che dovrei modificare? Cerco di fare delle prove. Una curisità... Ma non è possibile che nel tempo sia modificato qualcosa del codice? Ho letto che una cosa è di terze parti. Non è che a monte c'è stata una modifica? Grazie

      Elimina
    3. C'è la libreria jQuery come risorsa esterna che ha questo indirizzo
      //ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
      Puoi sostituirlo con l'indirizzo più recente che è questo
      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
      Il problema però è il codice di Nivo Slider che si trova dopo l'attribuzione
      * jQuery Nivo Slider v2.0
      e che utilizza un linguaggio di programmazione che personalmente non padroneggio e che quindi non posso aiutare te a farlo
      @#

      Elimina
  9. Ti faccio un'altra domanda. Se invece voglio mettere due di questi slide uno vicino l'altro, spazio permettendo, cosa devo aggiungere e dove?
    Grazie, sempre della tua disponibilità. ;)

    RispondiElimina
  10. Ho risolto! :D
    Sempre grazie a te. ;)b

    RispondiElimina
  11. Grazie mille, utilissimo come sempre! Volevo chiederti una cosa: come faccio a eliminare completamente i margini bianchi intorno allo slider? Grazie!

    RispondiElimina
    Risposte
    1. Il codice non è mio e utilizza un linguaggio di programmazione che non padroneggio. Ho messo i credit nel post. Non posso aiutarti in modifiche che non siano quelle classiche indicate nell'articolo
      @#

      Elimina
  12. Salve, vorrei inserire uno slider simile in un tema dinamico, però non con post prefissati, bensì con gli ultimi inseriti. Le ho provate tutte. Quello che mi interessa è uno slider con gli ultimi 3/5 post pubblicati. Consigli? Grazie

    RispondiElimina
    Risposte
    1. Non mi occupo neppure più dei Temi Dinamici di Blogger perché è difficilissimo modificarli
      @#

      Elimina
  13. Buon giorno Ernesto,
    purtroppo questo SLIDESHOW non responsive.
    Ne conosci qualcuno?
    Buon lavoro.

    RispondiElimina
    Risposte
    1. No. È molto complicato creare delle Presentazioni di foto Responsive. In rete ho trovato questo codice
      www.bloggerwidgetgenerators.com/2014/06/responsive-slider-widget-for-blogger.html
      che però è del 2014 e che non so se funzionerà
      @#

      Elimina
  14. Ciao Ernesto,
    purtroppo non va bene neanche quello: ha il link di richiamo dello script che non esiste (script src='https://googledrive.com/host/0B-P4_Fs3S76yQ1RVNnl0bVlLMXM' type='text/javascript'/script).
    Ho cambiato in drive.google.com, ma non esiste neanche.
    Sicuramente perché è tutto vecchio?

    RispondiElimina
    Risposte
    1. No. Perché fino a qualche anno fa si poteva usare Google Drive come hosting di file e ottenerne il link diretto cosa che poi Google ha eliminato. Non avevo fatto caso a quella riga ma solo al collegamento a jQuery che è sempre valido altrimenti non te lo avrei neppure indicato
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy