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.
<!-- Codice QR Inizio -->
<b:if cond='data:blog.pageType == "item"'>
<div class='codice-qr'><img height='auto' src='https://lh5.googleusercontent.com/-DzyomyA9o-4/T0eiVOFp5zI/AAAAAAAAWuM/kBwIQ7LZQpg/s46/smartphone.png' width='30px'/><span><img expr:src='"http://chart.apis.google.com/chart?chs=100x100&cht=qr&chld=|0&chl=" + data:post.url + "?m=1"' height='100' width='100'/></span></div>
</b:if>
<!-- Codice QR Fine - http://www.ideepercomputeredinternet.com -->
<b:if cond='data:blog.pageType == "item"'>
<div class='codice-qr'><img height='auto' src='https://lh5.googleusercontent.com/-DzyomyA9o-4/T0eiVOFp5zI/AAAAAAAAWuM/kBwIQ7LZQpg/s46/smartphone.png' width='30px'/><span><img expr:src='"http://chart.apis.google.com/chart?chs=100x100&cht=qr&chld=|0&chl=" + data:post.url + "?m=1"' 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;
}
.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
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 -
ciao, grazie, questo articolo è bellissimo, perchè ho l'applicazione su windows phone e mi chiedevo a cosa servisse :-)
RispondiElimina..solo che ho provato ad inserire il tutto sul mio blog di prova e non funziona, o meglio, non visualizzo nessuna icona vicino al post...Io non ho cambiato nulla, a parte l'icona, c'è qualcos'altro che devo controllare?
P.S.: grazie a te sono sempre riuscita a risolvere tutti i dubbi e realizzare ciò che volevo, grazie!!!
@Alessandra
EliminaQuesto metodo l'ho provato in due blog. In uno ha funzionato e in uno no. Non ne conosco la ragione. Se trovo qualcosa di migliore lo pubblico.
grazie mille comunque x l'idea...nel frattempo ho ovviato creandomi il CODE e inserendolo tramite link nel post!!
RispondiEliminaFunziona! Il problema dell'immagine che non compariva l'ho risolto togliendo nel primo codice il parametro [height='auto'] che confliggeva con il successivo [width='30px']
RispondiElimina