Añadir códigos QR en las entradas de Blogger

Gracias a las API's de Google es posible insertar códigos Quick Response en las entradas de Blogger o en cualquier plataforma web. Con este método facilitamos el manejo de nuestro blog en dispositivos móviles.

Jugando un poco con los valores "data" y "expr" es posible adaptar esta API para que tome la URL de cada post y además que direccione directamente hacia la versión móvil del blog.

Puedes ver el resultado pasando el cursor del mouse por encima de la siguiente imagen (El QR es de prueba, direcciona hacia la página principal del blog):

El tutorial:

Paso 1: Insertando la función:

En este paso debemos buscar alguna sección en la cual insertar esta función, en el tutorial explicaré la manera de situarlas justo a la derecha de las entradas.

En "Diseño | Edición HTML" deberás buscar la siguiente línea:

<data:post.body/>

Arriba de ésta pega el siguiente (Si quieres que se vea debajo de cada entrada pégalo debajo):

<div class="qr-codigos"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH9UrESrC0FkAO3tcGm3Zk4BjorHwyHCl4dMFUPIzsiCuG94M5XZ48atnLLCZ77W7bFi8ph4aQdnPTo9fcoFy-iuHMUFeS-W9prqhxQ4UCvacm525tYmcGQjI32jUHABwhkShrKvXsWD0/s1600/Mobile.png" width="30px" height="auto" /><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>

Si quieres cambiar el ícono basta con reemplazar la URL destacada por algún otro ícono.

Paso 2: Añadiendo CSS:

Ahora deberás buscar el siguiente código:

]]></b:skin>

Arriba de este pega el siguiente:

.qr-codigos{
position: relative;

float:right;

z-index: 0;
}
.qr-codigos:hover {
z-index: 60;
}

.qr-codigos img{
padding:0;
}

.qr-codigos 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;
}


.qr-codigos:hover span {
visibility: visible;
opacity:1;

}

Guarda los cambios y listo.

Importante:

• Si quieres que la función no se muestre en la página principal deberás usar las condicionantes </b:if>
• Puedes modificar la orientación del ícono cambiando float:right; por float:left; .