Slideshow degli Ultimi Post con immagini e bottoni di navigazione.

Slideshow orizzontale degli Ultimi Articoli per Blogger con visualizzazione del riassunto e effetto trasparenza.

Aggiornamento

I widget visualizzati sotto forma di slideshow piacciono moltissimo soprattutto alle blogger donne ma anche gli uomini non li disdegnano affatto. Ci sono essenzialmente due diversi tipi di gadget per slideshow. Quelli che mostrano le immagini di alcuni post con i relativi link che si vogliono tenere sempre in primo piano e quelli che invece si aggiornano con nuovi contenuti tutte le volte che ci sono nuove pubblicazioni. Questi ultimi vengono chiamati anche Content Sliders.

Chi ha un blog su Wordpress ha l'imbarazzo della scelta tra una grande quantità di plugin a disposizione. La maggior parte di questi sono creati utilizzando la libreria JQuery. Per gli utenti di Blogger bisogna invece trovare il codice adatto da incollare nel modello e nell'elemento HTML/Javascript.

Vado adesso a illustrare uno slideshow che mostra automaticamente gli Ultimi Articoli pubblicati e che è visibile con Chrome, Firefox, Opera e Internet Explorer 9. Il titolo del post sarà mostrato in un box scuro con effetto trasparenza e il suo colore sarà ereditato dal colore del titolo dei widget del blog in cui viene installato. Tale box sarà visibile in alto a destra della prima immagine inserita nell'articolo

Sono anche presenti due frecce di navigazione per spostarsi manualmente nei vari post. Cliccando sull'immagine ovviamente si aprirà l'articolo corrispondente. Di default ci sarà una riproduzione automatica con scorrimento degli ultimi post pubblicati

Andate su Modello > Backup/Ripristino e salvate il modello completo per sicurezza se le modifiche non andassero a buon fine. Ritornate su Modello > Modifica HTML > Procedi e cercate la riga

]]></b:skin>

Si tratta della fine dei CSS del template. Subito sopra incollate questo codice

/* EasySlider for Blogger Start - by http://www.ideepercomputeredinternet.com */
#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}
#slider {
    height: 360px;
    left: 35px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}
.slide-desc {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyeG_shgL-ZccgGeRpsKEtwRZFD07l8de4tBTvVuAoLZhd6zav7jW_rAsjOpf3hdF40iK8Mb3Hf2nXV_QfafsE2BMnJjtSXPFhyphenhyphenu_Ee2Jz20Ohd7pkIJCu_5-PWyFOq4RCXOwx7OaPb-o/s5/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}
.slide-desc h2 {
    display: block;
}
.crosscol .widget-content {
    position: relative;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#slider2 {
    margin-top: 1em;
}
#slider li, #slider2 li {
    width: 480px; /* Larghezza e Altezza Area Widget */    height: 360px;
    overflow: hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}
#nextBtn, #slider1next {
    left: 520px !important; /* Posizionamento frecce */}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 175px;
    width: 30px;
    z-index: 1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrcszqXMhyphenhyphenEo1gKj8aVr5xrj6NJ0Adp3Cqb6DPkSH4TjYiOZA87bRkz_aS1yhyZBLtOuKgJrwbxAhOile8mpir-I9177gS5bt7CwqXmDUHUj_NWvM2l0Zs-4BKjbEnbJ_3TJkF24Dz0c/s77/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcqym2FPDA0_oQ9ppSnXE9uf5vI_ssfKD9FPlOJ4jFaqt7L1EmuNXIvG501lv81k9OH5Cw6RfMTeCuBxmZyO1Gp_FSCFYsJZfzFArDI5lbMy72s6R1m9pY0IW2R6SzptcslmDiU7FPPgU/s77/next.png) no-repeat 0 0;
}  
/* EasySlider for Blogger End */

Le personalizzazioni che si possono fare sono molte. Ne elenco qualcuna:

1. La larghezza e l'altezza del widget (480 e 360 pixel)
2. La posizione verticale delle frecce di navigazione top: 175px;
3. Lo sfondo trasparente dell'incipit del testo che è dato dall'immagine il cui URL è in blu
4. Gli URL delle altre immagini in viola sono le due frecce di navigazione
5. Il posizionamento delle frecce di navigazione in orizzontale left: 35px;

Si cerca adesso la riga </body> e, subito sopra, si incolla quest'altro codice

<!-- EasySlider for Blogger Start - by http://www.ideepercomputeredinternet.com -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='//googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/eS.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<!-- EasySlider for Blogger End -->

Finalmente si salva il modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla quest'ultimo codice

<div id="slider">
<script style="text/javascript" src="//googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/eS2.js"></script>
<script style="text/javascript">
var numposts_gal = 8;
var numchars_gal = 180;
var random_posts = false;
</script>
<script src="http://design-prova.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=9999"></script>
</div>

dove devono essere personalizzati i seguenti parametri:

1. Il numero di articoli da mostrare -  var numposts_gal = 8;
2. Il numero di caratteri del riassunto del post - var numchars_gal = 180;
3. Per mostrare articoli a caso sostituire true a false in var random_posts
4. Sostituire l'URL del vostro blog a quello colorato di rosso.
5. L'immagine di default che compare quando non ce ne sono nel post può essere modificata scaricando il file .js colorato di blu e inserendovi l''URL di un'altra immagine. Tale javascript dovrà poi essere caricato su Google Code, Google Sites o DropBox.

Si va su Salva e si posiziona il widget a piacere con l'ausilio del cursore. Se si vuole mostrare solo in un post, solo in homepage o in una pagina statica bisogna usare i tag condizionali da incollare all'inizio e alla fine del secondo codice e mettendoli anche nel modello come illustrato nel post appena linkato.

Fonti| Plugin EasySlider di CSS Globe, script di Abu Farhan e la grafica è di Dante Araujo.