Come mostrare un QR Code nei post di Blogger per far copiare o scannerizzare l'URL da cellulare.

Come mostrare per ogni articolo un codice QR da scannerizzare con una app del cellulare per ricavare l'indirizzo del post.

La navigazione da dispositivi mobili è sempre più importante ai fini del traffico anche per siti che fino a qualche tempo fa erano improbabili da consultare con il cellulare. Per questa ragione è imperativo avere un sito mobile friendly per sfruttare a pieno tutte le possibilità.

Gli utenti di Blogger possono usare la versione mobile già predisposta e eventualmente personalizzarla. Sono anche disponibili moltissimi modelli gratuiti Responsive che si adattano automaticamente alle diverse risoluzioni. Anche se nei cellulari più moderni si è fatto molto in tal senso è ancora piuttosto disagevole fare il copia e incolla di un indirizzo web per condividerlo in un post o in una email.

Può quindi essere utile mostrare accanto al titolo del post o a lato del contenuto un codice QR che, se scannerizzato, porti all'indirizzo della pagina. Tale codice dovrà essere funzione dell'URL. Si potrà mostrare solo nei dispositivi desktop, solo in quelli mobili o ovunque. La visualizzazione nella versione desktop serve per avvicinare il cellulare allo schermo, scannerizzare il codice QR con una app tipo QR Droid per aprire anche da cellulare la pagina del sito che si sta visitando da PC.

Per questa personalizzazione si utilizzano le API di Google Chart Tools e si utilizza il tag di Blogger data:post.url  che è la variabile dell'indirizzo del post di Blogger.  Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga 

<b:includable id='post' var='post'>

quindi si scorre il codice in basso fino a trovare la riga <data:post.body/> che è il tag di Blogger che indica tutto il contenuto del post. Se vogliamo visualizzare il QR Code subito prima del contenuto cioè più o meno sotto la linea del titolo dobbiamo incollarvi subito sopra questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='codice-qr'><img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpPbO5gR2QQLo9CMsjLFNA8UlZ4vXcFrhUaIB2-oXMmJ3wiSKRnqTjnKI1OTs8CRr7MPvx1lwPZDxYroM6WxzvGCDXipt7vklDGa9DXSXjlfBRljCiTDuMn6t5uZSPaEtzqRt1bDjPnCr/s46/smartphone.png' width='30px' /><span><img expr:src='&quot;http://chart.apis.google.com/chart?chs=100x100&amp;cht=qr&amp;chld=|0&amp;chl=&quot; + data:post.url + &quot;?m=1&quot;' height='100' width='100' /></span></div>
</b:if>

Si cerca quindi la riga ]]></b:skin> e, subito sopra, si incolla quest'altro codice

/* CODICE QR */
.codice-qr{
position: relative;
float:right;
z-index: 0;
}
.codice-qr:hover {
z-index: 60;
}
.codice-qr img{
padding:0;
}
.codice-qr span{
background:#fff;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
position: absolute;
visibility: hidden;
left: -80px;
bottom: -80px;
color: #2d2d2d;
font-size:18px;
font-weight:normal;
font-family: Georgia;
opacity:0;
text-align:center;
border:1px solid #d2d2d2;
padding:0;
}
.codice-qr:hover span {
visibility: visible;
opacity:1;
}

Si salva il modello. L'URL colorato di rosso rappresenta una icona di 30 pixel di larghezza che può essere modificato a piacere. Passando con il mouse sopra a quella icona o toccandola con il dito da dispositivo mobile si visualizzerà il QR Code collegato all'URL del post in oggetto.

MOSTRARE L'ICONA ANCHE NEI DISPOSITIVI MOBILI

Se si desidera mostrare l'icona anche nei dispositivi mobili basterà incollare il primo codice anche nella sezione per il mobile. Sempre su Modello > Modifica HTML si cerca stavolta la riga

<b:includable id='mobile-post' var='post'>

e si scorre il codice verso il basso fino a trovare lo stesso tag <data:post.body/> .  Subito sopra a questa va incollato il primo codice di questo post per poi salvare il template.

Demo
Clicca qui

Si può scegliere anche un altro posizionamento per l'icona magari accanto al titolo del post seguendo e adattando le istruzioni del seguente articolo che tratta proprio questo tema 

Come mostrare accanto al titolo di Blogger una icona in funzione della etichetta