Slideshow di immagini con link a post o blog amici.

Come installare uno slideshow di immagini con collegamenti a post, blog o affiliazioni pubblicitarie con la descrizione del link personalizzata che viene visualizzata sopra ciascuna foto.

Una delle tematiche più importanti per un blogger è quella della ottimizzazione dello spazio nel layout del sito. Occorre cercare di mostrare il più possibile in uno spazio che è ben delineato. Una delle opzioni più interessanti è rappresentata dagli slideshow che permettono al lettore di visualizzare automaticamente tutta una serie di immagini che riportino a dei post, a dei blog amici ma anche ad altre cose.

È per esempio possibile creare uno slideshow di oggetti presenti su Amazon, su eBay o siti simili con collegamento alla pagina in cui si possano acquistare. Un'altra possibilità di utilizzo è data da affiliazioni pubblicitarie che abbiano delle creatività limitate ad immagini. Si può anche creare uno slideshow di ebook scritti dall'autore o che comunque si voglia pubblicizzare. Non ultimo potrebbe essere un modo per mostrare i loghi dei blog amici con i link per aprirli. In alcuni siti di impegno sociale potrebbe essere un modo per mostrare tutta una serie di campagne di sensibilizzazione.

 

Questo slideshow può essere inserito in modalità HTML in una pagina statica o in un post oppure posizionato nella sidebar, sotto l'intestazione o nel footer. Per questa ultima opzione si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<style type='text/css'>
#imageslide {
border:0;
padding:0;
margin: 10px auto;
overflow: hidden;
position: relative;
width: 270px;
height: 180px;
}
#imageslide img {
border: 0;
padding: 0;
width: 100%;
}
.immagine {
   position: relative;  
   width: 100%;
}
h4 {
   position: absolute;
   color: #eee;
   font: bold 22px Georgia;
   padding:10px;      
   top: 80px;
   left: 10px;
   width: 100%;
}
</style>
<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('imageslide').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,2500);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,2500);
}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>
<div id="imageslide">
<a href="#"><img class="immagine" alt="Immagine1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxL4kRMKZ-ERcezjgVUO_daIykdHrwhA-QL8343W5-y3D5iyM88a8FqJac6XG-YchJTcjnL6yxv6bkVMalxZjHdlJ59EM_mhrDbyhXwQ0GeJhc54CHHP7vJioO8gJzUsYH9uSELT6IB-I/" title="Post1" /></a><h4>Descrizione del link<br /> collegato alla foto</h4>
<a href="#"><img class="immagine" alt="Immagine2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81mPlXp4fheYnEHUjpHdE-vNj9igPMFjgJL11LJqarQ6ff2fNEgi5NrYfKmXgnqTPC7obzDDvGDQhk2TeMsz9XFLtv6W93Dxjq23MFa7z6hjoqhBBKbVEgJFNP3PQwbe42EtqXCcgxOg/" title="Post2" /></a><h4>Descrizione del link<br /> collegato alla foto</h4>
<a href="#"><img class="immagine" alt="Immagine3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPjIP6S3Eo6p80l6399K3OYL-hp5KhujY_3MwqmqvBUAPxkIPi1MHMH0S6HoWCeKm4nmlFW8f44SKzVowhtK86XrKvAmOb11SFtvNI_UpX22n-6SKYNZMx9ZrSizArzxWvpZCnQlGk5k/" title="Post3" /></a><h4>Descrizione del link<br /> collegato alla foto</h4>
<a href="#"><img class="immagine" alt="Immagine4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmY0Wd9-Zgksiu1LFTrsKAzksiodITRtw2tH3xQaCrXpjCBbOkuKF1cKx4i8u50vJPtm7SgFLO25uGOLWgIqHeJ3scDv_iKa07Aysa_rXA4kYgZJgEQmfge-Cn7TQDAtWymd9bGGYbKuw/" title="Post4" /></a><h4>Descrizione del link<br /> collegato alla foto</h4>
<a href="#"><img class="immagine" alt="Immagine5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGhXnfSkO12baOx_wDz3B7MqX0nk6BuVtSe1OUDNz6-wplHvLO0_klo34wIe4mFpmqFWdYTy6x5hNTydTN-Dw4jqwgvPCIYmZOYWjPqji-Gx7VUhTIn_tXLQ8M7GK8wyU02Fp4iwxoTI/" title="Post5" /></a><h4>Descrizione del link<br /> collegato alla foto</h4>
<a href="#"><img class="immagine" alt="Immagine6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO6Inapyrx2hWWXOBT3q-Mhn0FiNkPIosgMNRU3Y4F4p0NHJn7DqNr7Q2XFONswEyBUCanqvy4APjFpgaWGFCho4EG_glFKw4Hyr9piKA8pyboXu1slX_ms4SMA7l__9WHhnDO8wtoLXQ/" title="Post6" /></a><h4>Descrizione del link<br /> collegato alla foto</h4>
</div>

Si salva e si posiziona con il mouse. Si possono applicare numerose personalizzazioni di cui vado a indicare le principali che riguardano le immagini e il testo visualizzato:

1. Si possono modificare le dimensioni delle immagini (270px di larghezza e 180px di altezza).
2. Si può agire sull'aspetto del testo visualizzato sopra le immagini. I parametri proposti sono #eee per il codice del colore, 22px per la dimensione dei font, Georgia per la famiglia dei caratteri, 10px per il padding cioè per la distanza tra testo e bordi delle immagini.
3. Il posizionamento del testo nelle immagini dipende dai parametri top: 80px; left: 10px; che lo inserisce a 80 pixel dalla parte alta e a 10 pixel dal bordo sinistro.
4. Il parametro 2500 indica il numero di millisecondi che ciascuna immagine rimane visibile.
5. Gli URL delle pagine collegate alle singole immagini vanno inseriti al posto dei cancelletti ( # ).
6. Per ciascuna immagine nel codice sono stati inseriti i tag Alt e Title per il miglioramento della SEO.
7. Il tag <br/> inserito all'interno del titolo rappresenta un salto di riga e può essere tralasciato.
8. Gli URL colorati di rosso sostituiti con quelli delle foto da mostrare nello slideshow

La demo consta di sei immagini che però possono essere diminuite o aumentate di numero. Per una nuova immagine va incollato prima dell'ultimo tag </div> un codice con questa struttura

<a href="URL_LINK"><img class="immagine" alt="nome-immagine" src="URL_IMMAGINE" title="titolo-immagine" target="_blank" /></a><h4>Descrizione del link</h4>

dove è stato aggiunto  target="_blank" che è un tag opzionale e che serve per aprire il link in un'altra scheda, utile per i collegamenti esterni al blog.

Aggiornamento: Mi sono accorto solo adesso che il testo di ciascuna immagine viene visualizzato anche in tutte le altre sovrapponendosi. Quindi è possibile inserire un solo testo identico per tutte le foto. Se rieso a trovare la soluzione aggiornerò nuovamente il post.