Come rendere le immagini non cliccabili su Blogger

Se stata utilizzando un modello di Blogger personalizzato o realizzato da terzi, molto probabilmente avrete notato che non supportano la funzione lightbox, cioè quella che apre le immagini sovrapponendole al testo quando vengono cliccate. Senza la funzioen lightbox le immagini cliccate vanno ad aprire una nuova pagina chiudendo quella precedente e non è un ottima scelta dal punto di vista SEO perché aumenta la frequenza di rimbalzo. Chi usa Wordpress non si pone questo problema perché le immagini vengono caricate all'interno dello stesso dominio mentre su Blogger appartengono ad un hosting non collegato al proprio blog. A questo punto si deve decidere se utilizzare il lightbox oppure se rendere tutte le immagini non cliccabili.

1) Se il problema si pone solamente per poche immagini conviene eliminare il collegamento ipertestuale editando il post ove sono presenti le immagini da rendere non cliccabili.

Per esempio l'immagine caricata in questo articolo è costituita da questo codice:

<a href="http://1.bp.blogspot.com/-jUCFWlAflSY/VEPsAcPhLGI/AAAAAAAAZXs/7tbVaNnb_Sk/s1600/How-to-Remove-Hyperlinks-from-Post-Images-in-Blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-jUCFWlAflSY/VEPsAcPhLGI/AAAAAAAAZXs/7tbVaNnb_Sk/s1600/How-to-Remove-Hyperlinks-from-Post-Images-in-Blogger.png" height="163" width="200" /></a>

Eliminando la parte in rosso vi rimarrà solo il seguente codice, che renderà le vostre immagini non cliccabili:

<img border="0" src="http://1.bp.blogspot.com/-jUCFWlAflSY/VEPsAcPhLGI/AAAAAAAAZXs/7tbVaNnb_Sk/s1600/How-to-Remove-Hyperlinks-from-Post-Images-in-Blogger.png" height="163" width="200" />

2) Se invece volete rendere tutte le immagini di Blogger non cliccabili dovete andare su Modello > Modifica HTML e cercare il tag ]]></ b: skin> e prima di esso aggiungere uno dei seguenti codici:

.post img, .post img a{
position: relative;
z-index: -100; }

oppure

.post img, .post img a{
 position: relative;
 z-index: -1; }
.post-outer{
position: relative;
 z-index: 1 !important; }

oppure

.entry{
position: relative;
z-index: 1; }
.hentry img, .separator{
position: relative;
z-index: -1; }

oppure

.post{
position: relative !important;
z-index: 10 !important;
}
.hentry img, .separator{
position: relative !important;
z-index: -1 !important;
}

La soluzione tramite codice css potrebbe anche non funzionare, mentre quella manuale funziona al 100%.