13.12.13

Blog design: inserire uno slideshow semplice nel nostro blog

13.12.13

Nel demo troverai il nuovo slideshow che puoi trovare in questo post! cliccami!!!


Come vi avevo già preannunciato in questo post ho trovato un carinissimo slideshow da inserire facilmente all'interno del nostro blog.

Ho dovuto apportare un bel po' di modifiche per renderlo più... carino e anche per aggiustare qualche errorino che mi dava :)
L'originale è qui, mentre quello modificato da me lo potete vedere in questo demo.
inserire slideshow semplice blogger - Simona S.
Per ottenere lo slideshow bisogna innanzitutto posizionare gli script al punto giusto all'interno del codice del nostro blog.

Niente paura!!! Partite sempre dalla concezione che se ce l'ho fatta io, potete farcela anche voi!!!


Aprite da Modello -> Modifica HTML e incollate sotto <head> queste due righe

<script src='http://code.jquery.com/jquery-latest.min.js'/>
<script src='http://jj4me.altervista.org/slide-js/bjqs-1.3.min.js'/>

Scorrete la pagina fino a trovare il tag di chiusura di 'body', ovvero </body> e incollate subito prima i codici qui sotto.

/***********************************************
* Coding by www.designsimonas.com please do not remove my credits
***********************************************/
<script>
jQuery(document).ready(function($) {

$(&#39;#banner-slide&#39;).bjqs({

height : 300, // altezza dello slideshow
width : 620, // larghezza dello slideshow
animtype : &#39;fade&#39;,
animduration : 450,
animspeed : 5000, // durata dello slideshow in millesimi di secondi
automatic : true,
showcontrols : true,
centercontrols : true,
nexttext : &#39;&#39;,
prevtext : &#39;&#39;,
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally

// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover

// presentational options
usecaptions : true, // show captions for images using the image title tag
randomstart : false, // start slider at random slide
responsive : false // enable responsive capabilities (beta)

});

});
</script>


<script src='http://jj4me.altervista.org/slide-js/libs/jquery.secret-source.min.js'/>

<script>
jQuery(function($) {

$(&#39;.secret-source&#39;).secretSource({
includeTag: false
});

});
</script>
All'interno di questi codici potete fare alcune modifiche, che ho evidenziato con le spiegazioni in italiano.

Passiamo ora agli stili, cioè l'aspetto dello slideshow.

Cercate un posticino fra i codici del CSS per inserire questi:
/* Basic jQuery Slider essential styles */

ul.bjqs {
position:relative;
list-style:none;
padding:0;
margin:0;
overflow:hidden;
display:none;
border:1px solid #ddd;
}
li.bjqs-slide {
position:absolute;
display:none;
}
ul.bjqs-controls {
list-style:none;
margin:0;
padding:0;
z-index:9999;
}
ul.bjqs-controls.v-centered li a {
position:absolute;
}
ul.bjqs-controls.v-centered li.bjqs-next a {
right:-10px;
background: #c0dcda url(http://3.bp.blogspot.com/-_3CkbZ-bNZ0/Uqrrn2xSsWI/AAAAAAAAKpA/V_SLxA-8Y2o/s1600/arr-n.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ul.bjqs-controls.v-centered li.bjqs-prev a {
left:-10px;
background: #c0dcda url(http://3.bp.blogspot.com/-Ts5ONRMhxiE/Uqrrn3IdW8I/AAAAAAAAKo8/skH7B7QBugM/s1600/arr-p.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ol.bjqs-markers{
list-style: none;
padding: 0;
margin: 0;
width:100%;
}
ol.bjqs-markers.h-centered {
text-align: center;
}
ol.bjqs-markers li {
display:inline;
}
ol.bjqs-markers li a {
display:inline-block;
background:#ccc;color:#fff;
padding:5px 10px;
margin:2px 5px;
}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover {
background:#999;
color:#fff;
}
p.bjqs-caption {
display:block;
width:100%;
margin:0;
padding:2%;
position:absolute;
bottom:0;
text-align: center;
background:#555;
color:#fff;
opacity:0.7;
font-size:12px;
text-transform:uppercase;
}
Il background (ossia lo sfondo) che trovate scritto in grassetto è quell'azzurrino dietro le freccine (che sono invece un'immagine): questo background potete cambiarlo, personalizzando il colore a seconda dello stile grafico del vostro blog.
Oppure potete cancellare il background e lasciare/modificare solo la freccina.

Anche gli altri background potete cambiarli, se non vi piace il grigio :)

Ed ora, dopo aver pensato agli script e agli stili, andiamo ad inserire il codice HTML dello slideshow!


Andate in Layout e scegliete il gadget HTML/Javascript e incollate il seguente codice:
<div id="banner-slide">

<ul class="bjqs">

<li><a href='URL-POST'><img src="URL-IMMAGINE" title="" /><p class='bjqs-caption'>INSERISCI IL TESTO O IL TITOLO DEL POST</p></a></li>


</ul>

</div>
<br/><br/><br/>
Copiate e incollate il blocco racchiuso in <li></li> per creare più slide.
Alla fine ho dovuto aggiungere gli spazi <br/> perchè avevo notato che si andava a sovrapporre con il primo post.

