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%.



2 commenti :

  1. Dal punto di vista SEO conviene caricare le foto direttamente dal proprio pc, così in questo modo verranno visualizzate all'interno del blog, o linkarle da siti di photo sharing come tinypic, dopo averle caricate?

    RispondiElimina
    Risposte
    1. Da un punto di vista SEO non cambia nulla, ma da un punto di vista pratico conviene caricare le immagini su Blogger perché Tinypic e simili, a distanza di tempo, eliminano le immagini vecchie, mentre su Blogger non vengono eliminate finché il tuo account è attivo.

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".