immagin top

6.9.15

Blog design: inserire slideshow più semplice e professionale

6.9.15

 slideshow Simona S.
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("http://3.bp.blogspot.com/-bJzN66mSNNc/T7dSdjkzf3I/AAAAAAAABgI/PlGK0Q8OYeU/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("http://4.bp.blogspot.com/-DEGRTSA4m6A/T7dSenBUBpI/AAAAAAAABgM/EB-Q2htVToI/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 :*


10 commenti:

  1. Con questo assolutissimamente 0 problemi! grazie mille! Sei molto brava e le tue spiegazioni chiarissime!

    RispondiElimina
  2. Ciao,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

    RispondiElimina
    Risposte
    1. Ciao Jolanda!
      Abbiamo 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)

      Elimina
    2. 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
  3. È possibile inserirlo in una pagina statica in modo che venga visualizzato solo lì e non in tutte?

    RispondiElimina
    Risposte
    1. Ciao!
      Sì, certo, è possibile. Ti basterà incollare il codice nella modalità HTML della pagina :)

      Elimina
  4. Ciao cara Simona,
    che piacere ritrovarti e poter leggere cose sempre più interessanti
    sul tuo ricchissimo e bellissimo blog.

    Un bacio

    RispondiElimina
  5. 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?
    Grazie in anticipo!

    RispondiElimina
    Risposte
    1. Ciao Anna, grazie sei gentilissima!!!! ♥
      Guarda 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 ;)

      Elimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*