In realtà non si tratta neppure di uno slideshow ma di una rotazione di articoli con effetto slide. Come è mia abitudine ho pubblicato una
Il gadget è visibile nella sidebar in alto a destra e mostra a rotazione gli articoli linkati con effetto scorrimento
![slideshow miniature blogger slideshow miniature blogger](http://lh3.ggpht.com/_nT13UtBmmiU/TVqaRiNaFDI/AAAAAAAAR8U/1HtSgN4ghVo/slideshow%20miniature%20blogger%5B3%5D.jpg?imgmax=800)
E' visibile la scritta Leggere tutto… per aprire l'articolo collegato. Può essere utilizzato pe richiamare alcuni post del blog che vogliamo porre all'evidenza dei lettori e dei motori di ricerca. Ricordo che ai fini SEO è particolarmente importante linkare un post in Home Page per favorirlo nel posizionamento. L'installazione segue i soliti canoni. Si va su Design > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla questo codice
<!--Galleria Slideshow Inizio-->
<style type='text/css'>
#thumbslide { width: 200px; height: 220px; border: 1px solid #dddddd; background-color: #ffffff; }
#thumbslide a {margin-right:6px; background: #CCCCCC; color:#333333;
float:right; font-size:12px; margin-top:6px; padding:2px;
}
#thumbslide a:hover {text-decoration: none; background: #C4C4C4;}
#thumbslide div { color:#333333; font-size:12px; height:210px; padding:8px; text-align:left; width:190px; margin-top:0px; font-family:Arial,helvetica,sans-serif;}
thumbtitle{font-family:Arial,helvetica,sans-serif; font-size:13px; font-weight: bold;}
#thumbslide div img { background:#FFFFFF; border:1px solid #F4F4F4; float:left;
height:80px; margin:2px 8px 0 0; padding:3px; width:80px;}
#IPCEIbck{background: #f2f2f2; padding-left: 4px; width: 80px;
#thumbslide div { top: 0; left: 0 }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js' type='text/javascript'/>
<script type='text/javascript'>
$('#thumbslide').cycle({
fx: 'scrollLeft',
timeout: 6000,
delay: -3000
});
</script>
<!--Galleria Slideshow Fine - www.ideepercomputeredinternet.com-->
e si Salva il modello. I parametri evidenziati di rosso possono essere personalizzati in funzione del layout del blog e dei nostri gusti personali. Non sto ad analizzare ogni singola possibile modifica, ricordo solo il significato di alcuni parametri e attributi<style type='text/css'>
#thumbslide { width: 200px; height: 220px; border: 1px solid #dddddd; background-color: #ffffff; }
#thumbslide a {margin-right:6px; background: #CCCCCC; color:#333333;
float:right; font-size:12px; margin-top:6px; padding:2px;
}
#thumbslide a:hover {text-decoration: none; background: #C4C4C4;}
#thumbslide div { color:#333333; font-size:12px; height:210px; padding:8px; text-align:left; width:190px; margin-top:0px; font-family:Arial,helvetica,sans-serif;}
thumbtitle{font-family:Arial,helvetica,sans-serif; font-size:13px; font-weight: bold;}
#thumbslide div img { background:#FFFFFF; border:1px solid #F4F4F4; float:left;
height:80px; margin:2px 8px 0 0; padding:3px; width:80px;}
#IPCEIbck{background: #f2f2f2; padding-left: 4px; width: 80px;
#thumbslide div { top: 0; left: 0 }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js' type='text/javascript'/>
<script type='text/javascript'>
$('#thumbslide').cycle({
fx: 'scrollLeft',
timeout: 6000,
delay: -3000
});
</script>
<!--Galleria Slideshow Fine - www.ideepercomputeredinternet.com-->
- width è la larghezza mentre height è l'altezza. Il loro valore si misura in pixel (px) come lo spessore dei bordi (border)
- #thumbslide a { rappresenta lo stile della parte interna dell'elemento mentre #thumbslide { quello della parte esterna. #thumbslide a:hover { denota lo stile quando viene puntato con il mouse.
- I colori sono rappresentati da codici esadecimali come questo #F4F4F4; e possono essere variati a piacere. Si possono usare anche i loro nomi in lingua inglese; background rappresenta lo sfondo dell'elemento
- margin e padding sono la distanza rispettivamente esterna e interna cui sono vincolati gli elementi. Se ci sono più numeri, il primo rappresenta la distanza della parte alta quindi, gli altri, la distanza delle altre direzioni in senso orario
- family-font sono le famiglie di caratteri mentre font-size la loro dimensione sempre in pixel.
- solid rappresenta lo stile del bordo
Per l'inserimento del widget vero e proprio si va su Design > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla il seguente codice
<div id="thumbslide"><div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<!-- Tutti gli altri post che vogliamo -->
</div><div id="IPCEIbck"><a href="http://goo.gl/MwGeE"><img src="http://goo.gl/LKyZA" /></a></div>
dove si inseriscono i dati delle miniature e dei post che vogliamo visualizzare con questo meccanismo:<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<!-- Tutti gli altri post che vogliamo -->
</div><div id="IPCEIbck"><a href="http://goo.gl/MwGeE"><img src="http://goo.gl/LKyZA" /></a></div>
- In URL IMMAGINE si incollano gli URL delle immagini che abbiano precedentemente caricato su Picasa, SkyDrive o DropBox
- In TITOLO POST mettiamo il titolo dell'articolo mentre in RIASSUNTO inseriamo poche righe di sommario. Non può essere troppo lungo e in ogni caso dipende dalle dimensioni che abbiamo scelto per il widget
- In URL ARTICOLO mettiamo l'indirizzo del post che vogliamo linkare
- Leggi tutto… può essere sostituito da una espressione analoga
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
sempre però prima della linea finale </div><div id="IPCEIbck"><a href="http…
uff una cosa del genere ma a miniature affiancate sarebbe perfetta per me :)
RispondiEliminaCome direbbe Galeazzi: sei veramente mitico. Solo che ci fai venire voglia di cambiare spesso look al blog!!!!
RispondiElimina@Dea
RispondiEliminaIl widget dello slideshow orizzontale non è ancora disponibile. Se qualcuno in qualche parte del mondo riesce a realizzarlo credo che lo verrò a sapere e lo riproporrò. Per adesso questo passa il convento...
@Stefano
Non esageriamo... anche se ho colto l'ironia :)
Interessante questo widget, penserò se inserirlo anche io. Non sono molto brava con i codici html, tutt'altro. Grazie per l'articolo.
RispondiEliminaCiao Parsifal, magari l'ideale sarebbe uno slideshow orizzontale delle news come quello presente sulla homepage di libero...per te nulla è impossibile...;)
RispondiEliminaIl widget è ok, ma ha un problemino.
RispondiEliminaQuando si entra nella pagina questo si apre a rilento, mostrando tutti gli articoli inseriti in verticale... guarda tu stesso. Grazie
http://www.tifosointerista.com/
@Admin Inter
RispondiEliminaMi sembra tutto OK. La lentezza è fisiologica nelle personalizzazioni di questo genere e dipende anche dagli altri elementi del blog
Come colorare "leggi tutto" il questo Slideshow? Grazie.
RispondiElimina@redazione
RispondiEliminaAdesso mi metti in difficoltà perché non mi ricordo bene. Prova a cambiare i codici CCCCCC, 333333 e f2f2f2.
Ciao
@Tobia Alberti
RispondiEliminaSi può mostrare solo in homepage attraverso l'utilizzo dei tag condizionali
http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html
Scegli l'opzione Solo in Homepage che è la prima riga.
Per la domanda nel secondo commento in linea di massima leggiti il punto secondo di questo post
http://www.ideepercomputeredinternet.com/2011/06/linee-guida-su-come-usare-questo-blog.html
nel concreto però visto che dici che è antiestetico prova a togliere l'ultima riga
<div id="IPCEIbck"><a href="http://goo.gl/MwGeE"><img src="http://goo.gl/LKyZA" /></a></div>
però onestamente non mi ricordo bene.
Deduco che un widget simile, ma in orizzontale ancora non sia stato realizzato, vero?
RispondiElimina@Alfonso Russo
RispondiEliminaEsiste solo questo
http://www.ideepercomputeredinternet.com/2011/05/slideshow-orizzontale-degli-ultimi.html
(ch'io sappia ... )
Signor Ernesto volevo ancora una volta ringraziarla per il suo contributo, non ho mai trovato un Sito che spieghi i procedimenti relativi all'installazione in maniera più chiara .
RispondiEliminaSe il mio sito ha questa veste grafica, il merito è sopratutto suo ( http://ritmonuevoitaly.blogspot.com/ ) non appena terminerò la parte grafica non esiterò a ringraziarla ufficialmente sul mio Blog.
La ringrazio ancora e le lancio una sfida :
data la mia poca dimestichezza con il codice ho provato ad installare questo widget ( http://www.fedeweb.net/tutorial-jquery-pannello-effetto-slide/ ) ma non ci sono riuscito sopratutto a causa della mia ignoranza ma, ritengo, anche delle poca chiarezza nell'esposizione, se lei lo ritiene utile, si potrebbe scrivere un articolo per adattare questo effetto a Blogger ?
La ringrazio ancora
Piero
Buongiorno Ernesto, come posso fare per fare in modo che quando cliccano su continua a leggere si apra un altra finestra?
RispondiEliminaGrazie mille sei fantastico!!
@# Questo è difficile farlo e poi non mi sembra neppure utile
EliminaOK, era un pensiero... grazie del consiglio :)
EliminaE invece per differenziare la grandezza dei caratteri del titolo e descrizione, come si fa?
RispondiElimina@# I tag che devi modificare sono
Eliminafont-size:12px; e
font-size:13px;
Il 13 pixel si riferisce al titolo
Scusa Ernesto se ti stresso, siccome mi piace moltissimo questo widget...ho provato a cambiare il colore e ho visto che cambiano tutti e due, non è possibile cambiare il colore differente per il titolo e per la descrizione? fare in grassetto il titolo?
EliminaGrazie in anticipo
@# Il grassetto lo puoi inserire con questo tag
Eliminafont-weight:bold;
ma nel titolo c'è già. Lo puoi mettere anche nella descrizione incollandolo dopo
font-size:12px;
Anche i colori possono essere cambiati. Devi modificare color:#333333; mentre per il titolo puoi inserire color:#003366; o altro colore dopo font-family:Arial,helvetica,sans-serif;
Però questi parametri vengono in genere anche ereditati dal modello e quindi talvolta non prendono. Puoi ovviare inserendo i colori in questo modo color:#003366 !important;
Perfetto!!!! Sei bravissimo!!!
EliminaSenti, qualche giorno fa ho fatto una modifica al mio sito con un tuo "effetto speciale", cioè quello dei post infiniti o pagine infinite, per intenderci praticamente quando scendi i post escono sempre e non terminano mai. Siccome sto registrando il blog al tribunale come testata giornalistica, voglio togliere quella modifica ma non riesco a ritrovare il tuo post dove c'è il codice. Mi puoi aiutare?
Grazie
Daniela
@# http://www.ideepercomputeredinternet.com/2013/02/infinite-scrolling.html
EliminaCiao Ernesto, ti chiedo una cortesia, aiutami ti prego :(
RispondiEliminaHo messo il codice in un widget con dimensioni maggiori, 300X..
Per allargare i margini riesco modificando i valori #thumbslide { width: 200px; height: 220px; border: 1px solid #dddddd; background-color: #ffffff; }
Ma il testo non riesco a "allargarlo, cioè rimane come se lo spazio fosse ridotto. Quali valori devo modificare?
Dany
Fatto, scusami ci sono riuscita.
RispondiEliminaGrazieeeeeeee :-)
Invece mi interesserebbe capire come posso diminuire lo stazio che c'è tra il titolo e la descrizione...
RispondiEliminaDany
@# Prova a diminuire i valori di margin-top:...
EliminaOK, grazie
EliminaNon funziona Ernesto :(
Elimina