Rieccomi per proporvi un bellissimo e alquanto professionale slideshow da inserire nell'HTML del vostro blog.
Non abbiate assolutamente paura di inserire nuovi codici, perchè basta fare un backup del vostro template e metterete tutto al sicuro!
" 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!
<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>
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.
♦ l'effetto dello slider, anche questo in grassetto, scegliendo un solo effetto o tutti scrivendo 'random'.
collegandolo così ad un vostro post. Se non sapete come fare
.
♦ 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
