Come creare un Codice QR da inserire nei post del blog di Blogger.

Come mostrare un codice QR accanto al titolo di un blog su blogger

Dopo aver trattato il tema di come scannerizzare un Codice QR con QR Droid adesso vediamo come sia possibile inserire un tale codice all'inizio di ciascun articolo del blog in modo da rendere possibile una sua acquisizione attraverso i dispositivi mobile per poterne meglio condividere i contenuti.

Usiamo le API Google Chart Tools e il tag variabile di Blogger data:post.url che consente di visualizzare in modo automatico l'indirizzo di ogni post. In questo modo il codice QR avrà sempre come informazione l'URL dell'articolo in cui viene visualizzato.

Si va su Modello > Backup/Ripristino e si salva il template per un backup di sicurezza. Si torna quindi su Modello > Modifica HTML > Procedi, si espandono i modelli widget e si cerca la riga <data:post.body/> che rappresenta il contenuto del post. Sopra e sotto a questa riga, in quasi tutti i blog su Blogger, vengono inserite un sacco di cose che possono andare dalla pubblicità ai bottoni di condivisione.

Se vogliamo visualizzare l'icona del Codice QR prima del contenuto dell'articolo dobbiamo incollare subito sopra

<!-- Codice QR Inizio -->
<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>
<!-- Codice QR Fine - http://www.ideepercomputeredinternet.com  -->

dove l'icona che si visualizza è rappresentata dall'URL colorato di rosso. Ovviamente si può sostituire tale icona e modificare la sua dimensione. Si cerca adesso 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: Arial, Helvetica, sans-serif;
opacity:0;
text-align:center;
border:1px solid #d2d2d2;
padding:0;
}
.codice-qr:hover span {
visibility: visible;
opacity:1;
}

Si salva il modello. Quando un navigatore andrà nel nostro sito, anche con un dispositivo mobile, e passerà con il mouse sopra all'icona oppure la toccherà con un dito, si visualizzerà il Codice QR
Si può guardare l'effetto di persona per esempio aprendo questo post

• Demo dell'introduzione del codice QR in Blogger -

Se si scannerizza tale codice con una applicazione del tipo di QR Droid si otterrà automaticamente il link del post che potrà anche essere lasciato nella Cronologia dell'applicazione a futura memoria.
Fonte | Ayuda Bloggers -