Rieccomi per proporvi un bellissimo e alquanto professionale slideshow da inserire nell'HTML del vostro blog.
Qui il DEMO.
Non abbiate assolutamente paura di inserire nuovi codici, perchè basta fare un backup del vostro template e metterete tutto al sicuro!
Perchè ogni tanto lo fate il backup, vero?????
Se non sapete come fare, eccovi il mio tutorial "come fare il backup del tuo blog e non perdere nulla" nel quale vi spiego anche come salvare la parte testuale del vostro blog (post, commenti, ecc...)
Dopo aver messo al sicuro tutto ciò che avete costruito fin'ora, passiamo alla parte...divertente!
Quello che dovete fare è semplicemente copiare il codice qui sotto...
<style type='text/css'>
/* <![CDATA[ */
#lordSlideContainer {position: relative;display: block;text-align:center; margin-bottom:100px;}
#lordNivoSlider {position:relative;width:815px !important;height:302px !important;min-height:310px !important; margin: 30px auto 10px auto;float:none;}
#lordNivoSlider 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:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {display:none;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:8;-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:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzpFwyKddQPSb5Cwkziwe4T8dGmT5GvV3u8yBf4UiT4tum-OoYpg8bMu6zWtaTj7J4QJSonMb1ujMor-YzacO7IFgXMwczGyyo6fixsGfbdHiTy4DxdTeO-HMdh18WAOksWTGo1d2GaeW/s1600/w2bArrows.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:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxiOgebUcxzQe_SFLxkGvbgrPI5U1-KdEIzO5mLVTkq5aKVZtFBze3WopQqNQXGJ9KpO0_MopX0OywcGbAqynRTz60lrBbleYvUEcIt6wpX2XkFilVPsBvGcCyk0XMR_9c81IH0dQ69E1/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/> <script src='http://jj4me.altervista.org/jquery.nivo.slider.pack.js'/> <script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#lordNivoSlider').nivoSlider({
effect: 'fade,fold', // Specify sets like: 'fold,fade,sliceDown,random'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: true, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
/* ]]> */
</script> <div id='lordSlideContainer'><div id='lordNivoSlider'>
<a href=''><img border='0' src='http://images.movieplayer.it/images/2009/12/14/lo-scienziato-flint-lockwood-protagonista-del-film-piovono-polpette-141382.jpg'/></a>
<a href=''><img border='0' src='http://blog.screenweek.it/wp-content/uploads/2013/09/cloudyfood1.jpg'/></a>
<a href=''><img border='0' src='http://images.movieplayer.it/images/2013/12/09/piovono-polpette-2-piovono-marshmallow-per-flint-in-una-scena-294600.jpg'/> </a>
</div></div>
/* <![CDATA[ */
#lordSlideContainer {position: relative;display: block;text-align:center; margin-bottom:100px;}
#lordNivoSlider {position:relative;width:815px !important;height:302px !important;min-height:310px !important; margin: 30px auto 10px auto;float:none;}
#lordNivoSlider 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:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {display:none;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:8;-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:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzpFwyKddQPSb5Cwkziwe4T8dGmT5GvV3u8yBf4UiT4tum-OoYpg8bMu6zWtaTj7J4QJSonMb1ujMor-YzacO7IFgXMwczGyyo6fixsGfbdHiTy4DxdTeO-HMdh18WAOksWTGo1d2GaeW/s1600/w2bArrows.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:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxiOgebUcxzQe_SFLxkGvbgrPI5U1-KdEIzO5mLVTkq5aKVZtFBze3WopQqNQXGJ9KpO0_MopX0OywcGbAqynRTz60lrBbleYvUEcIt6wpX2XkFilVPsBvGcCyk0XMR_9c81IH0dQ69E1/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/> <script src='http://jj4me.altervista.org/jquery.nivo.slider.pack.js'/> <script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#lordNivoSlider').nivoSlider({
effect: 'fade,fold', // Specify sets like: 'fold,fade,sliceDown,random'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: true, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
/* ]]> */
</script> <div id='lordSlideContainer'><div id='lordNivoSlider'>
<a href=''><img border='0' src='http://images.movieplayer.it/images/2009/12/14/lo-scienziato-flint-lockwood-protagonista-del-film-piovono-polpette-141382.jpg'/></a>
<a href=''><img border='0' src='http://blog.screenweek.it/wp-content/uploads/2013/09/cloudyfood1.jpg'/></a>
<a href=''><img border='0' src='http://images.movieplayer.it/images/2013/12/09/piovono-polpette-2-piovono-marshmallow-per-flint-in-una-scena-294600.jpg'/> </a>
</div></div>
...ed incollarlo subito sotto il tag <div class='main-outer'> che trovate all'interno dell'HTML del vostro template.
Se non doveste riuscire a trovarlo, cliccando nella finestra dei codici, premete CTRL+F ed scrivete il tag, poi INVIO e vi si evidenzierà così la riga, facilitandovi la ricerca.
PERSONALIZZAZIONE
Potete personalizzare:
♦ la larghezza dello slideshow, cambiandone il valore in grassetto
♦ l'effetto dello slider, anche questo in grassetto, scegliendo un solo effetto o tutti scrivendo 'random'.
♦ il link dell'immagine href='...' collegandolo così ad un vostro post. Se non sapete come fare guardate qui.
♦ sostuite l'URL dell'immagine che trovate con quello dell'immagine del vostro post.
Se avete domande, dubbi, perchè magari ho scordato qualcosa, commentate pure qui sotto!
Mi farebbe tanto, tanto piacere se voi convideste il post sul vostro social preferito, magari mettendo l'hashtag #socutethings
Baciotti :*
.jpg)
Con questo assolutissimamente 0 problemi! grazie mille! Sei molto brava e le tue spiegazioni chiarissime!
RispondiEliminaGrazie Sara, sei gentilissima ^_^
EliminaCiao,vedo che sei molto brava ... forse tu mi puoi aiutare; ho un blog con template Galauness: http://colazionedajo.blogspot.com/, ho sistemato le icone dei socialnet..ma con l'ultima di pinterest, anche se mi riporta sulla pagina giusta non riesco a personalizzarla con la P e poi vorrei cambiare i colori entrando direttamente in modifica Htlm. Grazie
RispondiEliminaCiao Jolanda!
EliminaAbbiamo lo stesso template :D
Per cambiare l'icona ed inserirne una con la P di pinterest, devi andare a modificare questa immagine http://lh3.googleusercontent.com/-ZNmJ3GyC0w8/UCauR4zdumI/AAAAAAAADsw/an6k7AUCQ3Y/s0/social-media.png
Come potrai notare sono state inserite e salvate tutte insieme in un'unica immagine (poi con un codice danno l'effetto finale che vedi in alto)
Grazie sei molto gentile, ma non so quale con quale http cambiare, ho provato a mettere pinterest al posto di social media ma non funziona, devo studiare ancora dove inserirla. Grazie cmq ... prima o poi ci riuscirò!
EliminaÈ possibile inserirlo in una pagina statica in modo che venga visualizzato solo lì e non in tutte?
RispondiEliminaCiao!
EliminaSì, certo, è possibile. Ti basterà incollare il codice nella modalità HTML della pagina :)
Ciao cara Simona,
RispondiEliminache piacere ritrovarti e poter leggere cose sempre più interessanti
sul tuo ricchissimo e bellissimo blog.
Un bacio
Ciao Simona! Come al solito sei sempre il top! Ascolta, ma se io volessi far diventare questa slideshow una vetrina degli ultimi post inseriti, si può fare? Ma soprattutto è possibile che si aggiorni da sola ogni volta che inserisco un nuovo articolo?
RispondiEliminaGrazie in anticipo!
Ciao Anna, grazie sei gentilissima!!!! ♥
EliminaGuarda giusto in questi giorni sto facendo delle prove con uno script che dà la possibilità di aggiornare la slide in automatico attraverso l'utilizzo delle tag...
Devo giusto capire bene come posizionare i codici e poi ne farò un post ;)
Ciao, prima di tutto complimenti per la chiarezza e semplicità delle spiegazioni. Volevo chiederti quali modifiche dovrei fare al codice, sempre se possibile, per inserire nella slideshow una barra in basso semi trasparente per i titoli descrittivi delle immagini.
RispondiEliminaGrazie in anticipo!
Ciao e grazie per il tuo commento e i tuoi complimenti 🥰
EliminaSfortunatamente questo slide è abbastanza vecchiotto e a quanto pare non funziona molto bene. Mi spiace.