Widget di uno slideshow orizzontale con link alle pagine del blog.

In ogni blog ci sono quelli che vengono definiti gli articoli pilastro cioè quei post che caratterizzano il sito per la loro autorità, per i commenti o per i feedback che hanno ricevuto. Il gadget dei Post più popolari per Blogger presenta già gli articoli che ricevono più visite ma non è detto che questi siano quelli che riteniamo più importanti. Anzi spesso capita che i post più visitati non siano quelli cui siamo più affezionati e che riteniamo i più validi tra quelli pubblicati. Vado a presentare un widget relativo a uno slideshow che mostra una selezione dei nostri post migliori o una scelta delle etichette più interessanti. Per ciascuna pagina dobbiamo prima selezionare una immagine che la caratterizzi e dobbiamo fare in modo che quest'ultime abbiano all'incirca le stesse dimensioni. Il titolo del post corrispondente sarà visibile quando la miniatura sarà puntata dal mouse.

• Demo del widget dello slideshow di miniature con link -

L'aspetto del gadget potrà essere simile a questo

L'installazione del widget non presenta difficoltà ma è soltanto un po' laboriosa per quanto riguarda la scelta delle immagini, il loro ridimensionamento, l'inserimento di link e titoli dei collegamenti. Andate su Design > Aggiungi un gadget > HTML/Javascript e incollate questo codice

<!--SLIDESHOW MINIATURE INIZIO-->
<script type="text/javascript">
 
    var galleryspeed=2 
  
    var galleryanchor="620px"
 
    var galleryalt="115px"
 
    galleryback="#000000"
 
    var slidespace=5
    var imagespace=""
    var galleryimage=new Array()
    var endphoto=''
 
    galleryimage[0]='<a href="http://www.ideepercomputeredinternet.com/search/label/add-on" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlToBUNUX-mvOXP_3IsTcjS4dgGDJUI6xxW020iGMXr4wJ4yUBGYPvjDWoB2k0z3Z-n5jUSavVynv9lOZPR8XJxhXRw-HyXaxI1ICA7lTi2IaCmdOE50lPviQJu5ayoe2Bs8ClHuzbwhdO/" title="post con etichetta add-on" alt="Titolo Miniatura"></a>'
 
    galleryimage[1]='<a href="http://www.ideepercomputeredinternet.com/search/label/annunci" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-IDntHKnuHACWbZW0-eW0ckeRAI3x7QB9QS8-14jPcthOk9hUBPOHRRCHHdvtPHeSr65OdthRKQx9snc3K_ZhN_Hwp2L1hr_pGbHrFGyNyMHOl3xtOFxu7CMOsvVYUZh4o4ZqvjQsFe-/" title="post con etichetta annunci" alt="Titolo Miniatura"></a>'
 
    galleryimage[2]='<a href="http://www.ideepercomputeredinternet.com/search/label/email" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZk0aVsq66SZNutpUUfLkYOMVKtdLv5TAVgQa2VOIvJuJwvugvvgqXcV8eeWBrx0ykwE9v6sl73veDhmUPfV59-v-FLx2sYuLyWIJuw9pUurSwvCQpBdN9RA48hAlVLp79YXgsUuzIKLtT/" title="post con etichetta email" alt="Titolo Miniatura"></a>'
 
    galleryimage[3]='<a href="http://www.ideepercomputeredinternet.com/search/label/twitter" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_36rW8Jc7OWzVVanYsC7bmQtuleHN3yIBWeaPxVLGwiovT8zZyBCaZ1Rz5afKuuxndRanu2BYF_Lq58MrmN39HOSivJtb181OhGfvOm5sfaKbTcrAZE2AClx5OuTU4PLIq9B4wldA2VYs/" title="post con etichetta twitter" alt="Titolo Miniatura"></a>'
 
    galleryimage[4]='<a href="http://www.ideepercomputeredinternet.com/search/label/immagini" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx1amvYn-uAE3D6brRBr-x4nSgwNyjIW1xGIrMfgxUTQM1OKZm5npF5qIbvJXddyhclS34tdZfB-iZCQvJDHNv5E6WY0dtYJZo-Ue-rjkbviQ0HuvGIcSUc8-inHAdqVZWgwABxMytGYWk/" title="post con etichetta immagini" alt="Titolo Miniatura"></a>'
 
    var copyspeed=galleryspeed

  //Non modificare nulla nella parte sottostante

    galleryimage='<nobr>'+galleryimage.join(imagespace)+'</nobr>'
    var iedom=document.all||document.getElementById
    if (iedom)
    document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+galleryimage+'</span>')
    var actualwidth=''
    var cross_slide, ns_slide
 
    function fillup(){
    if (iedom){
    cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
    cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
    cross_slide.innerHTML=cross_slide2.innerHTML=galleryimage
    actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
    cross_slide2.style.left=actualwidth+slidespace+"px"
    }
    else if (document.layers){
    ns_slide=document.ns_slidemenu.document.ns_slidemenu2
    ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
    ns_slide.document.write(galleryimage)
    ns_slide.document.close()
    actualwidth=ns_slide.document.width
    ns_slide2.left=actualwidth+slidespace
    ns_slide2.document.write(galleryimage)
    ns_slide2.document.close()
    }
    lefttime=setInterval("slideleft()",30)
    }
    window.onload=fillup
 
    function slideleft(){
    if (iedom){
    if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
    cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
    else
    cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slidespace+"px"
 
    if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
    cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
    else
    cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slidespace+"px"
 
    }
    else if (document.layers){
    if (ns_slide.left>(actualwidth*(-1)+8))
    ns_slide.left-=copyspeed
    else
    ns_slide.left=ns_slide2.left+actualwidth+slidespace
 
    if (ns_slide2.left>(actualwidth*(-1)+8))
    ns_slide2.left-=copyspeed
    else
    ns_slide2.left=ns_slide.left+actualwidth+slidespace
    }
    }
    if (iedom||document.layers){
    with (document){
    document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
    if (iedom){
    write('<div style="position:relative;width:'+galleryanchor+';height:'+galleryalt+';overflow:hidden">')
    write('<div style="position:absolute;width:'+galleryanchor+';height:'+galleryalt+';background-color:'+galleryback+'" onmouseover="copyspeed=0" onmouseout="copyspeed=galleryspeed">')
    write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
    write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
    write('</div></div>')
    }
    else if (document.layers){
    write('<ilayer width="+galleryanchor+" height="+galleryalt+" name="ns_slidemenu" bgcolor="+galleryback+">')
    write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=galleryspeed" name="ns_slidemenu2"></layer>')
    write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=galleryspeed" name="ns_slidemenu3"></layer>')
    write('</ilayer>')
    }
    document.write('</td></table>')
    }
    }
    </script>
  <noscript><a href='http://goo.gl/D68wy' target='_blank'>Slideshow Widget</a></noscript>