PER APPROFONDIRE


  • Se volete eliminare i numeri dei post che compaiono sotto lo slideshow, allora aggiungete display:none; all'interno del blocco appartenente a ol.bjqs-markers.
  • Se volete eliminare le freccine ai lati, fate la stessa cosa ma all'interno dei blocchi appartenenti a ul.bjqs-controls.v-centered li.bjqs-next a e ul.bjqs-controls.v-centered li.bjqs-prev a.
  • Se desiderate che non capaia la descrizione all'interno della striscia grigia, allora vi basterà inserire l'immagine senza alcun testo descrittivo.
  • Se volete cambiare la dimensione dello slideshow, allora dovete modificare i valori di width e height all'interno dello script. Ricordate di creare immagini della stessa dimensione per una migliore visualizzazione.


Spero di non aver scordato nulla, ma se così fosse, o se avete problemi nell'installarlo, potete sempre lasciare un commento qui sotto :)

121 commenti:

  1. Interessante, devo provarlo! Anche eventualmente per un sito. Finora usavo Cycle, che è anch'esso una libreria di Jquery, ma non sempre sono riuscita a lavorarci come volevo. Molto probabilmente per limiti miei, per carità... però proviamo l'alternativa.
    Grazie mille Simona!

    RispondiElimina
    Risposte
    1. Cycle non lo conosco, ma gli darò un'occhiata... questo credimi l'ho semplificato tanto e ora risulta semplicissimo da usare!!!
      Anche le descrizioni delle immagini erano limitate, ma per come le ho scritte io ora si possono scrivere dei poemi (anche se non ce n'è bisogno) :D

      Elimina
  2. Ohhhh, che meraviglia! Bellissimo, grazie Simona!
    Date le mie scarse competenze potrò farlo soltanto quando avrò un'intera settimana di ferie, ma sicuramente prima o poi mi lancerò in questa avventura!

    RispondiElimina
    Risposte
    1. vedrai che sarà semplicissimo, nel caso io sono qua ;)

      Elimina
  3. Ho provato ad inserirlo nel blog per mettere in evidenza alcuni dei post più importanti...beh mi piace davvero :D

    RispondiElimina
    Risposte
    1. È bellissimo, anche le immagini che hai scelto per i post lo sono :)

      Elimina
  4. Mi piace tantissimo! Grazie Simona per il tempo e le energie che hai dedicato al codice per renderlo funzionante! Io non ho mai amato gli slideshow perche' possono rivelarsi instabili a seconda del browser usato dal lettore ma devo dire che come hai semplificato il codice tu mi piace tanto!

    E nel tuo header fa proprio una bella figura quindi tanti complimenti! Ora mi salvo quest'articolo assieme agli ultimi due o tre che mi ero persa perche' ogni tuo post e' un tesoro!

    Buon sabato, Alex

    RispondiElimina
    Risposte
    1. Grazie mille Alex, non sai quanto mi fanno piacere le tue parole *_*

      Elimina
  5. Ciao! Mi hai risolto un problemone :) Io però vorrei togliere i numeri sotto la slideshow...sai come posso fare?

    RispondiElimina
    Risposte
    1. Ciao Lia! Per togliere i numeri devi sostituire, nello script prima della fine del tag 'body', 'true' con 'false' lì dove sta scritto
      showmarkers : ....
      centermarkers : ....
      E' così che ho fatto ;)

      Elimina
  6. Mi piace un sacco, ma nel mio probabilmente sposterebbe troppo in basso la lettura dei contenuti appena si apre la home…ma se funzionasse potrei inserirlo al posto dell'Header del blog…pensi che funzionerebbe?

    RispondiElimina
    Risposte
    1. Beh la grndezza delloslideshow puoi sempre determinarla tu, può essere anche una semplice striscia di massimo 100px di altezza... comunque, sì funzionerebbe lo stesso nell'header, sostituendo il logo :)

      Elimina
  7. Ci sono riuscito ma non mi soddisfa ancora:
    come si fa a ridurre la dimensione del numero di slide sotto lo slideshow in modo autonomo dalla dimensione del testo (ho visto che se aumenti la dimensione del testo dello slide show aumentano anche i numeri)?
    E' possibile invece di visualizzare il numero di slide poterci scrivere qualcosa?
    Come si fa a cambiare la forma/ridurre le dimensioni del quadratino che contiene il numero di slide?
    L'immagine nello slide show non prende tutto lo spazio nello slide show ma è leggermente spostata, ha un bordo a sinistra ed in alto, qual'è la stringa nella quale devo agire per posizionare l'immagine correttamente?

    Grazie

    RispondiElimina
    Risposte
    1. Allora per quanto riguarda la grandezza del font dei numeri, cerca negli stili 'ol.bjqs-markers li ' e inserisci nelle parentesi 'font-size:...px;' prima del 'px' inserisci in numero la grandezza edl font...
      per le immagini, invece ti consiglio come si fa di solito per avere delle immagini perfette (così come faccio io) creale almeno 5px più piccole della misura del container dello slideshow.

      Elimina
    2. Per quanto riguarda la grandezza dei numeri il ridimensionamento sono riuscito a farlo funzionare a metà: solo sul numeretto della slide "attiva" (quella visualizzata al momento), i numeretti delle altre restano non ridimensionati. Eppure font-size=10px l'ho messo ovunque XD

      ol.bjqs-markers.h-centered {
      text-align: center;
      font-size:10px;
      }
      ol.bjqs-markers li {
      display:inline;
      font-size:10px;
      }
      ol.bjqs-markers li a {
      display:inline-block;
      background:#000;color:#fff;
      padding:5px 10px;
      margin:2px 5px;
      font-size:10px;
      }
      ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover {
      background:#fff2cc;
      color:#000;
      font-size:10px;
      }

      Per quanto riguarda l'immagine non è cambiato praticamente nulla facendola più piccola di 5 px. La dimensione del mio box è 1066 x 200, ho fatto dunque le immagini da 1061x195, dovrebbere essere corretto giusto?..e invece resta il solito vistoso bordo a sinistra e a destra di una 30ina buona di px.

      Se volessi avere nello slide show un font dei caratteri diverso da quello del Testo Schede (modificabile da Personalizza>Avanzato>Testo Schede), come devo fare?

      Elimina
    3. Allora, sai dove sta pure il problema? Tu lo hai inserito in Layout, sotto il gadget delle pagine?
      Perchè ti consiglio di inserirlo manualmente, come ho fatto io, direttamente nel codice HTML del tuo template...
      cerca il tag 'div class=main-outer' e subito sotto inserisci il codice dello slideshow...
      prova così e fammi sapere, se dovessi avere ancora problemi, se vuoi, posso modificarlo io per te :)

      Elimina
    4. Sì ho inserito l'ultimo step di codice in Layout con un widget "Configura Java/HTML".
      Ho cercato con CTRL+F ma non trova alcun 'div class=main-outer'

      PS: ho notato che nei tuoi commenti appare il drappetto verdino Author, se volessi inserire qualcosa di simile come si fa?......sono una bella rottura di scatole lo so XD.

      Elimina
    5. figurati non c'è problema :)
      Per l'immagine devi procedere così:
      nel codice HTML, negli stili, troverai un blocco che inizia così:

      /* Comments
      ----------------------------------------------- */

      Subito sotto trovi scritto questo casino di codice:

      .comments .comments-content .icon.blog-author {
      background-repeat: no-repeat;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
      }

      Non spaventarti di metterci mano...
      Ti mostro il mio codice, così ti dico cosa andare a modificare...

      .comments .comments-content .icon.blog-author {
      position:absolute;
      top:-7px;
      right:5px;
      width:17px;
      height:76px;
      background: url(URL_TUA_IMMAGINE) no-repeat top right;
      }

      Una volta creata l'immagine saprai le sue dimensioni, quindi potrai cambiare i valori di width e height.
      La posizione dell'immagine è data nel background (perchè è un'imm. di sfondo), quindi da top right, ossia in alto a destra, e anche da dai valori di top: e right:... tu puoi cambiarli a tuo piacimento :)

      Ovviamente questo mio codice deve andare a sostituire quelle già esistente.

      Elimina
    6. Molto semplice, l'ho testato ed è venuto al primo colpo, grazie mille :)
      ( a proposito come si fa a cambiare il colore dello sfondo della zona commenti, non credo di averlo mai mappato e in Personalizza non mi sembra ci sia la possibilità di farlo, il mio c'ha un coloraccio :\?)

      Continuo ad avere difficoltà con lo slideshow, non riesco proprio a trovare 'div class=main-outer' , probabilmente avendo un diverso template si chiama in un altro modo o che so io.
      In che zona circa dovrebbe trovarsi? Mi daresti altro codice che sta intorno a 'div class=main-outer' , tante volte riesco a pescarlo cercando una linea di codice.
      Grazie

      Elimina
    7. Allora quando vai in 'Modifica HTML' , accanto al tasto 'salva modello' trovi 'vai al widget', cliccaci su e ti viene fuori una lista di tutti gli elementi presenti nel tuo template... clicca su 'pagelist' e ti dovrebbe far arrivare sul blocco delle pagine ceh sta nel div 'tabs'... scorri un po' giù e troverai 'main-outer', che c'è di sicuro perchè l'ho visto nel tuo codice ;)

      Elimina
    8. dimenticavo il background dei commenti (mi stai dando tanti spunti per dei tutorial, grazie :D)...
      inserisci questo codice negli stili:
      .comment {background:#fff;}
      dimmi poi se funziona..

      Elimina
    9. Perfettissimo, trovato subito cercando in 'pagelist', inserito il codice là sotto e con un colpo si è sistemato tutto: l'immagine è andata ok e i numeretti sono tutti della dimensione desiserata.
      Segnalo che ogni volta che si cambia qualcosa sull'HMTL relative a questa porzione di codice (come cambiare le immagini, aggiungere nuove slide) in automatico nella sezione Layout si creano due widget Java/HTML contenenti l'ultima porzione di codice di questo tutorial (quello relativo alle immagini delle slide appunto) ed aggiornando la pagina del blog tornano i difetti di prima (immagine spostata, numeri enormi nel mio caso), per ovviare ciò bisogna andare in Layout e rimuovere questi due widget che blogger ha creato da solo e riaggiornando il blog tutto torna perfetto. Niente di terribile, ma è normale che faccia così?

      Inserito con successo anche la stringa .comment {background:#fff;}..però non ho risolto del tutto il problema, perchè lo sfondo del commento è diventato bianco (grazie al coddice appena inserito) ma la cornicetta del box commenti è rimasta grigio topo (prima dell'inserimento anche lo sfondo commenti era grigio topo http://i39.tinypic.com/5e9y6d.jpg) . Per cambiare anche il box esterno quello come si fa?

      Elimina
    10. Se vuoi cambiare il background a tutto il blocco dei commenti devi modificare il blocco 'comments' con questo codice: .comments {background: #fff; }
      ovviamente con questo ti uscirà bianco, tu poi lo cambi come vuoi :)

      Elimina
  8. Buongiorno, complimenti per il blog.
    Anch'io ho provato a implementare questo slide show ed anche a me aggiungendolo nel codice HTML invece che in Layout migliora da alcuni errori che mi dava; però facendo ciò mi si si è spostato tutto lo slideshow a sinistra (non è più centrato col blog). Come lo sistemo?

    Inoltre è possibile utilizzare questo slideshow in qualche modo all'interno di un post? Perchè avevo provato ad usare quello di Picasa, ma il risultato che dà non mi piace per nulla, questo è decisamente migliore.
    Grazie

    RispondiElimina
    Risposte
    1. Buongiorno e grazie mille per i complimenti :)
      Ho fatto una prova, ma purtroppo non riesce a supportare due slideshows.
      Per centrare invece lo slideshow, devi aggiungere <center>
      prima del'div' di apertura e </center> dopo il 'div' di chiusura dello slideshow... spero di essere stata chiara :)

      Elimina
    2. Risolto, grazie. Era semplicissimo non c'avevo proprio pensato :)
      Peccato per il secondo slide show :(

      Elimina
  9. Sono ancora io :D, domandina:
    questo slide show ha una porzione (di default in basso orizzontale) nella quale scrivere del testo che descriva la locandina attiva. E' possibile far sì che questa "banda testo" sia visibile ("si attivi")solo quando si passa la freccetta del mouse sopra allo slideshow?
    Grazie

    RispondiElimina
    Risposte
    1. Ciao! Certo è possibile :)
      Agli stili, all'ultimo blocco trovi p.bjqs-caption devi aggiungere visibility:hidden; prima della parentesi di chiusura.
      Poi aggiungi questo codice subito sotto:
      li.bjqs-slide:hover p.bjqs-caption {
      visibility:visible;
      }


      Se ci sono problemi fammi sapere ;)

      Elimina
    2. Perfettissimo, fantastica come sempre, funziona splendidamente;)
      Grazie

      Elimina
  10. Complimenti per il blog, sono nuova follower, e vorrei piano piano fare un reistyle del blog.
    Io sono informatica ma di web, html e css so' ben poco. terrò a mente questo post, lo voglio provare?, domandona, ma lo posso mettere nella hone del blog sopra all'elenco dei post? blogger lo permette?
    il mio blog è http://semplicementeoggi.blogspot.it/

    RispondiElimina
    Risposte
    1. ciao Erica, grazie per esserti unita al mio blog ^_^
      Certo che puoi aggiungerlo, nel demo è proprio sopra i post ;)

      Elimina
  11. Mi è sorta una domanda, sarebbe possibile personalizzare lo slideshow per mostrare in automatico i post più popolari o anche quelli meno popolari (che potrebbero prendere più visibilità )? ciao

    RispondiElimina
    Risposte
    1. Purtroppo i link ai post si possono inserire solo manualmente

      Elimina
    2. Uhm...avevo messo un commento ma non lo vedo, chiedo scusa se compare doppio! Dicevo: stavo per fare la stessa domanda...se io volessi mettere lo slide nella sidebar con i 5 post piu letti ? Devo creare le 5 immagini, una per ogni post e caricarle sul sito di hosting, e poi inserire url del post e immagine di riferimento dentro a href='URL-POST'><img src="URL-IMMAGINE" etc etc no ? Non c'e' un modo per farlo come dire...in automatico,giusto ?

      Elimina
    3. Esatto! Ancora non ho trovato come inserirli automaticamente, ma ci "lavorerò" su ;)

      Elimina
    4. Ooook grazie!! Nel frattempo provo a farlo...inizio adesso...addio :DDD

      Elimina
    5. ahahahah 'addio' è bellissima :D

      Elimina
    6. :P e' che lo so, mi ci metto e smetto di fare tutto il resto :D E soprattutto ci sono delle cose che mi danno dei problemi e che ti dovrei chiedere...ma posso stare a rompere tutte le volte che decido di mettere in pratica uno dei tuoi utilissimi tutorial ? :P

      Elimina
    7. ok dai sarò buona....avevo 10 domande/problemi e ne ho risolti 8 da sola, smanazzando html e css. Me ne rimangono 2: vorrei togliere i numeri e mettere una scritta tipo post piu letti o una cosa del genere...qual'e' la parte di codice da andare a modificare? Ho cancellato e annullato varie volte per vedere se indovinavo ma niente :D

      Elimina
    8. Ok, di questo ci vuole per forza una pillola di tutorial :D
      (potrebbe essere una nuova linea da seguire...queste delle pillole :P)
      Invece per il titolo ti basterà inserirlo nel titolo del gadget :D

      Elimina
    9. Ahhhhhhh fatto! :) Evviva la pillola, la aspetto :) Per il discorso del titolo...non farci caso, sono scema :D E' un gadget, e ho gia' cambiato tutti gli altri titoli con un'immagine,giorni fa. Devo fare la stessa cosa....non so perche non mi e' venuto in mente, mi si sara' fritto il cervello a furia di html e css vari :D Grazie dell'aiuto, e' venuto prooooprio carino :) !

      Elimina
    10. Comunque per togliere i numeri (te lo dico in anticipo) devi inserire display:none; negli stili dove trovi scritto ol.bjqs-markers li a al posto di display:inline-block ^_^

      Elimina
  12. Ciao Simona, stavo provando ad inserirlo nel blog. La mia domanda è: quando dici "trovate un posticino nel css cosa intendi di preciso? @_@

    RispondiElimina
    Risposte
    1. Ciao Federica! Qui puoi vedere come trovare lo spazio dove inserire il css:
      guarda qui!

      Elimina
    2. Grazie mille Simona! Appena posso ci dedico un pomeriggio; vediamo che combino ehehe! :3

      Elimina
  13. Rieccomi come previsto! eheh ora che ti ho trovata non mi scappi piu :P e grazie per la costante pazienza... sto provando a mettere lo slideshow... ho inserito tutto il necessario e impostato le dimmensioni 200x200 perchè vorrei metterla nella sidebar di destra ... il problema è che proprio non mi appare :( cosa posso aver sbagliato? ho inserito tutto nel modello HTML tranne l'ultima parte con tutti gli URL che ho messo in un widget che ho posizionato direttamente nella sidebar, potrebbe essere questo l'errore? grazie mille! :) nel frattempo ti posto sulla nostra pagina... non vogliamo essere egoisti e tenerti tutta per noi! ;)

    RispondiElimina
    Risposte
    1. Grazie mille!!! Bellissimo il vostro blog ♥
      Lo slideshow è quello alla fine del blog, esatto?
      Tu comunque hai cambiato le dimensioni nello script? non negli stili

      Elimina
    2. Ma sai che ho notato che non si riescono ad inserire i commenti??? Non avete dato il consenso?
      Comunque la grafica della campagna pubblicitaria è strabellissima!!!!!!!!!!!! *_*

      Elimina
    3. Ciao Simona! grazie :) :) si lo slideshow per ora l ho posizionato li sotto cosi non da fastidio perchè non riesco a metterlo dove vorrei... hai una soluzione per me? cioè come dovrei fare a posizionarlo in formato quadrato in un widget nella sidebar? i commenti li avevo tolti perchè avevo inserito quelli di facebook ma poi visto il problema con la ripetizione dei commenti ho eliminato anche quello in vita di soluzioni definitive...intanto purtroppo non riceviamo molti commenti per cui non è un grave problema per ora ;) purtroppo non sono un genio in html e da sola non riesco a farcela!!

      Elimina
    4. Ho realizzato il video tutorial per il box sotto ogni post, dagli un'occhiata ;)

      Elimina
  14. Perfetto grazie mille!! appena ho un attimo mi ci metto! :) per favore fammi sapere anche se riesci a risolvere l'altro problema (slideshow) perchè non c'è verso... grazie e a presto!

    RispondiElimina
  15. Improvvisamente non mi compare più lo slideshow, non credo di aver cancellato alcuna riga di codice, perchè ho verificato e nel Modifica HTML ci sono tutte le stringhe di questo tutorial.
    Che fare per rintracciare l'errore velocemente?
    Grazie

    RispondiElimina
    Risposte
    1. Hai notato se è da quando hai inserito la finestra popup di facebook che ti dà questo errore?

      Elimina
    2. E' sì il problema è proprio quello, se rimuovo il widget del popup facebook lo slide show torna.
      Non sono compatibili?
      Non c'è un modo per tenere attivi entrambi?

      Elimina
    3. Posso passarti il codice che sto usando io in questo momento e provare a vedere se va bene :)
      inviami un'email così ti rispondo inserendo il codice.

      Elimina
  16. Cara Simona!
    Premetto che sono un preistorico digitale.
    Sto navigando da mesi alla ricerca di una soluzione a questa domanda:
    Si può realizzare all'interno di un singolo post una slideshow in blogspot?
    Non chiedo di realizzare la slideshow come intestazione del blog, ma di dotare ogni post di una slideshow. Al momento so inserire solo foto in sequenza statica, ovvero una sotto l'altra.
    Se puoi darmi qualche indicazione te ne sarei grato.

    RispondiElimina
    Risposte
    1. Scusa se ti rispondo solo ora, ma ti chiedo un paio di giorni di pazienza. Sono influenzata tanto da non riuscire a parlare e a stare davanti al computer...mi spiace ma per darti una risposta corretta devo fare una prova. Comunque da una risposta che avevo dato su mi sa che non è possibile.... perdonami se ti sembro rinco ma tre giorni di febbre sopra i 39 han lasciato il segno -.-

      Elimina
    2. Intanto auguri di veloce miglioramento!
      Ho letto solo dopo il commento precedente. Comunque se non é troppo impegno ti chiederei di valutare se ci fosse comunque una possibilità.
      A presto
      auguroni

      Elimina
    3. Rieccomi, non del tutto in forma, ma eccomi qua :D
      Dunque ho provato, ma confermo...non supporta due slideshow, perchè nel codice è ben definito un 'id' che deve essere unico, di conseguenza anche inserendone due o tre, ne viene visualizzato solo uno... mi spiace

      Elimina
    4. Grazie Simona!
      Allora niente slideshow nei post, pazienza. Grazie 1000 per il tuo aiuto, e complimenti per il blog.
      Ciao
      luigi

      Elimina
  17. Cara Simona,
    ho provato ad inserire lo slideshow e ci sono quasi riuscita, tranne il per fatto che l'immagine all'interno non ricopre perfettamente il riquadro, pur avendo fatto le stesse dimensioni. Come potrei fare? ho sbagliato qualcosa nei passaggi? ti lascio il link del blog così puoi passare per dare un occhiata.... http://ildiariodellamoda1.blogspot.com/
    un grazie anticipato per l'aiuto <3

    RispondiElimina
    Risposte
    1. Ciao Enza, allora per eliminare lo spazio (dovuto ai settaggi del blocco in cui l'hai inserito, che è lo stesso delle pagine) bisogna andare ad eliminare il 'padding', ecco come!
      Inserisci questo codice nel CSS:

      li.bjqs-slide a {padding:0 !important;}

      Aggiorna la pagina, ricaricala (perchè a volte non si vedeno subito i cambiamenti, causa cache) e poi fammi sapere se ha funzionato!

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

      Elimina
    3. Sei un genio grazie mille! ha funzionato perfettamente, in realtà ho un altro piccolo dubbio e spero tu possa aiutarmi... vorrei centrare i titoli dei gadjet nella sidebar e proprio non ci riesco, come potrei fare? E il carattere dei titoli deve per forza essere uguale a quello delle date dei post? cmq grazie sei gentilissima <3

      Elimina
  18. Per la richiesta di centrare i titoli lo già risolta grazie cmq per il disturbo, però vorrei riuscire ad avere più spazio tra il titolo e il widget corrispondente, perchè ora mi si presenta appiccicato come potrei fare?
    spero tu possa rispondermi se non sono di disturbo.... :D

    RispondiElimina
    Risposte
    1. Se vuoi distanziare i gadget, puoi dare un'occhiata qui, e anzichè inserire un valore in negativo lo dai in positivo (in pratica levando solo la meno).
      Se vedi ceh i gadget sono ancora troppo vicini aumenta il valore del numero ;)

      Elimina
    2. no, non è che voglio distanziare i gadget tra di loro ma vorrei distanziare il gadget di google+ dal suo titolo corrispondente spero che mi sia fatta capire, se vuoi dai un occhiata per vedere, perchè il titolo dove ho scritto google+ è troppo attaccata alla sua immagine si potrebbe distanziare o no?
      http://ildiariodellamoda1.blogspot.com/

      Elimina
    3. ok, ora ho capito :)
      aggiungi questo codice al CSS:
      #PlusBadge1 h2 {margin-bottom:15px;}

      Elimina
    4. Sei grande!!! E' proprio ciò che chiedevo grazie mille, ho provato a scriverti nella sezione "proponi un tutorial", ma non mi visualizza il commento. Vorrei aggiungere al mio blog la barra in alto fissa che segue tutto il blog quando scendi (come la tua verde), ma non so proprio come fare potresti aiutarmi? un bacione <3

      Elimina
    5. Grazie Enza ^_^
      Per la barra in alto puoi seguire questo mio tutorial ;)
      PAGINE FISSE IN ALTO

      Elimina
    6. si ero andata già a vedere ma al posto delle pagine vorrei mettere una scrittura come hai fatto tu e il rettangolino cerca nel blog si può fare? come faccio? grazie per la tua pazienza :D

      Elimina
    7. Beh in questo caso allora devi seguire il tutorial nella creazione del 'div' in alto al blog, e poi all'interno crei un altro div di almeno 20/30 px più stretto rispetto alla larghezza dell'intero blog.
      In questo ultimo elemento inserisci ciò che vuoi ;)

      Elimina
    8. Quindi quale tutorial dovrei seguire? perchè è da poco che sto sperimentando i codici e non sono molto brava con queste cose, potresti fare un breve tutorial? sempre se puoi grazie cmq ^-^ :D

      Elimina
    9. Ok, farò un tutorial appositamente per questo ;)

      Elimina
    10. Grazie, ti adoro, sei gentilissima... <3 <3

      Elimina
    11. Appena fai il tutorial puoi mandarmi il link tra questi commenti così vado diretta

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

    RispondiElimina
  20. Simo ho del tempo libero in questi giorni e mi sto dedicando alla nuova grafica del blog... Faccio le prove su un "blog prova" visibile solamente a me prima di metterlo nel mio blog ufficiale... Ho dato un occhiata a tutti i tuoi tutorial sono fantastici, questo lo adoro ma so di già che combinerò pasticci :) ti farò sapere :*
    Ps: un informazione (che non centra con questo tutorial) spesso vedo in alcuni lavori di grafica, degli effetti "a macchia d'acquerello" quale programma potrei utilizzare? immagino photoshop, ma io cerco qualcosa di più semplice... suggerimenti? un bacione e grazie

    RispondiElimina
    Risposte
    1. Ciao Simona, grazie per i complimenti :D :*
      Un programma alternativo a photoshop potrebbe essere GIMP, che ha pure una vasta gamma di 'pennelli' (sono quelli le macchie d'acquerello) da poter recuperare sul web. E' gratuito, è una vita che non lo uso...è stato il mio primo programma di grafica :D

      Elimina
  21. Ciao. Torno all'arrembaggio sempre sullo slideshow XD.
    Visto che ho cambiato la veste grafica del sito e quindi sconvolto anche lo slideshow precedente, volevo sapere i numeri sotto che indicano il numero di "diapositiva" e le freccette come si fanno ad eliminar?
    Grazie

    RispondiElimina
    Risposte
    1. Ciao! Guarda prova prima a cambiare da 'true' a 'false' le opzioni di comando, ovvero queste:
      showcontrols : true,
      showmarkers : true, // Show individual slide markers

      Elimina
    2. Funziona, grazie.
      Ha tolto però solo i numeri ma lo spazio da essi occupato (cioè la distanza fra lo slideshow e il resto del blog che ha sotto) è rimasto invariato, non è diminuito togliendo la visibilità dei numeri. Si può regolare manualmente a piacimento?
      Grazie

      Elimina
  22. Ciao!
    E' molto bello, però come dovrei fare se volessi che automaticamente nello slideshow andassero ad esempio gli ultimi 3 post, senza doverli però inserire manualemnte ogni volta?

    oppure c'è uno slideshow che fa questo "lavoro"?

    Grazie per questo articolo!!! =)

    RispondiElimina
  23. Ciao, come si centra questo slideshow con il blog?Perchè mi viene lievemente spostato a sinistra.
    Inoltre leggo nel codice che ha un effetto fade nella transizione fra una slide e l'altra, si può cambiare con un' altra transizione (ad esempio mettere una Down Up ecc)?
    Grazie

    RispondiElimina
  24. Ciao! Rispondo sia per Fabio Ballati che per I.M. Marche, poiché ahimé la risposta è uguale per entrambe le domande...
    No, questo tipo di slideshow, che ho reperito dal web, ha funzioni abbastanza limitate.
    Ho trovato anche altri tipi dis cript che permettono sia l'inserimento degli ultimi post, sia diversi effetti di transizione, spero e conto di riuscire a soddisfare tutte le richieste a breve, perchè davvero sto accumalandone troppe :(

    RispondiElimina
  25. Ciao simona, ho provato ad inserire lo slideshow nel mio blog di prova ma guarda com'è diventato?? Eppure non ho modificato nulla.. le freccine si sono spostate verso destra, e in più si sono duplicati i numeri verso il basso..

    RispondiElimina
    Risposte
    1. Ciao! Ho visto che lo hai inserito sotto il menu...prova a trascinarlo proprio sopra il gadget del Blog

      Elimina
    2. mmmm, un pò meglio, il problemino dei numeri si è risolto, ma le freccine sono sempre per i fatti loro. Inoltre come posso riuscire a centrare lo slideshow?

      http://polpadigranchioprova.blogspot.it/

      Elimina
  26. Ciao Simona,

    posso chiederti un favore, perché sono giorni che navigo nel buio e magari tu mi potresti aiutare!
    Se io volessi far apparire lo slide esclusivamente nella homepage cosa dovrei fare?

    Perchè ho capito come funziona per i wadget e tutto, ma non so trovare la soluzione a questo!! :)

    Grazie mille anticipatamente, e scusa per il disturbo!
    Ylenia!


    RispondiElimina
    Risposte
    1. Rieccomi! Ho appena risolto, così ti ho tolto anche un impiccio!!
      In realtà è stato più facile del previsto!!

      Grazie comunque per il tutorial dello slide!! Fantastica come sempre :)

      Elimina
  27. Ciao cara ci ho provato ma c'è qualcosa che non va....non vedo l'immagine....dove avrò sbagliato? 8((

    RispondiElimina
    Risposte
    1. ciao! guarda sto per inserire un altro tipo di slideshow, più bello...mi occorre solo un pochino di tempo :D

      Elimina
    2. Simona alla fine ce l'ho fatta....ci ho messo un po' ma fatto!!! Grazie degli utilissimi consigli....
      Aspetto il nuovo slideshow!

      Elimina
  28. Ciao, grazie mille per questo tutorial!
    L'ho messo nel mio blog e mi piace.
    Vorrei solo chiederti un paio di cose:
    1. Se sia possibile cambiare il font nei titoli;
    2. Quando l'ho inserito si è creato parecchio spazio sotto lo slideshow: è possibile ridurlo?
    Grazie mille :)

    RispondiElimina
    Risposte
    1. Ciao Paola, perdonami se rispondo solo ora, non avevo vistoil tuo commento :(
      1. Sì puoi cambiare il font cercando negli stili che hai aggiunto (è l'ultima voce) 'p.bjqs-caption '...aggiungi il CODICE 'font-family:FONT CHE PREFERISCI;'
      2. nel codice dello slideshow, dove inserisci proprio le immagini, trovi alla fine dei tag che indicano proprio un andare a capo ovvero <br> eliminali!

      Elimina
  29. ciao Simona! intanto complimenti per il tuo lavoro, perché i tuoi tutorial e i tuoi consigli sono utilissimi.
    Ho inserito lo slideshow e leggendo tutti i commenti sono già riuscita a risolvere tutti i problemi che incontravo eccetto un paio:
    1- lo vorrei sopra i post anziché centrato come appare ora (io ho inserito i codici direttamente nell'html del modello perché con il gadget l'immagine non era ben centrata nello slider)
    2- quando faccio il refresh della pagina del blog lo slider non sempre si vede
    Grazie per l'aiuto.

    RispondiElimina
    Risposte
    1. Ciao Laura!
      Allora mi sembra che il primo punto tu l'abbia risolto.. invece per il secondo hai ragione!
      Non capisco il perchè... la prima che mi viene in mente è che forse c'è qualche altro script che va in conflitto...

      Elimina
    2. in realtà sono riuscita a cambiare posizione ma lo slider non viene visualizzato correttamente (c'è una line bianca in alto). Per quanto riguarda lo script non saprei proprio come intervenire...non sono molto brava con l'html...

      Elimina
  30. Ma si può rendere visibile solo in homepage? Non riesco a capire come. :(

    RispondiElimina
    Risposte
    1. Sì, si può mettere, ma bisogna inserirlo in un codice, all'interno dell'HTML...bisognerebbe farci un tutorial, perchè non riuscirei a spiegartelo così ;)

      Elimina
  31. E' possibile inserire qualcosa di simile in un post o in una pagina statica, anzichè in home? :)

    RispondiElimina
  32. Aiuto!! è possibile che io non ci riesca??? da me non va!!! il tuo sito è magnifico, l'ho scoperto solo ora e ieri ci ho fatto mezzanotte sopra!! questo tutorial è proprio quello che cercavo... ma da me non funziona!!

    RispondiElimina
  33. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  34. Siiiiiii... non ci posso credere, ce l'ho fatta :-D GRAZIE, il tuo aiuto è preziosissimo :-)

    Vorrei chiederti un'altra cosa, che se non ho guardato male, non hai ancora trattato...
    come posso inserire le social icons e il cerca sopra all'header?

    Grazie ancora!

    RispondiElimina
    Risposte
    1. Ciao Marika! Sono felice che tu ce l'abbia fatta! :D
      Per inserire i social icons sopra l'header, ti basta andare in Modifica HTML e, premendo CTRL+F, cerca il div 'header-wrapper'... subito prima incolli il codice delle icone :)
      Baci ;*

      Elimina
    2. Grazie! Ma non me lo trova, trovo solo 'header-inner'.
      Il codice che inserisco è quello del gadget giusto?

      E per aggiungere anche il cerca?

      Grazie mille! :-)

      Elimina
    3. Ok, dovresti cercare un po' più su di header-inner.

      beh, per la casella di ricerca è un po' diverso, bisogna inserire un form... è più complicato da spiegare in un semplice commento.

      Elimina
  35. Ehm.. Ho provato, ma io non riesco a installarlo..
    Ho seguito passo passo tutto il tuo tutorial ma non ci riesco... :-(

    RispondiElimina
  36. Ciao! Grazie tante per tutti gli aiuti che dai! Qualche tempo fa avevo messo uno slideshow nel mio blog, ma avevo il solito problema di centrarlo e dargli le giuste dimensioni, ho risolto mi pare, copiando un semplice codice CSS in cui aggiustavo altezza e larghezza, tuttavia adesso modificando il blog questi codici si sono cancellati, come posso ricentrarlo?

    RispondiElimina
    Risposte
    1. Lo slideshow è quello dei gadget di blogger, vorrei semplicemente spostarlo più a destra, tempo fa ci ero riuscita con un codice CSS ma adesso non lo ricordo più

      Elimina
  37. Ciao! Io vorrei adattarlo alla sola colonna di sinistra del mio blog. La larghezza totale del blog è 900 px, di cui 600 a sinistra e 300 a destra... Che larghezza devo impostare per le immagini? In teoria 600, ma se voglio un piccolo bordo bianco?
    Grazie!

    RispondiElimina
    Risposte
    1. Il bordo bianco potresti farlo direttamente alle immagini...non so se tu usi un programma di grafica...se invece vuoi fare un bordo attraverso il CSS, e mettiamo che sia di 10px, allora devi impostare la dimensione meno i 10px, ad esempio se l'immagine dello slide è 600*300px tu la farai 590*290px...
      In caso puoi dare un'occhiata anche all'altro slideshow che ho pubblicato QUI.

      Elimina
    2. Alla fine l'ho fatto usando questo e mi piace.
      Però vorrei sistemare una cosa, scusa se te lo linko: http://antigapalavra.blogspot.it/p/home.html
      Al di là del bordino bianco, come faccio a eliminare quello spazio che si crea a sinistra? Pensavo di dover mettere qualche -20px o simili nel margin ma non cambia nulla...

      Elimina
    3. Anche tutto quello spazio che si crea in basso, se possibile.

      Elimina
    4. Le distanze, in questo caso sono dettate dagli stili predefiniti di Blogger...dovrei vedere a quale gadget appartiene (in termini di codici) e dargli nuove indicazioni...
      per lo spazio inferiore ti rimando a questo commento:
      http://www.socutethings.com/2013/12/inserire-uno-slideshow-semplice-nel.html?showComment=1421255441473#c2076452556330397580

      Elimina

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