Slideshow personalizzabile di immagini con link ai post.

Slideshow di immagini con link ai post per Blogger e altre pagine web.

Se nel vostro blog avete delle immagini rappresentative di articoli particolarmente interessanti potrebbe essere una buona idea mostrarle in uno slideshow nella parte alta del sito oppure nel footer. Un'altra soluzione potrebbe essere quella di pubblicarle in una pagina statica.

Se si sceglie questa ultima opzione bisogna ricordarsi di pubblicare la pagina da HTML dopo aver incollato il codice senza ritornare su Scrivi. Non si tratta di un gadget che mostra gli ultimi post pubblicati. Per questa funzionalità si può usare il gadget basato su EasySlider. La scelta del widget che vado a illustrare serve per mostrare un estratto di quelli che riteniamo essere i nostri migliori post. Inoltre il codice è installabile in tutte le pagine web che supportano il javascript e non solo nella piattaforma Blogger.

Per l'installazione in un elemento pagina si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito, si incolla questo codice

<script type="text/javascript">
//Larghezza (in pixel)
var sliderwidth="600px"
//Altezza
var sliderheight="150px"
//Velocità (numeri più alti velocità più elevata da 1-10)
var slidespeed=3
//colore di sfondo:
slidebgcolor="#eeeeee"
//URL di immagini e Link di collegamento
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7YZs70EPPgVVbTiuX5MRnnABZ6oF94xwzajjMWwjeV77m8lwLapYwNKaHiBdVv-2ScNwi-ED857y1niw_kluVryLVZHXMxO9QUVW50Y3bz1iCVM0M-I4L4Cgf5YcmKLSxH7gMVyy5hw/s140/ippopotami2.png" border=1></a>'
leftrightslide[1]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuP2mYdtRmMCA938XbAFMUq3qLlqOzCwjtjE4nIvCJbb_qGgOTy4bO-ZoPK3YbTe-1TLktOLvLtijB3UNQw-hnQ0HQ2wjyf-6r3s2x_WvU-eXJxkv_fPn7-eczN-eMAV76rEWTB4s5b2Y/s140/margherita2.png" border=1></a>'
leftrightslide[2]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYzCK-YR9L3cG6Q0FTC8cemvXeum6WmEq-LxjBZs9vCsHmnc1iHUyawBZG2GvllQohKENuWTKbmHp5tedUEJL0JtDKzhbHLFbrFl4ITvo40djWGsyt89Ghh9yPAyKdHIvl_5rDSneckI/s140/pinguini2.png" border=1></a>'
leftrightslide[3]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiTaQjvLTM3lD7JdEF2hMK0cICngplhDl7uyViBhHWMhGYwKcSHO62eLODXvoUjonkkU7v3GCvsuSfe9VH9teldXIs9z4rUZX-xa7HnBRUkeQVQIbuZpqZN4lWHIhyUcARKbSwuaQD4Y/s140/uccello-paradiso2.png" border=1></a>'
leftrightslide[4]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0r8GKPqKgjfBeCOL71UqOrULRt6SxIVAYZLXtasdj47o9yUbxmsTG84mBqvRwEXw3-HOM_l18Opo_KWY3DcLcIIBHWjzUmV8whN7t9NGxwXeJrDivokCAePDSOXU3nG3FJK4nb4kzjI/s140/uccello-pesce2.png" border=1></a>'
leftrightslide[5]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7YZs70EPPgVVbTiuX5MRnnABZ6oF94xwzajjMWwjeV77m8lwLapYwNKaHiBdVv-2ScNwi-ED857y1niw_kluVryLVZHXMxO9QUVW50Y3bz1iCVM0M-I4L4Cgf5YcmKLSxH7gMVyy5hw/s140/ippopotami2.png" border=1></a>'
leftrightslide[6]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuP2mYdtRmMCA938XbAFMUq3qLlqOzCwjtjE4nIvCJbb_qGgOTy4bO-ZoPK3YbTe-1TLktOLvLtijB3UNQw-hnQ0HQ2wjyf-6r3s2x_WvU-eXJxkv_fPn7-eczN-eMAV76rEWTB4s5b2Y/s140/margherita2.png" border=1></a>'
leftrightslide[7]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYzCK-YR9L3cG6Q0FTC8cemvXeum6WmEq-LxjBZs9vCsHmnc1iHUyawBZG2GvllQohKENuWTKbmHp5tedUEJL0JtDKzhbHLFbrFl4ITvo40djWGsyt89Ghh9yPAyKdHIvl_5rDSneckI/s140/pinguini2.png" border=1></a>'
leftrightslide[8]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiTaQjvLTM3lD7JdEF2hMK0cICngplhDl7uyViBhHWMhGYwKcSHO62eLODXvoUjonkkU7v3GCvsuSfe9VH9teldXIs9z4rUZX-xa7HnBRUkeQVQIbuZpqZN4lWHIhyUcARKbSwuaQD4Y/s140/uccello-paradiso2.png" border=1></a>'
leftrightslide[9]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0r8GKPqKgjfBeCOL71UqOrULRt6SxIVAYZLXtasdj47o9yUbxmsTG84mBqvRwEXw3-HOM_l18Opo_KWY3DcLcIIBHWjzUmV8whN7t9NGxwXeJrDivokCAePDSOXU3nG3FJK4nb4kzjI/s140/uccello-pesce2.png" border=1></a>'
//Specify gap between each image (use HTML):
var imagegap=" "
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
////NON OCCORRE MODIIFCARE IL CODICE QUI SOTTO////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</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=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"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(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
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+slideshowgap+"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+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
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='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Si salva e si posiziona l'elemento pagina. Possono essere modificate la larghezza dello slideshow e la sua altezza. Con le impostazioni proposte dal codice le foto scelte sono da 112 pixel di larghezza e 140 pixel di altezza. Ho creato uno slideshow con 10 immagini. Per aggiungerne una 11-esima immagine si deve aggiungere una riga come questa

leftrightslide[10]='<a href="URL_LINK"><img src="URL_IMMAGINE" border=1></a>' 

Per collegare i vari post vanno messi i loro indirizzi al posto di URL_LINK. Lo slideshow avrà una velocità di scorrimento personalizzabile e cesserà lo scorrimento al passaggio del cursore

Demo
Clicca qui

La Demo è stata installata in una pagina statica.