Come creare un Codice QR e inserirlo nei post del blog usando API Google Chart Tools.

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/AVvXsEgT4LSW952ymM5K8Rd4ThfTBLonJmABqekw3g2kdPhel-i9trn9GkPqcblU2vtiI_7O_rksi1htL1gWqbtHy_TBTs6iKa2-ElBfPl0A-NpOhfW3GjdW0jsiwg3EOUGHm7sv2Gk2NjHFywhZ/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

fonte: IpCeI

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog: