Siguendo con cosas interesantes para implementar en nuestro blog para darle estilo y hacer la pagina atractiva al lector voy a mostrar como anadir asombroso Badge en forma de circulo. Cuando pones el cursor del mouse sobre el mismo , una transicion de CSS toma lugar y podemos ver un efecto elegante. Estos efectos se pueden ver regularmente con JavaScript y raramente con CSS.
El CSS es un elegante codigo y la transicion trabaja debido a un pseudo elemento ejemplo :despues :antes. Otro truco usado es el navegador . Este badge es extremadamente attractivo y seducirto al usuario a utilizarlo. Puedes anadir este widget en medio de las entradas o en la barra del lado de la plantilla. Una demostracion en vivo de este widget lo puedes ver abajo.
Para anadir este badge a la barra del lado/entradas o dondequiera puedas ponerlo en la HTMLanade el codigo de abajo.
<style>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="circle">
<h1><a href="http://www.ciudadblogger.info">Tu Blog</a></h1>
</div>
Despues de Anadir el codigo cambie el texto/URL que esta en letra oscura y anade tu texto/URL que desees.
Todo listo. Ahora los visitantes de tu blog podran ver este Badge con efectos de CSS en tu blogger blog.
