Plantilla Blogger : Truco para mostrar los detalles del enlace al pasar el cursor por CSS para Blogspot

Este va a hacer uno de los pocos tutoriales donde no le daré mucha intro. Se trata de un estilo tooltip que únicamente mostrara cuando pasemos el cursor sobre un enlace este nos revelara la URL

Demostración: 

1. Solo debes de agregar el siguiente código en la entrada.

No tendrás que hacer nada mas. disfruta el nuevo tooltip para tus enlaces y fotos

<style type="text/css">
.post-body a::before {
 content: attr(href);
 float: none;
 clear: both;
 font-size: 22px;
 font-family: "Roboto", sans-serif;
 font-weight: 300;
 text-transform: none;
 padding: 15px 0;
 background: #fff;
 color: #55579e;
 border-radius: 0;
 position: fixed;
 opacity: 0;
 left: 0;
 top: 0;
 visibility: hidden;
 transform: scaleY(0);
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 text-align: center;
 width: 100%;
 transition: .3s ease-in-out;
 z-index: 999;
 margin: 0 auto;
}

.post-body a:hover::before {
 opacity: 1;
 visibility: visible;
 transform: scaleY(1)
}
</style>

Ya esta solo queda disfrutar de tus enlaces en tus entradas