<!--SLIDESHOW MINIATURE  FINE - www.ideepercomputeredinternet.com-->

Le personalizzazioni riguardano i parametri evidenziati in rosso e in viola:

1. Gli URL dei collegamenti ai post o alle etichette vanno inseriti nei tag a href="
2. Gli URL delle immagini che sono state precedentemente caricate su hosting come Picasa, SkyDrive o DropBox e che vanno dopo il tag src="
3. var galleryspeed=1 rappresenta la velocità del movimento. Aumentando il numero aumenta la velocità
4. var galleryanchor="620px" è la larghezza del widget e può essere calibrata secondo il nostro layout
5. var galleryalt="115px" rappresenta l'altezza del widget e deve essere inserita in funzione dell'altezza delle miniature. Ho utilizzato immagini di altezza di 113 pixel ed è per questo che ho messo 115px in questo parametro
6. galleryback="#000000" è il colore di sfondo che si vede nel caso le miniature non siano tutte perfettamente della stessa altezza
7. Il tag Title rappresenta il titolo del collegamento ed è il testo che viene visualizzato quando si punta una singola miniatura con il mouse
8. IL tag Alt, ovvero il testo alternativo, serve ai fini SEO e mostra la scritta che visualizza il visitatore se ha un browser che non riesce a aprire l'immagine
9. Si possono inserire tutte le immagini con link che vogliamo con la seguente sintassi
   galleryimage[X]='<a href="URL COLLEGAMENTO" target="blank"><img border="0" src="URL IMMAGINE" title="TITOLO POST" alt="TITOLO IMMAGINE"></a>'
   Dove si sostituisce a X tutti i numeri progressivi (5, 6, 7, ecc), si incollano gli URL del link e della immagine oltre a digitarne titolo e testo alternativo
10. Lo script ha la particolarità che si ferma lo scorrimento quando si punta il widget con il mouse e ricomincia non appena si toglie

Questo gadget è uno sviluppo di uno più semplice che avevo presentato qualche tempo fa e che era uno slideshow basato sul tag marquee. Contrariamente a quel widget, in questo caso non sono presenti spazi vuoti e le miniature appaiono senza soluzione di continuità.