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.
Hola Enrique,
ResponderBorrarde plano no me es tan fácil aprender y a veces me desepero, lo explicas muy bien y parece sencillo, pero de entrada desconozco varios términos.
¿Qué es la URL y cuando dices añade la URL que desees, no tengo idea ni que poner.
* En mi blog, copié un código que para redondear los cuadros y no lo supe hacer, lo cancelé, pero al abrir mi blog, en la portada quedo impreso ese código. ¿Cómo lo quito?
Por tu atención, gracias.
Felicidades.
Malú